1  <script lang="ts">
 2    interface Props {
 3      center?: boolean;
 4      children?: import('svelte').Snippet;
 5      left_actions?: import('svelte').Snippet;
 6      actions?: import('svelte').Snippet;
 7    }
 8  
 9    let { center = false, children, left_actions, actions }: Props = $props();
10  </script>
11  
12  <div class="step-layout" class:center>
13    <div class="content">
14      {@render children?.()}
15    </div>
16    {#if left_actions || actions}
17      <footer class="flex justify-between gap-4">
18        <div class="flex gap-2">
19          {@render left_actions?.()}
20        </div>
21        <div class="flex gap-2">
22          {@render actions?.()}
23        </div>
24      </footer>
25    {/if}
26  </div>
27  
28  <style>
29    .step-layout {
30      display: flex;
31      flex-direction: column;
32      gap: 2rem;
33    }
34    .content {
35      display: flex;
36      flex-direction: column;
37      width: 100%;
38      gap: 1.5rem;
39    }
40  
41    .center > .content {
42      align-items: center;
43      text-align: center;
44    }
45  </style>