windmill-components 1.613.5 → 1.623.1

package/package/components/debug/debugUtils.js

@@ -1,131 +0,0 @@
-/**
- * Shared debug utility functions used across ScriptEditor, FlowModuleComponent,
- * and RawAppInlineScriptEditor.
- */
-import { VariableService, UserService } from '../../gen';
-/**
- * Fetch contextual variables (WM_WORKSPACE, WM_TOKEN, etc.) for the debugger.
- * Creates a fresh short-lived token for the debug session.
- */
-export async function fetchContextualVariables(workspace) {
-    if (!workspace) {
-        return {};
-    }
-    try {
-        const variables = await VariableService.listContextualVariables({ workspace });
-        const envVars = {};
-        for (const v of variables) {
-            envVars[v.name] = v.value;
-        }
-        // Create a fresh token with 15-minute expiration for the debugger
-        try {
-            const expirationDate = new Date(Date.now() + 15 * 60 * 1000);
-            const freshToken = await UserService.createToken({
-                requestBody: {
-                    label: 'debugger-token',
-                    expiration: expirationDate.toISOString(),
-                    workspace_id: workspace
-                }
-            });
-            envVars['WM_TOKEN'] = freshToken;
-        }
-        catch (tokenError) {
-            console.error('Failed to create debugger token:', tokenError);
-        }
-        return envVars;
-    }
-    catch (error) {
-        console.error('Failed to fetch contextual variables:', error);
-        return {};
-    }
-}
-/**
- * Sign a debug request with the backend. This creates an audit log entry
- * and returns a signed token that authorizes the debug session.
- */
-export async function signDebugRequest(workspace, code, language) {
-    if (!workspace) {
-        throw new Error('No workspace selected');
-    }
-    const response = await fetch(`/api/w/${workspace}/debug/sign`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ code, language })
-    });
-    if (!response.ok) {
-        const errorText = await response.text();
-        if (errorText.includes('not initialized')) {
-            throw new Error('Debug signing is not configured on the server. Please contact your administrator.');
-        }
-        throw new Error(errorText || 'Failed to authorize debug session');
-    }
-    return await response.json();
-}
-/**
- * Get a user-friendly error message for debug errors
- */
-export function getDebugErrorMessage(error) {
-    const message = error instanceof Error ? error.message : String(error);
-    // Handle token verification errors from debugger
-    if (message.includes('Token verification failed') || message.includes('Debug token required')) {
-        if (message.includes('expired')) {
-            return 'Debug session expired. Please try again.';
-        }
-        if (message.includes('Invalid JWT signature')) {
-            return 'Debug authorization failed. The signing key may be misconfigured.';
-        }
-        if (message.includes('Code hash mismatch')) {
-            return 'Code was modified after signing. Please try again.';
-        }
-        if (message.includes('Public key not available')) {
-            return 'Debug server cannot verify tokens. Please check WINDMILL_BASE_URL configuration.';
-        }
-        if (message.includes('Debug token required')) {
-            return 'Debug authorization required. The debug session must be signed by the backend.';
-        }
-        return 'Debug authorization failed. Please try again.';
-    }
-    // Handle connection errors
-    if (message.includes('WebSocket') || message.includes('connection failed')) {
-        return 'Could not connect to debug server. Make sure the DAP server is running.';
-    }
-    // Handle HTTP errors
-    if (message.includes('401') || message.includes('Unauthorized')) {
-        return 'Debug session unauthorized. Please check your permissions.';
-    }
-    if (message.includes('404')) {
-        return 'Debug service not available. Please check if the debugger is enabled.';
-    }
-    if (message.includes('timeout') || message.includes('ETIMEDOUT')) {
-        return 'Debug service connection timed out. Please try again.';
-    }
-    // Handle signing errors
-    if (message.includes('not configured on the server')) {
-        return message;
-    }
-    return message || 'An unexpected error occurred while starting the debugger.';
-}
-/**
- * Check if a language supports debugging
- */
-export function isDebuggableLanguage(language) {
-    if (!language)
-        return false;
-    return ['python3', 'bun', 'typescript', 'deno', 'nativets'].includes(language);
-}
-/**
- * Get the file extension for a language (used for debug file path)
- */
-export function getDebugFileExtension(language) {
-    switch (language) {
-        case 'python3':
-            return '.py';
-        case 'bun':
-        case 'typescript':
-        case 'deno':
-        case 'nativets':
-            return '.ts';
-        default:
-            return '.txt';
-    }
-}

