@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/SettingsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPage.js","names":[],"sources":["../../../src/botlit/pages/SettingsPage.tsx"],"sourcesContent":["/**\n * Settings Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport {\n  Key,\n  Bell,\n  Shield,\n  Database,\n  Palette,\n  Save,\n  Brain,\n  Link2,\n  ExternalLink,\n} from 'lucide-react';\nimport { useTheme, type ThemeMode } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { toast } from 'sonner';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input, FormField } from '../components/Input';\nimport { Badge } from '../components/Badge';\nimport { useLLMProviders, useConfigureLLMProvider, useLLMModels } from '../hooks/useLLMProviders';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport { cn } from '../utils/cn';\nimport { toUnion } from '../utils/unions';\n\n/** Provider kinds the form offers, in the casing the service stores. */\nconst PROVIDER_TYPES = [\n  'OPENAI',\n  'ANTHROPIC',\n  'GOOGLE',\n  'AZURE_OPENAI',\n  'AWS_BEDROCK',\n  'CUSTOM',\n] as const;\n\n/** The `<option>` values are lowercase; the column is the uppercase enum. */\nfunction toProviderType(value: string): (typeof PROVIDER_TYPES)[number] {\n  return toUnion(value.toUpperCase(), PROVIDER_TYPES, 'CUSTOM');\n}\n\nexport const SettingsPage: FC = () => {\n  const { data: providers, refetch: refetchProviders } = useLLMProviders();\n  const { configureProvider, isConfiguring } = useConfigureLLMProvider();\n  const { data: llmModels } = useLLMModels();\n  const { mode, setMode } = useTheme();\n  const [activeTab, setActiveTab] = useState('providers');\n  const [apiKey, setApiKey] = useState('');\n  const [selectedProviderType, setSelectedProviderType] = useState('openai');\n  const [editingProviderId, setEditingProviderId] = useState<string | null>(null);\n  // Credential method: 'integration' (preferred) or 'apikey' (legacy)\n  const [credentialMethod, setCredentialMethod] = useState<'integration' | 'apikey'>('apikey');\n  const [connectionId, setConnectionId] = useState('');\n  // Model creation form state\n  const [newModelName, setNewModelName] = useState('');\n  const [newModelId, setNewModelId] = useState('');\n  const [newModelContextWindow, setNewModelContextWindow] = useState('128000');\n  const [newModelMaxOutput, setNewModelMaxOutput] = useState('4096');\n  const [newModelInputPrice, setNewModelInputPrice] = useState('2.5');\n  const [newModelOutputPrice, setNewModelOutputPrice] = useState('10');\n  const [newModelProviderId, setNewModelProviderId] = useState('');\n\n  const tabs = [\n    { id: 'providers', label: 'LLM Providers', icon: <Key size={16} /> },\n    { id: 'notifications', label: 'Notifications', icon: <Bell size={16} /> },\n    { id: 'security', label: 'Security', icon: <Shield size={16} /> },\n    { id: 'storage', label: 'Storage', icon: <Database size={16} /> },\n    { id: 'appearance', label: 'Appearance', icon: <Palette size={16} /> },\n  ];\n\n  return (\n    <PageLayout title=\"Settings\" description=\"Configure your Botlit workspace settings\">\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Key size={18} />}>\n          Workspace-wide settings that affect every bot and agent you build. The most important is\n          LLM Providers — connect at least one model provider (OpenAI, Anthropic, Google and others)\n          so your agents have a brain to think with. From here you also manage models,\n          notifications, security keys, storage retention and appearance.\n        </PagePurpose>\n        <div className=\"grid grid-cols-12 gap-6\">\n          {/* Sidebar */}\n          <div className=\"col-span-3\">\n            <Card>\n              <CardContent className=\"p-2\">\n                {tabs.map((tab) => (\n                  <button\n                    key={tab.id}\n                    onClick={() => setActiveTab(tab.id)}\n                    className={cn(\n                      'w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors',\n                      activeTab === tab.id\n                        ? 'bg-action-primary-bg text-action-primary-text'\n                        : 'hover:bg-accent'\n                    )}\n                  >\n                    {tab.icon}\n                    <span className=\"font-medium\">{tab.label}</span>\n                  </button>\n                ))}\n              </CardContent>\n            </Card>\n          </div>\n\n          {/* Content */}\n          <div className=\"col-span-9 space-y-6\">\n            {activeTab === 'providers' && (\n              <>\n                <Card treatment=\"glass\" glow>\n                  <CardHeader>\n                    <CardTitle>LLM Providers</CardTitle>\n                    <CardDescription>Configure API keys for AI model providers</CardDescription>\n                  </CardHeader>\n                  <CardContent className=\"space-y-4\">\n                    {providers?.map(\n                      (provider: {\n                        id: string;\n                        name: string;\n                        type: string;\n                        isActive: boolean;\n                        connectionId?: string | null;\n                        credentialsHash?: string | null;\n                      }) => (\n                        <div\n                          key={provider.id}\n                          className=\"flex items-center justify-between p-4 border border-border-subtle rounded-lg\"\n                        >\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"p-2 bg-action-primary-bg/10 rounded-lg\">\n                              {provider.connectionId ? (\n                                <Link2 className=\"h-5 w-5 text-primary\" />\n                              ) : (\n                                <Key className=\"h-5 w-5 text-primary\" />\n                              )}\n                            </div>\n                            <div>\n                              <p className=\"font-medium\">{provider.name}</p>\n                              <p className=\"text-sm text-text-secondary\">Type: {provider.type}</p>\n                              {provider.connectionId && (\n                                <p className=\"text-xs text-text-secondary mt-0.5\">\n                                  Connected via Integrations\n                                </p>\n                              )}\n                              {!provider.connectionId && provider.credentialsHash && (\n                                <p className=\"text-xs text-text-secondary mt-0.5\">\n                                  API key stored locally\n                                </p>\n                              )}\n                            </div>\n                          </div>\n                          <div className=\"flex items-center gap-3\">\n                            {provider.connectionId && <Badge variant=\"default\">Integration</Badge>}\n                            <Badge variant={provider.isActive ? 'success' : 'secondary'}>\n                              {provider.isActive ? 'Active' : 'Inactive'}\n                            </Badge>\n                            <Button\n                              variant=\"outline\"\n                              size=\"sm\"\n                              onClick={() => {\n                                setEditingProviderId(provider.id);\n                                setSelectedProviderType(provider.type.toLowerCase());\n                                setApiKey('');\n                                setConnectionId(provider.connectionId || '');\n                                setCredentialMethod(\n                                  provider.connectionId ? 'integration' : 'apikey'\n                                );\n                                // Scroll to the Add Provider form\n                                document\n                                  .getElementById('provider-form')\n                                  ?.scrollIntoView({ behavior: 'smooth' });\n                              }}\n                            >\n                              Configure\n                            </Button>\n                          </div>\n                        </div>\n                      )\n                    )}\n                  </CardContent>\n                </Card>\n\n                {/* LLM Models List */}\n                <Card>\n                  <CardHeader>\n                    <CardTitle>LLM Models</CardTitle>\n                    <CardDescription>Registered models across your providers</CardDescription>\n                  </CardHeader>\n                  <CardContent className=\"space-y-4\">\n                    {llmModels && llmModels.length > 0 ? (\n                      llmModels.map(\n                        (model: {\n                          id: string;\n                          name: string;\n                          modelId: string;\n                          providerId: string;\n                          isActive: boolean;\n                          contextWindow?: number;\n                          maxOutputTokens?: number;\n                          inputPricePerMToken?: number;\n                          outputPricePerMToken?: number;\n                        }) => {\n                          const providerName = providers?.find(\n                            (p: { id: string; name: string }) => p.id === model.providerId\n                          )?.name;\n                          return (\n                            <div\n                              key={model.id}\n                              className=\"flex items-center justify-between p-4 border border-border-subtle rounded-lg\"\n                            >\n                              <div className=\"flex items-center gap-4\">\n                                <div className=\"p-2 bg-purple-500/10 rounded-lg\">\n                                  <Brain className=\"h-5 w-5 text-purple-500\" />\n                                </div>\n                                <div>\n                                  <p className=\"font-medium\">{model.name}</p>\n                                  <p className=\"text-sm text-text-secondary\">\n                                    {model.modelId}\n                                    {providerName && ` · ${providerName}`}\n                                  </p>\n                                  <div className=\"flex gap-3 mt-1 text-xs text-text-secondary\">\n                                    {model.contextWindow != null && (\n                                      <span>\n                                        Context: {(model.contextWindow / 1000).toFixed(0)}K\n                                      </span>\n                                    )}\n                                    {model.maxOutputTokens != null && (\n                                      <span>\n                                        Max out: {(model.maxOutputTokens / 1000).toFixed(0)}K\n                                      </span>\n                                    )}\n                                    {model.inputPricePerMToken != null && (\n                                      <span>${model.inputPricePerMToken}/M in</span>\n                                    )}\n                                    {model.outputPricePerMToken != null && (\n                                      <span>${model.outputPricePerMToken}/M out</span>\n                                    )}\n                                  </div>\n                                </div>\n                              </div>\n                              <Badge variant={model.isActive ? 'success' : 'secondary'}>\n                                {model.isActive ? 'Active' : 'Inactive'}\n                              </Badge>\n                            </div>\n                          );\n                        }\n                      )\n                    ) : (\n                      <p className=\"text-sm text-text-secondary text-center py-4\">\n                        No models registered yet. Add a model below.\n                      </p>\n                    )}\n                  </CardContent>\n                </Card>\n\n                <Card id=\"provider-form\">\n                  <CardHeader>\n                    <CardTitle>{editingProviderId ? 'Update Provider' : 'Add Provider'}</CardTitle>\n                    <CardDescription>\n                      {editingProviderId\n                        ? 'Update credentials for this provider'\n                        : 'Configure a new LLM provider'}\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent className=\"space-y-4\">\n                    <FormField label=\"Provider\">\n                      <select\n                        className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                        value={selectedProviderType}\n                        onChange={(e) => setSelectedProviderType(e.target.value)}\n                      >\n                        <option value=\"openai\">OpenAI</option>\n                        <option value=\"anthropic\">Anthropic</option>\n                        <option value=\"google\">Google AI</option>\n                        <option value=\"azure_openai\">Azure OpenAI</option>\n                        <option value=\"aws_bedrock\">AWS Bedrock</option>\n                        <option value=\"custom\">Custom</option>\n                      </select>\n                    </FormField>\n\n                    {/* Credential method selector */}\n                    <FormField label=\"Credential Method\">\n                      <div className=\"flex gap-3\">\n                        <label\n                          className={cn(\n                            'flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1',\n                            credentialMethod === 'integration'\n                              ? 'border-primary bg-action-primary-bg/5'\n                              : 'border-border-subtle hover:border-primary/50'\n                          )}\n                        >\n                          <input\n                            type=\"radio\"\n                            name=\"credentialMethod\"\n                            value=\"integration\"\n                            checked={credentialMethod === 'integration'}\n                            onChange={() => setCredentialMethod('integration')}\n                            className=\"h-4 w-4\"\n                          />\n                          <div>\n                            <p className=\"font-medium text-sm\">Connect via Integrations</p>\n                            <p className=\"text-xs text-text-secondary\">\n                              Managed credentials (recommended)\n                            </p>\n                          </div>\n                        </label>\n                        <label\n                          className={cn(\n                            'flex items-center gap-2 px-4 py-3 border rounded-lg cursor-pointer transition-colors flex-1',\n                            credentialMethod === 'apikey'\n                              ? 'border-primary bg-action-primary-bg/5'\n                              : 'border-border-subtle hover:border-primary/50'\n                          )}\n                        >\n                          <input\n                            type=\"radio\"\n                            name=\"credentialMethod\"\n                            value=\"apikey\"\n                            checked={credentialMethod === 'apikey'}\n                            onChange={() => setCredentialMethod('apikey')}\n                            className=\"h-4 w-4\"\n                          />\n                          <div>\n                            <p className=\"font-medium text-sm\">Enter API Key</p>\n                            <p className=\"text-xs text-text-secondary\">\n                              Paste key directly (legacy)\n                            </p>\n                          </div>\n                        </label>\n                      </div>\n                    </FormField>\n\n                    {/* Integration connection method */}\n                    {credentialMethod === 'integration' && (\n                      <div className=\"space-y-3\">\n                        <div className=\"p-4 bg-bg-sunken/50 border border-border-subtle rounded-lg\">\n                          <div className=\"flex items-start gap-3\">\n                            <Link2 className=\"h-5 w-5 text-primary mt-0.5 flex-shrink-0\" />\n                            <div className=\"space-y-2 flex-1\">\n                              <p className=\"text-sm font-medium\">Integration Connection</p>\n                              <p className=\"text-xs text-text-secondary\">\n                                Create a connection in the Integrations module, then paste the\n                                Connection ID here. This stores your API key securely in the\n                                Integrations vault.\n                              </p>\n                              <div className=\"flex gap-2 mt-2\">\n                                <Button\n                                  variant=\"outline\"\n                                  size=\"sm\"\n                                  onClick={() => {\n                                    window.open('/integrations/connections', '_blank');\n                                  }}\n                                >\n                                  <ExternalLink size={14} className=\"mr-1.5\" />\n                                  Open Integrations\n                                </Button>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                        <FormField label=\"Connection ID\">\n                          <Input\n                            placeholder=\"Paste connection ID from Integrations...\"\n                            value={connectionId}\n                            onChange={(e) => setConnectionId(e.target.value)}\n                          />\n                        </FormField>\n                      </div>\n                    )}\n\n                    {/* Legacy API key method */}\n                    {credentialMethod === 'apikey' && (\n                      <FormField label=\"API Key\">\n                        <Input\n                          type=\"password\"\n                          placeholder=\"sk-...\"\n                          value={apiKey}\n                          onChange={(e) => setApiKey(e.target.value)}\n                        />\n                      </FormField>\n                    )}\n\n                    <div className=\"flex gap-2\">\n                      <Button\n                        leftIcon={<Save size={16} />}\n                        isLoading={isConfiguring}\n                        disabled={credentialMethod === 'apikey' ? !apiKey : !connectionId}\n                        onClick={async () => {\n                          try {\n                            const providerName =\n                              selectedProviderType.charAt(0).toUpperCase() +\n                              selectedProviderType.slice(1);\n\n                            // `useConfigureLLMProvider` projects each payload\n                            // onto the fields its input type declares and adds\n                            // the workspace id, so only real fields go here.\n                            const credentials =\n                              credentialMethod === 'integration'\n                                ? undefined\n                                : apiKey\n                                  ? { apiKey }\n                                  : undefined;\n                            const linkedConnectionId =\n                              credentialMethod === 'integration' ? connectionId : undefined;\n\n                            if (editingProviderId) {\n                              await configureProvider(\n                                {\n                                  name: providerName,\n                                  type: toProviderType(selectedProviderType),\n                                  connectionId: linkedConnectionId,\n                                  credentials,\n                                },\n                                editingProviderId\n                              );\n                            } else {\n                              await configureProvider({\n                                name: providerName,\n                                type: toProviderType(selectedProviderType),\n                                connectionId: linkedConnectionId,\n                                credentials,\n                              });\n                            }\n\n                            setApiKey('');\n                            setConnectionId('');\n                            setEditingProviderId(null);\n                            await refetchProviders();\n                            const providerLabel =\n                              selectedProviderType.charAt(0).toUpperCase() +\n                              selectedProviderType.slice(1);\n                            toast.success(\n                              editingProviderId\n                                ? `${providerLabel} provider updated successfully`\n                                : `${providerLabel} provider added successfully`\n                            );\n                          } catch (err: unknown) {\n                            const message =\n                              err instanceof Error ? err.message : 'Failed to save provider';\n                            toast.error(message);\n                          }\n                        }}\n                      >\n                        {editingProviderId ? 'Update Provider' : 'Save Provider'}\n                      </Button>\n                      {editingProviderId && (\n                        <Button\n                          variant=\"outline\"\n                          onClick={() => {\n                            setEditingProviderId(null);\n                            setApiKey('');\n                            setConnectionId('');\n                            setCredentialMethod('apikey');\n                            setSelectedProviderType('openai');\n                          }}\n                        >\n                          Cancel\n                        </Button>\n                      )}\n                    </div>\n                  </CardContent>\n                </Card>\n\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Add Model</CardTitle>\n                    <CardDescription>\n                      Register a new LLM model for an existing provider\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent className=\"space-y-4\">\n                    <FormField label=\"Provider\">\n                      <select\n                        className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                        value={newModelProviderId}\n                        onChange={(e) => setNewModelProviderId(e.target.value)}\n                      >\n                        <option value=\"\">Select a provider...</option>\n                        {providers?.map((p: { id: string; name: string }) => (\n                          <option key={p.id} value={p.id}>\n                            {p.name}\n                          </option>\n                        ))}\n                      </select>\n                    </FormField>\n                    <FormField label=\"Model Name\">\n                      <Input\n                        placeholder=\"e.g., GPT-4o\"\n                        value={newModelName}\n                        onChange={(e) => setNewModelName(e.target.value)}\n                      />\n                    </FormField>\n                    <FormField label=\"Model ID\">\n                      <Input\n                        placeholder=\"e.g., gpt-4o\"\n                        value={newModelId}\n                        onChange={(e) => setNewModelId(e.target.value)}\n                      />\n                    </FormField>\n                    <div className=\"grid grid-cols-2 gap-4\">\n                      <FormField label=\"Context Window\">\n                        <Input\n                          type=\"number\"\n                          value={newModelContextWindow}\n                          onChange={(e) => setNewModelContextWindow(e.target.value)}\n                        />\n                      </FormField>\n                      <FormField label=\"Max Output Tokens\">\n                        <Input\n                          type=\"number\"\n                          value={newModelMaxOutput}\n                          onChange={(e) => setNewModelMaxOutput(e.target.value)}\n                        />\n                      </FormField>\n                    </div>\n                    <div className=\"grid grid-cols-2 gap-4\">\n                      <FormField label=\"Input Price / 1M tokens\">\n                        <Input\n                          type=\"number\"\n                          step=\"0.01\"\n                          value={newModelInputPrice}\n                          onChange={(e) => setNewModelInputPrice(e.target.value)}\n                        />\n                      </FormField>\n                      <FormField label=\"Output Price / 1M tokens\">\n                        <Input\n                          type=\"number\"\n                          step=\"0.01\"\n                          value={newModelOutputPrice}\n                          onChange={(e) => setNewModelOutputPrice(e.target.value)}\n                        />\n                      </FormField>\n                    </div>\n                    <Button\n                      leftIcon={<Save size={16} />}\n                      disabled={true}\n                      onClick={async () => {\n                        // TODO: Fix this - useCreateLLMModel not available yet\n                        toast.error('Model creation not yet implemented');\n                        // try {\n                        //   await createModel({\n                        //     providerId: newModelProviderId,\n                        //     name: newModelName,\n                        //     modelId: newModelId,\n                        //     contextWindow: parseInt(newModelContextWindow) || 128000,\n                        //     maxOutputTokens: parseInt(newModelMaxOutput) || 4096,\n                        //     inputPricePerMToken: parseFloat(newModelInputPrice) || 2.5,\n                        //     outputPricePerMToken: parseFloat(newModelOutputPrice) || 10,\n                        //   });\n                        //   await Promise.all([refetchProviders(), refetchModels()]);\n                        //   toast.success(`Model \"${newModelName}\" added successfully`);\n                        //   setNewModelName('');\n                        //   setNewModelId('');\n                        //   setNewModelProviderId('');\n                        // } catch (err: unknown) {\n                        //   const message = err instanceof Error ? err.message : 'Failed to add model';\n                        //   toast.error(message);\n                        // }\n                      }}\n                    >\n                      Add Model\n                    </Button>\n                  </CardContent>\n                </Card>\n              </>\n            )}\n\n            {activeTab === 'notifications' && (\n              <Card>\n                <CardHeader>\n                  <CardTitle>Notification Settings</CardTitle>\n                  <CardDescription>Configure how you receive notifications</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  {[\n                    {\n                      label: 'Agent errors',\n                      description: 'Get notified when an agent encounters an error',\n                    },\n                    {\n                      label: 'High usage alerts',\n                      description: 'Alerts when token usage exceeds thresholds',\n                    },\n                    { label: 'Weekly reports', description: 'Receive weekly usage summaries' },\n                    {\n                      label: 'New conversation',\n                      description: 'Notify when a new conversation starts',\n                    },\n                  ].map((item) => (\n                    <label\n                      key={item.label}\n                      className=\"flex items-center justify-between p-4 border border-border-subtle rounded-lg cursor-pointer\"\n                    >\n                      <div>\n                        <p className=\"font-medium\">{item.label}</p>\n                        <p className=\"text-sm text-text-secondary\">{item.description}</p>\n                      </div>\n                      <input type=\"checkbox\" className=\"h-5 w-5 rounded\" defaultChecked />\n                    </label>\n                  ))}\n                </CardContent>\n              </Card>\n            )}\n\n            {activeTab === 'security' && (\n              <Card>\n                <CardHeader>\n                  <CardTitle>Security Settings</CardTitle>\n                  <CardDescription>Manage security and access controls</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <FormField label=\"API Key\">\n                    <div className=\"flex gap-2\">\n                      <Input type=\"password\" value=\"••••••••••••••••\" readOnly />\n                      <Button variant=\"outline\">Regenerate</Button>\n                    </div>\n                  </FormField>\n                  <FormField label=\"Webhook Secret\">\n                    <div className=\"flex gap-2\">\n                      <Input type=\"password\" value=\"••••••••••••••••\" readOnly />\n                      <Button variant=\"outline\">Regenerate</Button>\n                    </div>\n                  </FormField>\n                  <FormField label=\"Allowed Origins (CORS)\">\n                    <Input placeholder=\"https://example.com\" />\n                  </FormField>\n                </CardContent>\n              </Card>\n            )}\n\n            {activeTab === 'storage' && (\n              <Card>\n                <CardHeader>\n                  <CardTitle>Storage Settings</CardTitle>\n                  <CardDescription>Configure data storage and retention</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <div className=\"p-4 bg-bg-sunken rounded-lg text-center\">\n                      <p className=\"text-2xl font-bold\">45.2 GB</p>\n                      <p className=\"text-sm text-text-secondary\">Total Storage</p>\n                    </div>\n                    <div className=\"p-4 bg-bg-sunken rounded-lg text-center\">\n                      <p className=\"text-2xl font-bold\">12.8 GB</p>\n                      <p className=\"text-sm text-text-secondary\">Conversations</p>\n                    </div>\n                    <div className=\"p-4 bg-bg-sunken rounded-lg text-center\">\n                      <p className=\"text-2xl font-bold\">32.4 GB</p>\n                      <p className=\"text-sm text-text-secondary\">Knowledge Bases</p>\n                    </div>\n                  </div>\n                  <FormField label=\"Conversation Retention\">\n                    <select className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\">\n                      <option value=\"30\">30 days</option>\n                      <option value=\"90\">90 days</option>\n                      <option value=\"180\">180 days</option>\n                      <option value=\"365\">1 year</option>\n                      <option value=\"forever\">Forever</option>\n                    </select>\n                  </FormField>\n                </CardContent>\n              </Card>\n            )}\n\n            {activeTab === 'appearance' && (\n              <Card>\n                <CardHeader>\n                  <CardTitle>Appearance Settings</CardTitle>\n                  <CardDescription>Customize the look and feel</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <FormField label=\"Theme\">\n                    <div className=\"flex gap-4\">\n                      {(['light', 'dark', 'system'] as ThemeMode[]).map((theme) => (\n                        <label key={theme} className=\"flex items-center gap-2 cursor-pointer\">\n                          <input\n                            type=\"radio\"\n                            name=\"theme\"\n                            value={theme}\n                            checked={mode === theme}\n                            onChange={() => setMode(theme)}\n                            className=\"h-4 w-4\"\n                          />\n                          <span className=\"capitalize\">{theme}</span>\n                        </label>\n                      ))}\n                    </div>\n                  </FormField>\n                  <FormField label=\"Accent Color\">\n                    <div className=\"flex gap-2\">\n                      {['#3b82f6', '#8b5cf6', '#22c55e', '#f59e0b', '#ef4444', '#ec4899'].map(\n                        (color) => (\n                          <button\n                            key={color}\n                            className=\"h-8 w-8 rounded-full border-2 border-transparent hover:border-foreground\"\n                            style={{ backgroundColor: color }}\n                          />\n                        )\n                      )}\n                    </div>\n                  </FormField>\n                  <FormField label=\"Font Size\">\n                    <select className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\">\n                      <option value=\"sm\">Small</option>\n                      <option value=\"md\">Medium</option>\n                      <option value=\"lg\">Large</option>\n                    </select>\n                  </FormField>\n                </CardContent>\n              </Card>\n            )}\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACD;AAGD,SAAS,EAAe,GAAgD;AACtE,QAAO,EAAQ,EAAM,aAAa,EAAE,GAAgB,SAAS;;AAG/D,IAAa,UAAyB;CACpC,IAAM,EAAE,MAAM,GAAW,SAAS,MAAqB,GAAiB,EAClE,EAAE,sBAAmB,qBAAkB,GAAyB,EAChE,EAAE,MAAM,MAAc,GAAc,EACpC,EAAE,UAAM,eAAY,GAAU,EAC9B,CAAC,GAAW,KAAgB,EAAS,YAAY,EACjD,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,CAAC,GAAsB,KAA2B,EAAS,SAAS,EACpE,CAAC,GAAmB,KAAwB,EAAwB,KAAK,EAEzE,CAAC,GAAkB,KAAuB,EAAmC,SAAS,EACtF,CAAC,GAAc,KAAmB,EAAS,GAAG,EAE9C,CAAC,GAAc,KAAmB,EAAS,GAAG,EAC9C,CAAC,GAAY,KAAiB,EAAS,GAAG,EAC1C,CAAC,IAAuB,MAA4B,EAAS,SAAS,EACtE,CAAC,IAAmB,MAAwB,EAAS,OAAO,EAC5D,CAAC,IAAoB,MAAyB,EAAS,MAAM,EAC7D,CAAC,GAAqB,MAA0B,EAAS,KAAK,EAC9D,CAAC,IAAoB,MAAyB,EAAS,GAAG;AAUhE,QACE,kBAAC,GAAD;EAAY,OAAM;EAAW,aAAY;YACvC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAa,MAAM,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;cAAE;IAKxB,CAAA,EACd,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBArBtB;OACX;QAAE,IAAI;QAAa,OAAO;QAAiB,MAAM,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;QAAE;OACpE;QAAE,IAAI;QAAiB,OAAO;QAAiB,MAAM,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;QAAE;OACzE;QAAE,IAAI;QAAY,OAAO;QAAY,MAAM,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;QAAE;OACjE;QAAE,IAAI;QAAW,OAAO;QAAW,MAAM,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;QAAE;OACjE;QAAE,IAAI;QAAc,OAAO;QAAc,MAAM,kBAAC,GAAD,EAAS,MAAM,IAAM,CAAA;QAAE;OACvE,CAgBmB,KAAK,MACT,kBAAC,UAAD;OAEE,eAAe,EAAa,EAAI,GAAG;OACnC,WAAW,EACT,mFACA,MAAc,EAAI,KACd,kDACA,kBACL;iBARH,CAUG,EAAI,MACL,kBAAC,QAAD;QAAM,WAAU;kBAAe,EAAI;QAAa,CAAA,CACzC;SAXF,EAAI,GAWF,CACT;MACU,CAAA,EACT,CAAA;KACH,CAAA,EAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,MAAc,eACb,kBAAA,GAAA,EAAA,UAAA;OACE,kBAAC,GAAD;QAAM,WAAU;QAAQ,MAAA;kBAAxB,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAW,iBAAyB,CAAA,EACpC,kBAAC,GAAD,EAAA,UAAiB,6CAA2D,CAAA,CACjE,EAAA,CAAA,EACb,kBAAC,GAAD;SAAa,WAAU;mBACpB,GAAW,KACT,MAQC,kBAAC,OAAD;UAEE,WAAU;oBAFZ,CAIE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,OAAD;YAAK,WAAU;sBACZ,EAAS,eACR,kBAAC,GAAD,EAAO,WAAU,wBAAyB,CAAA,GAE1C,kBAAC,GAAD,EAAK,WAAU,wBAAyB,CAAA;YAEtC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA;YACE,kBAAC,KAAD;aAAG,WAAU;uBAAe,EAAS;aAAS,CAAA;YAC9C,kBAAC,KAAD;aAAG,WAAU;uBAAb,CAA2C,UAAO,EAAS,KAAS;;YACnE,EAAS,gBACR,kBAAC,KAAD;aAAG,WAAU;uBAAqC;aAE9C,CAAA;YAEL,CAAC,EAAS,gBAAgB,EAAS,mBAClC,kBAAC,KAAD;aAAG,WAAU;uBAAqC;aAE9C,CAAA;YAEF,EAAA,CAAA,CACF;cACN,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACG,EAAS,gBAAgB,kBAAC,GAAD;aAAO,SAAQ;uBAAU;aAAmB,CAAA;YACtE,kBAAC,GAAD;aAAO,SAAS,EAAS,WAAW,YAAY;uBAC7C,EAAS,WAAW,WAAW;aAC1B,CAAA;YACR,kBAAC,GAAD;aACE,SAAQ;aACR,MAAK;aACL,eAAe;AASb,cARA,EAAqB,EAAS,GAAG,EACjC,EAAwB,EAAS,KAAK,aAAa,CAAC,EACpD,EAAU,GAAG,EACb,EAAgB,EAAS,gBAAgB,GAAG,EAC5C,EACE,EAAS,eAAe,gBAAgB,SACzC,EAED,SACG,eAAe,gBAAgB,EAC9B,eAAe,EAAE,UAAU,UAAU,CAAC;;uBAE7C;aAEQ,CAAA;YACL;aACF;YAnDC,EAAS,GAmDV,CAET;SACW,CAAA,CACT;;OAGP,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAW,cAAsB,CAAA,EACjC,kBAAC,GAAD,EAAA,UAAiB,2CAAyD,CAAA,CAC/D,EAAA,CAAA,EACb,kBAAC,GAAD;QAAa,WAAU;kBACpB,KAAa,EAAU,SAAS,IAC/B,EAAU,KACP,MAUK;SACJ,IAAM,IAAe,GAAW,MAC7B,MAAoC,EAAE,OAAO,EAAM,WACrD,EAAE;AACH,gBACE,kBAAC,OAAD;UAEE,WAAU;oBAFZ,CAIE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,OAAD;YAAK,WAAU;sBACb,kBAAC,GAAD,EAAO,WAAU,2BAA4B,CAAA;YACzC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA;YACE,kBAAC,KAAD;aAAG,WAAU;uBAAe,EAAM;aAAS,CAAA;YAC3C,kBAAC,KAAD;aAAG,WAAU;uBAAb,CACG,EAAM,SACN,KAAgB,MAAM,IACrB;;YACJ,kBAAC,OAAD;aAAK,WAAU;uBAAf;cACG,EAAM,iBAAiB,QACtB,kBAAC,QAAD,EAAA,UAAA;eAAM;gBACO,EAAM,gBAAgB,KAAM,QAAQ,EAAE;eAAC;eAC7C,EAAA,CAAA;cAER,EAAM,mBAAmB,QACxB,kBAAC,QAAD,EAAA,UAAA;eAAM;gBACO,EAAM,kBAAkB,KAAM,QAAQ,EAAE;eAAC;eAC/C,EAAA,CAAA;cAER,EAAM,uBAAuB,QAC5B,kBAAC,QAAD,EAAA,UAAA;eAAM;eAAE,EAAM;eAAoB;eAAY,EAAA,CAAA;cAE/C,EAAM,wBAAwB,QAC7B,kBAAC,QAAD,EAAA,UAAA;eAAM;eAAE,EAAM;eAAqB;eAAa,EAAA,CAAA;cAE9C;;YACF,EAAA,CAAA,CACF;cACN,kBAAC,GAAD;WAAO,SAAS,EAAM,WAAW,YAAY;qBAC1C,EAAM,WAAW,WAAW;WACvB,CAAA,CACJ;YApCC,EAAM,GAoCP;UAGX,GAED,kBAAC,KAAD;SAAG,WAAU;mBAA+C;SAExD,CAAA;QAEM,CAAA,CACT,EAAA,CAAA;OAEP,kBAAC,GAAD;QAAM,IAAG;kBAAT,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAY,IAAoB,oBAAoB,gBAA2B,CAAA,EAC/E,kBAAC,GAAD,EAAA,UACG,IACG,yCACA,gCACY,CAAA,CACP,EAAA,CAAA,EACb,kBAAC,GAAD;SAAa,WAAU;mBAAvB;UACE,kBAAC,GAAD;WAAW,OAAM;qBACf,kBAAC,UAAD;YACE,WAAU;YACV,OAAO;YACP,WAAW,MAAM,EAAwB,EAAE,OAAO,MAAM;sBAH1D;aAKE,kBAAC,UAAD;cAAQ,OAAM;wBAAS;cAAe,CAAA;aACtC,kBAAC,UAAD;cAAQ,OAAM;wBAAY;cAAkB,CAAA;aAC5C,kBAAC,UAAD;cAAQ,OAAM;wBAAS;cAAkB,CAAA;aACzC,kBAAC,UAAD;cAAQ,OAAM;wBAAe;cAAqB,CAAA;aAClD,kBAAC,UAAD;cAAQ,OAAM;wBAAc;cAAoB,CAAA;aAChD,kBAAC,UAAD;cAAQ,OAAM;wBAAS;cAAe,CAAA;aAC/B;;WACC,CAAA;UAGZ,kBAAC,GAAD;WAAW,OAAM;qBACf,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,SAAD;aACE,WAAW,EACT,+FACA,MAAqB,gBACjB,0CACA,+CACL;uBANH,CAQE,kBAAC,SAAD;cACE,MAAK;cACL,MAAK;cACL,OAAM;cACN,SAAS,MAAqB;cAC9B,gBAAgB,EAAoB,cAAc;cAClD,WAAU;cACV,CAAA,EACF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;cAAG,WAAU;wBAAsB;cAA4B,CAAA,EAC/D,kBAAC,KAAD;cAAG,WAAU;wBAA8B;cAEvC,CAAA,CACA,EAAA,CAAA,CACA;gBACR,kBAAC,SAAD;aACE,WAAW,EACT,+FACA,MAAqB,WACjB,0CACA,+CACL;uBANH,CAQE,kBAAC,SAAD;cACE,MAAK;cACL,MAAK;cACL,OAAM;cACN,SAAS,MAAqB;cAC9B,gBAAgB,EAAoB,SAAS;cAC7C,WAAU;cACV,CAAA,EACF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;cAAG,WAAU;wBAAsB;cAAiB,CAAA,EACpD,kBAAC,KAAD;cAAG,WAAU;wBAA8B;cAEvC,CAAA,CACA,EAAA,CAAA,CACA;eACJ;;WACI,CAAA;UAGX,MAAqB,iBACpB,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,OAAD;YAAK,WAAU;sBACb,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,6CAA8C,CAAA,EAC/D,kBAAC,OAAD;cAAK,WAAU;wBAAf;eACE,kBAAC,KAAD;gBAAG,WAAU;0BAAsB;gBAA0B,CAAA;eAC7D,kBAAC,KAAD;gBAAG,WAAU;0BAA8B;gBAIvC,CAAA;eACJ,kBAAC,OAAD;gBAAK,WAAU;0BACb,kBAAC,GAAD;iBACE,SAAQ;iBACR,MAAK;iBACL,eAAe;AACb,yBAAO,KAAK,6BAA6B,SAAS;;2BAJtD,CAOE,kBAAC,GAAD;kBAAc,MAAM;kBAAI,WAAU;kBAAW,CAAA,EAAA,oBAEtC;;gBACL,CAAA;eACF;gBACF;;YACF,CAAA,EACN,kBAAC,GAAD;YAAW,OAAM;sBACf,kBAAC,GAAD;aACE,aAAY;aACZ,OAAO;aACP,WAAW,MAAM,EAAgB,EAAE,OAAO,MAAM;aAChD,CAAA;YACQ,CAAA,CACR;;UAIP,MAAqB,YACpB,kBAAC,GAAD;WAAW,OAAM;qBACf,kBAAC,GAAD;YACE,MAAK;YACL,aAAY;YACZ,OAAO;YACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;YAC1C,CAAA;WACQ,CAAA;UAGd,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD;YACE,UAAU,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;YAC5B,WAAW;YACX,UAAU,MAAqB,WAAW,CAAC,IAAS,CAAC;YACrD,SAAS,YAAY;AACnB,iBAAI;cACF,IAAM,IACJ,EAAqB,OAAO,EAAE,CAAC,aAAa,GAC5C,EAAqB,MAAM,EAAE,EAKzB,IACJ,MAAqB,gBACjB,KAAA,IACA,IACE,EAAE,WAAQ,GACV,KAAA,GACF,IACJ,MAAqB,gBAAgB,IAAe,KAAA;AAwBtD,cAtBI,IACF,MAAM,EACJ;eACE,MAAM;eACN,MAAM,EAAe,EAAqB;eAC1C,cAAc;eACd;eACD,EACD,EACD,GAED,MAAM,EAAkB;eACtB,MAAM;eACN,MAAM,EAAe,EAAqB;eAC1C,cAAc;eACd;eACD,CAAC,EAGJ,EAAU,GAAG,EACb,EAAgB,GAAG,EACnB,EAAqB,KAAK,EAC1B,MAAM,GAAkB;cACxB,IAAM,IACJ,EAAqB,OAAO,EAAE,CAAC,aAAa,GAC5C,EAAqB,MAAM,EAAE;AAC/B,gBAAM,QACJ,IACI,GAAG,EAAc,kCACjB,GAAG,EAAc,8BACtB;sBACM,GAAc;cACrB,IAAM,IACJ,aAAe,QAAQ,EAAI,UAAU;AACvC,gBAAM,MAAM,EAAQ;;;sBAIvB,IAAoB,oBAAoB;YAClC,CAAA,EACR,KACC,kBAAC,GAAD;YACE,SAAQ;YACR,eAAe;AAKb,aAJA,EAAqB,KAAK,EAC1B,EAAU,GAAG,EACb,EAAgB,GAAG,EACnB,EAAoB,SAAS,EAC7B,EAAwB,SAAS;;sBAEpC;YAEQ,CAAA,CAEP;;UACM;WACT;;OAEP,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAW,aAAqB,CAAA,EAChC,kBAAC,GAAD,EAAA,UAAiB,qDAEC,CAAA,CACP,EAAA,CAAA,EACb,kBAAC,GAAD;QAAa,WAAU;kBAAvB;SACE,kBAAC,GAAD;UAAW,OAAM;oBACf,kBAAC,UAAD;WACE,WAAU;WACV,OAAO;WACP,WAAW,MAAM,GAAsB,EAAE,OAAO,MAAM;qBAHxD,CAKE,kBAAC,UAAD;YAAQ,OAAM;sBAAG;YAA6B,CAAA,EAC7C,GAAW,KAAK,MACf,kBAAC,UAAD;YAAmB,OAAO,EAAE;sBACzB,EAAE;YACI,EAFI,EAAE,GAEN,CACT,CACK;;UACC,CAAA;SACZ,kBAAC,GAAD;UAAW,OAAM;oBACf,kBAAC,GAAD;WACE,aAAY;WACZ,OAAO;WACP,WAAW,MAAM,EAAgB,EAAE,OAAO,MAAM;WAChD,CAAA;UACQ,CAAA;SACZ,kBAAC,GAAD;UAAW,OAAM;oBACf,kBAAC,GAAD;WACE,aAAY;WACZ,OAAO;WACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;WAC9C,CAAA;UACQ,CAAA;SACZ,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAW,OAAM;qBACf,kBAAC,GAAD;YACE,MAAK;YACL,OAAO;YACP,WAAW,MAAM,GAAyB,EAAE,OAAO,MAAM;YACzD,CAAA;WACQ,CAAA,EACZ,kBAAC,GAAD;WAAW,OAAM;qBACf,kBAAC,GAAD;YACE,MAAK;YACL,OAAO;YACP,WAAW,MAAM,GAAqB,EAAE,OAAO,MAAM;YACrD,CAAA;WACQ,CAAA,CACR;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAW,OAAM;qBACf,kBAAC,GAAD;YACE,MAAK;YACL,MAAK;YACL,OAAO;YACP,WAAW,MAAM,GAAsB,EAAE,OAAO,MAAM;YACtD,CAAA;WACQ,CAAA,EACZ,kBAAC,GAAD;WAAW,OAAM;qBACf,kBAAC,GAAD;YACE,MAAK;YACL,MAAK;YACL,OAAO;YACP,WAAW,MAAM,GAAuB,EAAE,OAAO,MAAM;YACvD,CAAA;WACQ,CAAA,CACR;;SACN,kBAAC,GAAD;UACE,UAAU,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;UAC5B,UAAU;UACV,SAAS,YAAY;AAEnB,aAAM,MAAM,qCAAqC;;oBAqBpD;UAEQ,CAAA;SACG;UACT,EAAA,CAAA;OACN,EAAA,CAAA;MAGJ,MAAc,mBACb,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAW,yBAAiC,CAAA,EAC5C,kBAAC,GAAD,EAAA,UAAiB,2CAAyD,CAAA,CAC/D,EAAA,CAAA,EACb,kBAAC,GAAD;OAAa,WAAU;iBACpB;QACC;SACE,OAAO;SACP,aAAa;SACd;QACD;SACE,OAAO;SACP,aAAa;SACd;QACD;SAAE,OAAO;SAAkB,aAAa;SAAkC;QAC1E;SACE,OAAO;SACP,aAAa;SACd;QACF,CAAC,KAAK,MACL,kBAAC,SAAD;QAEE,WAAU;kBAFZ,CAIE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAe,EAAK;SAAU,CAAA,EAC3C,kBAAC,KAAD;SAAG,WAAU;mBAA+B,EAAK;SAAgB,CAAA,CAC7D,EAAA,CAAA,EACN,kBAAC,SAAD;SAAO,MAAK;SAAW,WAAU;SAAkB,gBAAA;SAAiB,CAAA,CAC9D;UARD,EAAK,MAQJ,CACR;OACU,CAAA,CACT,EAAA,CAAA;MAGR,MAAc,cACb,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAW,qBAA6B,CAAA,EACxC,kBAAC,GAAD,EAAA,UAAiB,uCAAqD,CAAA,CAC3D,EAAA,CAAA,EACb,kBAAC,GAAD;OAAa,WAAU;iBAAvB;QACE,kBAAC,GAAD;SAAW,OAAM;mBACf,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAO,MAAK;WAAW,OAAM;WAAmB,UAAA;WAAW,CAAA,EAC3D,kBAAC,GAAD;WAAQ,SAAQ;qBAAU;WAAmB,CAAA,CACzC;;SACI,CAAA;QACZ,kBAAC,GAAD;SAAW,OAAM;mBACf,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAO,MAAK;WAAW,OAAM;WAAmB,UAAA;WAAW,CAAA,EAC3D,kBAAC,GAAD;WAAQ,SAAQ;qBAAU;WAAmB,CAAA,CACzC;;SACI,CAAA;QACZ,kBAAC,GAAD;SAAW,OAAM;mBACf,kBAAC,GAAD,EAAO,aAAY,uBAAwB,CAAA;SACjC,CAAA;QACA;SACT,EAAA,CAAA;MAGR,MAAc,aACb,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAW,oBAA4B,CAAA,EACvC,kBAAC,GAAD,EAAA,UAAiB,wCAAsD,CAAA,CAC5D,EAAA,CAAA,EACb,kBAAC,GAAD;OAAa,WAAU;iBAAvB,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAqB;WAAW,CAAA,EAC7C,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAiB,CAAA,CACxD;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAqB;WAAW,CAAA,EAC7C,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAiB,CAAA,CACxD;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAqB;WAAW,CAAA,EAC7C,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAmB,CAAA,CAC1D;;SACF;WACN,kBAAC,GAAD;QAAW,OAAM;kBACf,kBAAC,UAAD;SAAQ,WAAU;mBAAlB;UACE,kBAAC,UAAD;WAAQ,OAAM;qBAAK;WAAgB,CAAA;UACnC,kBAAC,UAAD;WAAQ,OAAM;qBAAK;WAAgB,CAAA;UACnC,kBAAC,UAAD;WAAQ,OAAM;qBAAM;WAAiB,CAAA;UACrC,kBAAC,UAAD;WAAQ,OAAM;qBAAM;WAAe,CAAA;UACnC,kBAAC,UAAD;WAAQ,OAAM;qBAAU;WAAgB,CAAA;UACjC;;QACC,CAAA,CACA;SACT,EAAA,CAAA;MAGR,MAAc,gBACb,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAW,uBAA+B,CAAA,EAC1C,kBAAC,GAAD,EAAA,UAAiB,+BAA6C,CAAA,CACnD,EAAA,CAAA,EACb,kBAAC,GAAD;OAAa,WAAU;iBAAvB;QACE,kBAAC,GAAD;SAAW,OAAM;mBACf,kBAAC,OAAD;UAAK,WAAU;oBACX;WAAC;WAAS;WAAQ;WAAS,CAAiB,KAAK,MACjD,kBAAC,SAAD;WAAmB,WAAU;qBAA7B,CACE,kBAAC,SAAD;YACE,MAAK;YACL,MAAK;YACL,OAAO;YACP,SAAS,OAAS;YAClB,gBAAgB,EAAQ,EAAM;YAC9B,WAAU;YACV,CAAA,EACF,kBAAC,QAAD;YAAM,WAAU;sBAAc;YAAa,CAAA,CACrC;aAVI,EAUJ,CACR;UACE,CAAA;SACI,CAAA;QACZ,kBAAC,GAAD;SAAW,OAAM;mBACf,kBAAC,OAAD;UAAK,WAAU;oBACZ;WAAC;WAAW;WAAW;WAAW;WAAW;WAAW;WAAU,CAAC,KACjE,MACC,kBAAC,UAAD;WAEE,WAAU;WACV,OAAO,EAAE,iBAAiB,GAAO;WACjC,EAHK,EAGL,CAEL;UACG,CAAA;SACI,CAAA;QACZ,kBAAC,GAAD;SAAW,OAAM;mBACf,kBAAC,UAAD;UAAQ,WAAU;oBAAlB;WACE,kBAAC,UAAD;YAAQ,OAAM;sBAAK;YAAc,CAAA;WACjC,kBAAC,UAAD;YAAQ,OAAM;sBAAK;YAAe,CAAA;WAClC,kBAAC,UAAD;YAAQ,OAAM;sBAAK;YAAc,CAAA;WAC1B;;SACC,CAAA;QACA;SACT,EAAA,CAAA;MAEL;OACF;MACF;;EACK,CAAA"}