budibase/packages/builder/src/common/ErrorsBox.svelte

<script>
  export let errors = []

  $: hasErrors = errors.length > 0
</script>

{#if hasErrors}
  <div class="error-container">
    {#each errors as error}
      <div class="error-row">
        {error.field ? `${error.field}: ` : ''}{error.error}
      </div>
    {/each}
  </div>
{/if}

<style>
  .error-container {
    padding: 10px;
    border-style: solid;
    border-color: var(--deletion100);
    border-radius: var(--borderradiusall);
    background: var(--deletion75);
  }

  .error-row {
    padding: 5px 0px;
  }
</style>