package/package/components/debug/index.d.ts

@@ -1,75 +0,0 @@
-/**
- * Debug module exports for Python and TypeScript debugging in Windmill.
- *
- * This module provides a minimal DAP (Debug Adapter Protocol) implementation
- * for debugging scripts in the Monaco editor.
- *
- * Supported Languages:
- * - Python: Uses debugpy via the unified DAP Debug Service
- * - TypeScript/Bun: Uses V8 Inspector Protocol via the unified DAP Debug Service
- *
- * Usage:
- * 1. Start the unified DAP Debug Service:
- *    bun run src/lib/debug/dap_debug_service.ts
- *
- * 2. Import and use MonacoDebugger component in your editor
- *
- * The service provides path-based routing:
- * - /python     - Python debugging via debugpy
- * - /typescript - TypeScript/Bun debugging via WebKit Inspector
- * - /bun        - Alias for /typescript
- *
- * Example:
- * ```svelte
- * <script>
- *   import MonacoDebugger from '../../debug/MonacoDebugger.svelte'
- *   let editor // Monaco editor instance
- *   let code = 'console.log("Hello")'
- * </script>
- *
- * <!-- Option 1: Use language prop (recommended) -->
- * <MonacoDebugger {editor} {code} language="bun" />
- *
- * <!-- Option 2: Explicit URL and path -->
- * <MonacoDebugger
- *   {editor}
- *   {code}
- *   dapServerUrl="ws://localhost:3003/typescript"
- *   filePath="/tmp/script.ts"
- * />
- * ```
- */
-export { default as MonacoDebugger } from './MonacoDebugger.svelte';
-export { default as DebugToolbar } from './DebugToolbar.svelte';
-export { default as DebugPanel } from './DebugPanel.svelte';
-export { default as DebugVariableViewer } from './DebugVariableViewer.svelte';
-export { default as DebugConsole } from './DebugConsole.svelte';
-export { DAPClient, getDAPClient, resetDAPClient, debugState, type DebugState, type Breakpoint, type StackFrame, type Variable, type Scope } from './dapClient';
-export { fetchContextualVariables, signDebugRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
-/**
- * Language to debug endpoint path mapping.
- * Uses the unified DAP Debug Service with path-based routing.
- */
-export declare const DAP_ENDPOINT_PATHS: {
-    readonly python3: "/python";
-    readonly bun: "/bun";
-    readonly typescript: "/typescript";
-    readonly nativets: "/typescript";
-    readonly deno: "/typescript";
-};
-/**
- * Supported debug languages
- */
-export type DebugLanguage = keyof typeof DAP_ENDPOINT_PATHS;
-/**
- * Get the WebSocket URL for the DAP debug server.
- * Routes through the reverse proxy at /ws_debug/* in production.
- *
- * @param language - The script language (python3, bun, typescript, etc.)
- * @returns The full WebSocket URL for the debug server
- */
-export declare function getDebugServerUrl(language: DebugLanguage): string;
-/**
- * @deprecated Use isDebuggableLanguage instead
- */
-export declare function isDebuggable(language: string): boolean;

package/package/components/debug/index.js

@@ -1,82 +0,0 @@
-/**
- * Debug module exports for Python and TypeScript debugging in Windmill.
- *
- * This module provides a minimal DAP (Debug Adapter Protocol) implementation
- * for debugging scripts in the Monaco editor.
- *
- * Supported Languages:
- * - Python: Uses debugpy via the unified DAP Debug Service
- * - TypeScript/Bun: Uses V8 Inspector Protocol via the unified DAP Debug Service
- *
- * Usage:
- * 1. Start the unified DAP Debug Service:
- *    bun run src/lib/debug/dap_debug_service.ts
- *
- * 2. Import and use MonacoDebugger component in your editor
- *
- * The service provides path-based routing:
- * - /python     - Python debugging via debugpy
- * - /typescript - TypeScript/Bun debugging via WebKit Inspector
- * - /bun        - Alias for /typescript
- *
- * Example:
- * ```svelte
- * <script>
- *   import MonacoDebugger from '../../debug/MonacoDebugger.svelte'
- *   let editor // Monaco editor instance
- *   let code = 'console.log("Hello")'
- * </script>
- *
- * <!-- Option 1: Use language prop (recommended) -->
- * <MonacoDebugger {editor} {code} language="bun" />
- *
- * <!-- Option 2: Explicit URL and path -->
- * <MonacoDebugger
- *   {editor}
- *   {code}
- *   dapServerUrl="ws://localhost:3003/typescript"
- *   filePath="/tmp/script.ts"
- * />
- * ```
- */
-export { default as MonacoDebugger } from './MonacoDebugger.svelte';
-export { default as DebugToolbar } from './DebugToolbar.svelte';
-export { default as DebugPanel } from './DebugPanel.svelte';
-export { default as DebugVariableViewer } from './DebugVariableViewer.svelte';
-export { default as DebugConsole } from './DebugConsole.svelte';
-export { DAPClient, getDAPClient, resetDAPClient, debugState } from './dapClient';
-// Re-export shared utilities
-export { fetchContextualVariables, signDebugRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
-/**
- * Language to debug endpoint path mapping.
- * Uses the unified DAP Debug Service with path-based routing.
- */
-export const DAP_ENDPOINT_PATHS = {
-    python3: '/python',
-    bun: '/bun',
-    typescript: '/typescript',
-    nativets: '/typescript',
-    deno: '/typescript'
-};
-/**
- * Get the WebSocket URL for the DAP debug server.
- * Routes through the reverse proxy at /ws_debug/* in production.
- *
- * @param language - The script language (python3, bun, typescript, etc.)
- * @returns The full WebSocket URL for the debug server
- */
-export function getDebugServerUrl(language) {
-    const path = DAP_ENDPOINT_PATHS[language] || DAP_ENDPOINT_PATHS.python3;
-    if (typeof window === 'undefined') {
-        // SSR fallback
-        return `ws://localhost:3003${path}`;
-    }
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    return `${wsProtocol}://${window.location.host}/ws_debug${path}`;
-}
-/**
- * @deprecated Use isDebuggableLanguage instead
- */
-export function isDebuggable(language) {
-    return ['python3', 'bun', 'typescript', 'deno', 'nativets'].includes(language);
-}

package/package/components/flows/content/FlowEditorDrawer.svelte

@@ -1,124 +0,0 @@
-<script lang="ts">import { Drawer, DrawerContent } from '../../common';
-import FlowBuilder from '../../FlowBuilder.svelte';
-import DiffDrawer from '../../DiffDrawer.svelte';
-import { FlowService } from '../../../gen';
-import { workspaceStore } from '../../../stores';
-import { ExternalLink, Loader2 } from 'lucide-svelte';
-import Button from '../../common/button/Button.svelte';
-import { emptySchema } from '../../../utils';
-import { createEventDispatcher } from 'svelte';
-import { fade } from 'svelte/transition';
-import { initFlow } from '../flowStore.svelte';
-let flowEditorDrawer = $state();
-const dispatch = createEventDispatcher();
-export async function openDrawer(path, cb) {
-    flowPath = path;
-    flow = undefined;
-    loading = true;
-    callback = cb;
-    flowEditorDrawer?.openDrawer?.();
-    try {
-        const flowWithDraft = await FlowService.getFlowByPathWithDraft({
-            workspace: $workspaceStore,
-            path
-        });
-        savedFlow = {
-            ...structuredClone(flowWithDraft),
-            draft: flowWithDraft.draft
-                ? {
-                    ...structuredClone(flowWithDraft.draft),
-                    path: flowWithDraft.draft.path ?? flowWithDraft.path
-                }
-                : undefined
-        };
-        // Use the draft if available, otherwise the deployed flow
-        flow = flowWithDraft.draft ?? flowWithDraft;
-        await initFlow(flow, flowStore, flowStateStore);
-        loading = false;
-    }
-    catch (error) {
-        console.error('Failed to load flow:', error);
-        loading = false;
-    }
-}
-let callback = undefined;
-let flowPath = $state('');
-let flow = $state(undefined);
-let savedFlow = $state(undefined);
-let loading = $state(true);
-const flowStore = $state({
-    val: {
-        summary: '',
-        value: { modules: [] },
-        path: '',
-        edited_at: '',
-        edited_by: '',
-        archived: false,
-        extra_perms: {},
-        schema: emptySchema()
-    }
-});
-const flowStateStore = $state({ val: {} });
-let diffDrawer = $state();
-</script>
-
-<Drawer bind:this={flowEditorDrawer} size="100%">
-	<DrawerContent
-		title="Flow Editor - {flowPath}"
-		noPadding
-		fullScreen
-		on:close={() => {
-			flowEditorDrawer?.closeDrawer()
-		}}
-	>
-		{#if loading}
-			<div
-				out:fade={{ duration: 200 }}
-				class="absolute inset-0 center-center flex-col bg-surface text-primary border"
-			>
-				<Loader2 class="animate-spin" size={16} />
-				<span class="text-xs mt-1">Loading flow...</span>
-			</div>
-		{:else if flow}
-			<FlowBuilder
-				{flowStore}
-				{flowStateStore}
-				initialPath={flowPath}
-				newFlow={false}
-				selectedId="settings-metadata"
-				loading={false}
-				bind:savedFlow
-				{diffDrawer}
-				customUi={{ topBar: { draft: false, extraDeployOptions: false } }}
-				onDeploy={() => {
-					callback?.()
-					dispatch('save')
-					flowEditorDrawer?.closeDrawer()
-				}}
-				onDetails={() => {
-					callback?.()
-					dispatch('save')
-					flowEditorDrawer?.closeDrawer()
-				}}
-			/>
-		{:else}
-			<div class="flex items-center justify-center h-full">
-				<span class="text-red-500">Failed to load flow</span>
-			</div>
-		{/if}
-		{#snippet actions()}
-			<Button
-				variant="default"
-				on:click={() => {
-					window.open(`/flows/edit/${flowPath}`, '_blank', 'noopener,noreferrer')
-					flowEditorDrawer?.closeDrawer()
-				}}
-				startIcon={{ icon: ExternalLink }}
-			>
-				Edit in new tab & close drawer
-			</Button>
-		{/snippet}
-	</DrawerContent>
-</Drawer>
-
-<DiffDrawer bind:this={diffDrawer} isFlow />

package/package/components/flows/content/FlowEditorDrawer.svelte.d.ts

@@ -1,22 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowEditorDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    save: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    openDrawer: (path: string, cb: () => void) => Promise<void>;
-}, "">;
-type FlowEditorDrawer = InstanceType<typeof FlowEditorDrawer>;
-export default FlowEditorDrawer;

package/package/components/flows/content/McpOAuthConnect.svelte

@@ -1,217 +0,0 @@
-<script lang="ts">import { workspaceStore } from '../../../stores';
-import { McpOauthService, OauthService, ResourceService, VariableService } from '../../../gen';
-import { Button } from '../../common';
-import Label from '../../Label.svelte';
-import Path from '../../Path.svelte';
-import { sendUserToast } from '../../../toast';
-import { sameTopDomainOrigin } from '../../../cookies';
-import { onDestroy } from 'svelte';
-let { onConnected, onCancel } = $props();
-let serverUrl = $state('');
-let discoveryResult = $state(null);
-let selectedScopes = $state([]);
-let resourceName = $state('');
-let resourcePath = $state('');
-let pathError = $state('');
-let status = $state('idle');
-let error = $state(null);
-async function discoverOAuth() {
-    status = 'discovering';
-    error = null;
-    try {
-        discoveryResult = await McpOauthService.discoverMcpOauth({
-            requestBody: { mcp_server_url: serverUrl }
-        });
-        selectedScopes = discoveryResult?.scopes_supported ?? [];
-        try {
-            const urlObj = new URL(serverUrl);
-            resourceName = urlObj.hostname.replace(/\./g, '_');
-        }
-        catch {
-            resourceName = 'mcp_server';
-        }
-        status = 'discovered';
-    }
-    catch (e) {
-        console.error('Error discovering OAuth settings', e);
-        const errorMessage = e.body?.message || e.body || e.message || 'Unknown error';
-        error = `Failed to discover OAuth settings: ${errorMessage}`;
-        status = 'idle';
-    }
-}
-function startOAuth() {
-    const url = new URL(`/api/mcp/oauth/start`, window.location.origin);
-    url.searchParams.set('mcp_server_url', serverUrl);
-    url.searchParams.set('scopes', selectedScopes.join(','));
-    const popup = window.open(url.toString(), '_blank', 'popup=true');
-    if (!popup) {
-        error = 'Popup blocked. Please allow popups for this site.';
-        return;
-    }
-    window.addEventListener('message', handleOAuthMessage);
-    window.addEventListener('storage', handleStorageEvent);
-    status = 'connecting';
-}
-function handleOAuthMessage(event) {
-    if (!sameTopDomainOrigin(event.origin, window.location.origin))
-        return;
-    if (event.data.type === 'MCP_CONNECTED') {
-        cleanup();
-        createMcpResource(event.data);
-    }
-    else if (event.data.type === 'MCP_ERROR') {
-        cleanup();
-        error = event.data.error;
-        status = 'discovered';
-    }
-}
-function handleStorageEvent(event) {
-    if (event.key === 'mcp-oauth-callback') {
-        cleanup();
-        try {
-            const data = JSON.parse(event.newValue || '{}');
-            localStorage.removeItem('mcp-oauth-callback');
-            if (data.type === 'MCP_CONNECTED') {
-                createMcpResource(data);
-            }
-        }
-        catch (e) {
-            console.error('Error parsing MCP OAuth callback', e);
-        }
-    }
-}
-function cleanup() {
-    window.removeEventListener('message', handleOAuthMessage);
-    window.removeEventListener('storage', handleStorageEvent);
-}
-async function createMcpResource(data) {
-    try {
-        let accountId;
-        if (data.expires_in && data.refresh_token) {
-            const accountIdStr = await OauthService.createAccount({
-                workspace: $workspaceStore,
-                requestBody: {
-                    refresh_token: data.refresh_token,
-                    expires_in: data.expires_in,
-                    client: 'mcp',
-                    mcp_server_url: data.mcp_server_url
-                }
-            });
-            accountId = Number(accountIdStr);
-        }
-        await VariableService.createVariable({
-            workspace: $workspaceStore,
-            requestBody: {
-                path: resourcePath,
-                value: data.access_token,
-                is_secret: true,
-                is_oauth: true,
-                account: accountId,
-                description: `MCP OAuth token for ${data.mcp_server_url}`
-            }
-        });
-        await ResourceService.createResource({
-            workspace: $workspaceStore,
-            requestBody: {
-                resource_type: 'mcp',
-                path: resourcePath,
-                value: {
-                    name: resourceName,
-                    url: data.mcp_server_url,
-                    token: `$var:${resourcePath}`
-                },
-                description: `MCP server connected via OAuth`
-            }
-        });
-        sendUserToast('Connected to MCP server');
-        onConnected(resourcePath, resourceName);
-    }
-    catch (e) {
-        error = e.body?.message || e.message || 'Failed to create resource';
-        status = 'discovered';
-    }
-}
-onDestroy(cleanup);
-</script>
-
-<div class="border rounded p-4 bg-surface-secondary flex flex-col gap-4">
-	<div class="flex justify-between items-center">
-		<span class="font-semibold text-sm">Connect MCP Server with OAuth</span>
-		<Button size="xs" color="light" onClick={onCancel}>Cancel</Button>
-	</div>
-
-	<Label label="MCP Server URL">
-		<input
-			type="url"
-			bind:value={serverUrl}
-			placeholder="https://mcp.example.com"
-			class="text-sm w-full"
-			disabled={status === 'connecting'}
-		/>
-	</Label>
-
-	{#if status === 'idle'}
-		<Button size="sm" onClick={discoverOAuth} disabled={!serverUrl}>Discover OAuth Settings</Button>
-	{:else if status === 'discovering'}
-		<div class="text-sm text-secondary">Discovering OAuth settings...</div>
-	{:else if status === 'discovered' && discoveryResult}
-		<div class="text-xs text-green-600 dark:text-green-400">
-			&#10003; OAuth supported
-			{#if discoveryResult.supports_dynamic_registration}
-				(Dynamic Client Registration available)
-			{/if}
-		</div>
-
-		{#if discoveryResult.scopes_supported && discoveryResult.scopes_supported.length > 0}
-			<Label label="Select Scopes">
-				<div class="flex flex-col flex-wrap gap-2">
-					{#each discoveryResult.scopes_supported as scope}
-						<label class="flex flex-row items-center gap-2 text-xs cursor-pointer">
-							<input
-								type="checkbox"
-								checked={selectedScopes.includes(scope)}
-								onchange={(e) => {
-									const target = e.target as HTMLInputElement
-									if (target.checked) {
-										selectedScopes = [...selectedScopes, scope]
-									} else {
-										selectedScopes = selectedScopes.filter((s) => s !== scope)
-									}
-								}}
-								class="!w-4 !h-4"
-							/>
-							{scope}
-						</label>
-					{/each}
-				</div>
-			</Label>
-		{/if}
-
-		<Label label="Resource Name">
-			<input
-				type="text"
-				bind:value={resourceName}
-				placeholder="my-mcp-server"
-				class="text-sm w-full"
-			/>
-		</Label>
-
-		<Path
-			bind:path={resourcePath}
-			bind:error={pathError}
-			initialPath=""
-			namePlaceholder={resourceName}
-			kind="resource"
-		/>
-
-		<Button size="sm" onClick={startOAuth} disabled={!resourcePath || pathError !== ''}>
-			Connect with OAuth
-		</Button>
-	{:else if status === 'connecting'}
-		<div class="text-sm text-secondary">Complete authentication in popup window...</div>
-	{/if}
-
-	{#if error}
-		<div class="text-xs text-red-600 dark:text-red-400">{error}</div>
-	{/if}
-</div>

package/package/components/flows/content/McpOAuthConnect.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    onConnected: (resourcePath: string, resourceName: string) => void;
-    onCancel: () => void;
-}
-declare const McpOAuthConnect: import("svelte").Component<Props, {}, "">;
-type McpOAuthConnect = ReturnType<typeof McpOAuthConnect>;
-export default McpOAuthConnect;

package/package/components/icons/HtmlIcon.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">"use strict";
-let { height = '24px', width = '24px', size = undefined } = $props();
-const derivedWidth = $derived(size ? size : width);
-const derivedHeight = $derived(size ? size : height);
-</script>
-
-<svg
-	width={derivedWidth}
-	height={derivedHeight}
-	viewBox="0 0 32 32"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#E44D26" />
-	<path d="M26 5H16V29.5L24 27L26 5Z" fill="#F16529" />
-	<path
-		d="M9.5 17.5L8.5 8H24L23.5 11H11.5L12 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5H9.5Z"
-		fill="white"
-	/>
-</svg>

package/package/components/icons/HtmlIcon.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    height?: string;
-    width?: string;
-    size?: number;
-}
-declare const HtmlIcon: import("svelte").Component<Props, {}, "">;
-type HtmlIcon = ReturnType<typeof HtmlIcon>;
-export default HtmlIcon;