component ToastNotifications {
  outputs {
    add(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
    dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    clear(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    action(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
    size: string = "default"
    color: string = "primary"
    title: string = "Toast Notifications"
    description: string = ""
    items: unknown[] = []
    variant: string = "default"
    class: string = ""
  }
  view {
    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--toast-notifications wire-next--variant-{variant} {class}">
      {#if title}<strong>{title}</strong>{/if}
      {#if description}<p>{description}</p>{/if}
      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
      <slot />
    </section>
  }
}