gradio

1
<script lang="ts">
2
	import { default as Info } from "./Info.svelte";
3
	export let show_label = true;
4
	export let info: string | undefined = undefined;
5
</script>
6

7
<span
8
	class:sr-only={!show_label}
9
	class:hide={!show_label}
10
	class:has-info={info != null}
11
	data-testid="block-info"
12
>
13
	<slot />
14
</span>
15
{#if info}
16
	<Info>{info}</Info>
17
{/if}
18

19
<style>
20
	span.has-info {
21
		margin-bottom: var(--spacing-xs);
22
	}
23
	span:not(.has-info) {
24
		margin-bottom: var(--spacing-lg);
25
	}
26
	span {
27
		display: inline-block;
28
		position: relative;
29
		z-index: var(--layer-4);
30
		border: solid var(--block-title-border-width)
31
			var(--block-title-border-color);
32
		border-radius: var(--block-title-radius);
33
		background: var(--block-title-background-fill);
34
		padding: var(--block-title-padding);
35
		color: var(--block-title-text-color);
36
		font-weight: var(--block-title-text-weight);
37
		font-size: var(--block-title-text-size);
38
		line-height: var(--line-sm);
39
	}
40

41
	.hide {
42
		margin: 0;
43
		height: 0;
44
	}
45
</style>
46