Block
Disabled
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="disabled">
  <Typography>Disabled</Typography>
</Block>
block1
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="block1">
  <Typography>block1</Typography>
</Block>
block2
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="block2">
  <Typography>block2</Typography>
</Block>
block3
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="block3">
  <Typography>block3</Typography>
</Block>
popup
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="popup">
  <Typography>popup</Typography>
</Block>
add
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="add">
  <Typography>add</Typography>
</Block>
alert
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="alert">
  <Typography>alert</Typography>
</Block>
selected
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="selected">
  <Typography>selected</Typography>
</Block>
dark
<script>
  import Block from "svelte-atoms/Block.svelte";
  import Typography from "svelte-atoms/Typography.svelte";
</script>

<Block type="dark">
  <Typography type="white">dark</Typography>
</Block>