@privyid/persona 0.3.0

package/README.md

@@ -0,0 +1,12 @@
+# @privyid/persona
+
+> Persona core package
+
+Learn more about this package: https://privy-open-source.github.io/design-system/
+
+## Contributing
+
+### Local Development
+
+- Run `npm run dev:prepare` to generate type stubs.
+- Use `npm run dev` to start [playground](./playground) in development mode.

package/dist/components/app/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="app">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss">
+/**
+* Global Styling
+*
+*
+ */
+.app {
+  /**
+  * Hyperlink
+  */
+  a {
+    @apply underline text-primary-100 hover:text-primary-hovered;
+  }
+
+  /**
+  * Caption
+  */
+  caption {
+    @apply text-xs text-subtext-100;
+  }
+
+}
+</style>

package/dist/components/avatar/Avatar.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    data-testid="avatar"
+    :class="classNames">
+    <slot>
+      <img
+        data-testid="avatar-image"
+        class="avatar__image"
+        :class="imgClass"
+        :data-type="type"
+        :src="imageSrc"
+        alt="Avatar Image">
+    </slot>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  ref,
+  watch
+} from "vue-demi";
+import {
+  createAlias,
+  createSpinner,
+  dummyAvatar
+} from "./utils/create-image";
+import loadImage from "./utils/load-image";
+export default defineComponent({
+  props: {
+    variant: {
+      type: String,
+      default: void 0
+    },
+    src: {
+      type: String,
+      default: void 0
+    },
+    fallbackSrc: {
+      type: String,
+      default: dummyAvatar()
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    imgClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
+    }
+  },
+  emits: ["imgloaded", "imgerror"],
+  setup(props, { emit }) {
+    const imageSrc = ref(createSpinner(50));
+    const classNames = computed(() => {
+      const result = ["avatar"];
+      if (props.size)
+        result.push(`avatar--${props.size}`);
+      return result;
+    });
+    const type = computed(() => {
+      if (props.variant)
+        return props.variant;
+      if (!props.src && props.name)
+        return "alias";
+      return "image";
+    });
+    function init() {
+      if (type.value === "alias")
+        loadAlias();
+      else
+        load();
+    }
+    function load() {
+      imageSrc.value = createSpinner(50);
+      loadImage(props.src).then(() => {
+        imageSrc.value = props.src;
+        emit("imgloaded", props.src);
+      }).catch((error) => {
+        imageSrc.value = props.fallbackSrc;
+        emit("imgerror", error);
+      });
+    }
+    function loadAlias() {
+      imageSrc.value = createAlias(props.name);
+    }
+    watch(() => [
+      props.src,
+      props.name,
+      props.variant
+    ], () => {
+      init();
+    });
+    onMounted(() => {
+      init();
+    });
+    return {
+      classNames,
+      type,
+      imageSrc
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.avatar {
+  @apply rounded-full inline-flex items-center justify-center overflow-hidden bg-primary-5;
+
+  &__image {
+    @apply w-full h-full object-cover;
+  }
+
+  &--xs {
+    @apply w-6 h-6;
+  }
+
+  &--sm {
+    @apply w-8 h-8;
+  }
+
+  &--md {
+    @apply w-10 h-10;
+  }
+
+  &--lg {
+    @apply w-14 h-14;
+  }
+
+  &--xl {
+    @apply w-24 h-24;
+  }
+}
+</style>

package/dist/components/avatar/Avatar.vue.d.ts

@@ -0,0 +1,69 @@
+import { PropType } from 'vue-demi';
+declare type TypeVariant = 'image' | 'alias';
+declare type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare const _default: import("vue-demi").DefineComponent<{
+    variant: {
+        type: PropType<TypeVariant>;
+        default: any;
+    };
+    src: {
+        type: StringConstructor;
+        default: any;
+    };
+    fallbackSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: any;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    imgClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: any;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    type: import("vue-demi").ComputedRef<TypeVariant>;
+    imageSrc: import("vue-demi").Ref<string>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("imgloaded" | "imgerror")[], "imgloaded" | "imgerror", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    variant: {
+        type: PropType<TypeVariant>;
+        default: any;
+    };
+    src: {
+        type: StringConstructor;
+        default: any;
+    };
+    fallbackSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: any;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    imgClass: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+        default: any;
+    };
+}>> & {
+    onImgloaded?: (...args: any[]) => any;
+    onImgerror?: (...args: any[]) => any;
+}, {
+    src: string;
+    name: string;
+    variant: TypeVariant;
+    fallbackSrc: string;
+    size: SizeVariant;
+    imgClass: string | unknown[] | Record<string, any>;
+}>;
+export default _default;

package/dist/components/avatar/utils/color-hash.d.ts

@@ -0,0 +1,2 @@
+export declare function colorHash(text: string): [string, string];
+export declare function colorRandom(): [string, string];

package/dist/components/avatar/utils/color-hash.mjs

@@ -0,0 +1,22 @@
+const COLOR_SEED = [
+  ["#F2F7FD", "#0065D1"],
+  ["#F8F8F8", "#737373"],
+  ["#F4FBF6", "#23B242"],
+  ["#F2FBFC", "#02AEC5"],
+  ["#FFFBF4", "#F5A623"],
+  ["#FEF5F4", "#E42E2C"],
+  ["#FBFAF2", "#B79A00"],
+  ["#FEFDF4", "#EFD52C"],
+  ["#FAFEF5", "#A3E635"],
+  ["#F3FBFA", "#12B89C"],
+  ["#F7F2FD", "#5E00D1"]
+];
+export function colorHash(text) {
+  let hash = 0;
+  for (let index = 0; index < text.length; ++index)
+    hash = (hash << 5) - hash + text.charCodeAt(index) | 0;
+  return COLOR_SEED.at(Math.abs(hash) % COLOR_SEED.length);
+}
+export function colorRandom() {
+  return COLOR_SEED.at(Math.floor(Math.random() * COLOR_SEED.length));
+}

package/dist/components/avatar/utils/create-image.d.ts

@@ -0,0 +1,5 @@
+export declare function createText(text: string, size: number, bgColor: string, textColor: string): string;
+export declare function createSpinner(width?: number, height?: number): string;
+export declare function getAlias(name: string): string;
+export declare function createAlias(name?: string, size?: number): string;
+export declare function dummyAvatar(): string;

package/dist/components/avatar/utils/create-image.mjs

@@ -0,0 +1,19 @@
+import avatarImg from "../assets/avatar.png";
+import { colorHash, colorRandom } from "./color-hash.mjs";
+export function createText(text, size, bgColor, textColor) {
+  return `data:image/svg+xml,<svg height="${size}" width="${size}" xmlns="http://www.w3.org/2000/svg"><rect fill="${encodeURIComponent(bgColor)}" x="0" y="0" height="${size}" width="${size}"></rect><text fill="${encodeURIComponent(textColor)}" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="sans-serif" font-weight="600">${encodeURIComponent(text)}</text></svg>`;
+}
+export function createSpinner(width = 50, height = width) {
+  return `data:image/svg+xml,<svg class="lds-spinner" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(30 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(60 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(90 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(150 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(180 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(210 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(270 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(300 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(330 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>`;
+}
+export function getAlias(name) {
+  return name.split(" ").slice(0, 2).map((c) => c.at(0)).join("").toUpperCase();
+}
+export function createAlias(name, size = 50) {
+  const alias = name ? getAlias(name) : "\uFF65\u1D17\uFF65";
+  const [bgColor, textColor] = name ? colorHash(name) : colorRandom();
+  return createText(alias, size, bgColor, textColor);
+}
+export function dummyAvatar() {
+  return avatarImg;
+}

package/dist/components/avatar/utils/load-image.d.ts

@@ -0,0 +1 @@
+export default function loadImage(url?: string | null): Promise<HTMLImageElement>;

package/dist/components/avatar/utils/load-image.mjs

@@ -0,0 +1,22 @@
+export default function loadImage(url) {
+  if (!url)
+    return Promise.reject(new Error("ERR_INVALID_IMAGE_SRC"));
+  return new Promise((resolve, reject) => {
+    const image = new globalThis.Image();
+    const onLoad = () => {
+      onFinish();
+      resolve(image);
+    };
+    const onError = () => {
+      onFinish();
+      reject(new Error("ERR_FAILED_LOAD_IMAGE"));
+    };
+    const onFinish = () => {
+      image.removeEventListener("load", onLoad);
+      image.removeEventListener("error", onError);
+    };
+    image.addEventListener("load", onLoad);
+    image.addEventListener("error", onError);
+    image.src = url;
+  });
+}

package/dist/components/badge/Badge.vue

@@ -0,0 +1,185 @@
+<template>
+  <span
+    data-testid="badge"
+    :class="classNames">
+    <slot />
+  </span>
+</template>
+
+<script>
+import {
+  defineComponent,
+  computed
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    color: {
+      type: String,
+      default: "primary"
+    },
+    variant: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = ["badge"];
+      if (props.color)
+        result.push(`badge--${props.color}`);
+      if (props.variant)
+        result.push(`badge--${props.variant}`);
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Badge
+* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=278%3A3456
+* Date Created  : May 30, 2022
+* Last Update   : May 31, 2022
+*/
+.badge {
+  /**
+  * Set global style
+  * of badge
+  */
+  @apply inline-block font-bold text-xs px-2 py-0.5 text-white rounded-full;
+
+  /**
+  * Provide colors variant
+  * 7 colors variant available
+  * primary, secondary, success
+  * info, warning, danger, & gold
+  */
+  &--default {
+    &.badge {
+      &--primary {
+        @apply bg-primary-100;
+      }
+
+      &--secondary {
+        @apply bg-secondary-100;
+      }
+
+      &--success {
+        @apply bg-success-100;
+      }
+
+      &--info {
+        @apply bg-info-100;
+      }
+
+      &--warning {
+        @apply bg-warning-100;
+      }
+
+      &--danger {
+        @apply bg-danger-100;
+      }
+
+      &--gold {
+        @apply bg-gold-100;
+      }
+    }
+  }
+
+  /**
+  * Set color of Badge
+  * in light and inverse variant
+  */
+  &--light,
+  &--inverse {
+    &.badge {
+      &--primary {
+        @apply text-primary-100;
+      }
+
+      &--secondary {
+        @apply text-body-75;
+      }
+
+      &--success {
+        @apply text-success-100;
+      }
+
+      &--info {
+        @apply text-info-100;
+      }
+
+      &--warning {
+        @apply text-warning-100;
+      }
+
+      &--danger {
+        @apply text-danger-100;
+      }
+
+      &--gold {
+        @apply text-gold-100;
+      }
+    }
+  }
+
+  /**
+  * Set background
+  * in light variant
+  */
+  &--light {
+    &.badge {
+      &--primary {
+        @apply bg-primary-5;
+      }
+
+      &--secondary {
+        @apply bg-secondary-5;
+      }
+
+      &--success {
+        @apply bg-success-5;
+      }
+
+      &--info {
+        @apply bg-info-5;
+      }
+
+      &--warning {
+        @apply bg-warning-5;
+      }
+
+      &--danger {
+        @apply bg-danger-5;
+      }
+
+      &--gold {
+        @apply bg-gold-5;
+      }
+    }
+  }
+
+  /**
+  * Remove background
+  * in inverse and dot variant
+  */
+  &--inverse,
+  &--dot {
+    @apply bg-transparent;
+  }
+
+  /**
+  * Reset box-model of
+  * dot variant
+  */
+  &--dot {
+    @apply p-0 m-0 tracking-[0];
+
+    .dot {
+      @apply align-middle;
+    }
+  }
+}
+</style>

package/dist/components/badge/Badge.vue.d.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue-demi';
+declare type ColorVariant = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'gold';
+declare type StyleVariant = 'default' | 'light' | 'inverse';
+declare const _default: import("vue-demi").DefineComponent<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>>, {
+    variant: StyleVariant;
+    color: ColorVariant;
+}>;
+export default _default;

package/dist/components/badge/assets/images/img-guide-badge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" fill="none" viewBox="0 0 96 96"><g clip-path="url(#clip0_101_5004)"><rect width="96" height="96" fill="#464C59"/><path fill="#fff" d="M24 48C24 36.9543 32.9543 28 44 28H83C94.0457 28 103 36.9543 103 48C103 59.0457 94.0457 68 83 68H44C32.9543 68 24 59.0457 24 48Z"/><path fill="#0065D1" d="M47.368 56.288C46.2 56.288 45.216 56.064 44.416 55.616C43.616 55.152 42.992 54.552 42.544 53.816C42.096 53.08 41.832 52.288 41.752 51.44H44.608C44.736 52.176 45.04 52.744 45.52 53.144C46.016 53.544 46.64 53.744 47.392 53.744C48.464 53.744 49.328 53.256 49.984 52.28C50.64 51.288 50.992 49.784 51.04 47.768C50.656 48.424 50.072 48.968 49.288 49.4C48.52 49.832 47.672 50.048 46.744 50.048C45.816 50.048 44.944 49.824 44.128 49.376C43.312 48.928 42.648 48.296 42.136 47.48C41.624 46.664 41.368 45.704 41.368 44.6C41.368 43.592 41.616 42.656 42.112 41.792C42.608 40.928 43.296 40.232 44.176 39.704C45.056 39.176 46.088 38.912 47.272 38.912C48.536 38.912 49.6 39.144 50.464 39.608C51.328 40.072 52.016 40.696 52.528 41.48C53.056 42.264 53.432 43.136 53.656 44.096C53.896 45.056 54.016 46.04 54.016 47.048C54.016 48.92 53.752 50.552 53.224 51.944C52.712 53.32 51.952 54.392 50.944 55.16C49.952 55.912 48.76 56.288 47.368 56.288ZM47.464 47.456C48.056 47.456 48.592 47.328 49.072 47.072C49.552 46.8 49.928 46.448 50.2 46.016C50.472 45.568 50.608 45.072 50.608 44.528C50.608 43.664 50.304 42.952 49.696 42.392C49.104 41.832 48.352 41.552 47.44 41.552C46.544 41.552 45.8 41.832 45.208 42.392C44.616 42.936 44.32 43.632 44.32 44.48C44.32 45.376 44.616 46.096 45.208 46.64C45.8 47.184 46.552 47.456 47.464 47.456ZM63.3789 56.288C62.2109 56.288 61.2269 56.064 60.4269 55.616C59.6269 55.152 59.0029 54.552 58.5549 53.816C58.1069 53.08 57.8429 52.288 57.7629 51.44H60.6189C60.7469 52.176 61.0509 52.744 61.5309 53.144C62.0269 53.544 62.6509 53.744 63.4029 53.744C64.4749 53.744 65.3389 53.256 65.9949 52.28C66.6509 51.288 67.0029 49.784 67.0509 47.768C66.6669 48.424 66.0829 48.968 65.2989 49.4C64.5309 49.832 63.6829 50.048 62.7549 50.048C61.8269 50.048 60.9549 49.824 60.1389 49.376C59.3229 48.928 58.6589 48.296 58.1469 47.48C57.6349 46.664 57.3789 45.704 57.3789 44.6C57.3789 43.592 57.6269 42.656 58.1229 41.792C58.6189 40.928 59.3069 40.232 60.1869 39.704C61.0669 39.176 62.0989 38.912 63.2829 38.912C64.5469 38.912 65.6109 39.144 66.4749 39.608C67.3389 40.072 68.0269 40.696 68.5389 41.48C69.0669 42.264 69.4429 43.136 69.6669 44.096C69.9069 45.056 70.0269 46.04 70.0269 47.048C70.0269 48.92 69.7629 50.552 69.2349 51.944C68.7229 53.32 67.9629 54.392 66.9549 55.16C65.9629 55.912 64.7709 56.288 63.3789 56.288ZM63.4749 47.456C64.0669 47.456 64.6029 47.328 65.0829 47.072C65.5629 46.8 65.9389 46.448 66.2109 46.016C66.4829 45.568 66.6189 45.072 66.6189 44.528C66.6189 43.664 66.3149 42.952 65.7069 42.392C65.1149 41.832 64.3629 41.552 63.4509 41.552C62.5549 41.552 61.8109 41.832 61.2189 42.392C60.6269 42.936 60.3309 43.632 60.3309 44.48C60.3309 45.376 60.6269 46.096 61.2189 46.64C61.8109 47.184 62.5629 47.456 63.4749 47.456ZM73.3659 50.336V47.768H77.8779V43.616H80.4939V47.768H84.9819V50.336H80.4939V54.488H77.8779V50.336H73.3659Z"/></g><defs><clipPath id="clip0_101_5004"><rect width="96" height="96" fill="#fff"/></clipPath></defs></svg>

package/dist/components/banner/Banner.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    v-if="show"
+    data-testid="banner"
+    :class="classNames">
+    <div class="banner__icon">
+      <component
+        :is="icon"
+        v-if="icon" />
+    </div>
+    <div class="banner__body">
+      <slot :close="close" />
+    </div>
+    <div
+      v-if="dismissable"
+      data-testid="banner-close"
+      class="banner__close"
+      @click="close()">
+      <IconClose />
+    </div>
+  </div>
+</template>
+
+<script>
+import IconInfo from "@carbon/icons-vue/lib/information--filled/20";
+import IconDanger from "@carbon/icons-vue/lib/warning--filled/20";
+import IconClose from "@carbon/icons-vue/lib/close/16";
+import {
+  defineComponent,
+  ref,
+  computed
+} from "vue-demi";
+const BannerIcons = {
+  danger: IconDanger,
+  info: IconInfo
+};
+export default defineComponent({
+  components: {
+    IconInfo,
+    IconClose,
+    IconDanger
+  },
+  props: {
+    variant: {
+      type: String,
+      default: "info"
+    },
+    dismissable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["dismissed"],
+  setup(props, { emit }) {
+    const show = ref(true);
+    const classNames = computed(() => {
+      const result = ["banner"];
+      if (props.variant)
+        result.push(`banner--${props.variant}`);
+      return result;
+    });
+    const icon = computed(() => {
+      return BannerIcons[props.variant];
+    });
+    function close() {
+      show.value = false;
+      emit("dismissed");
+    }
+    return {
+      classNames,
+      show,
+      icon,
+      close
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.banner {
+  @apply p-4 flex gap-2 rounded text-body-100;
+
+  &--info {
+    @apply bg-background-100;
+
+    .banner__icon {
+      @apply text-primary-100;
+    }
+  }
+
+  &--danger {
+    @apply bg-danger-5;
+
+    .banner__icon {
+      @apply text-danger-100;
+    }
+  }
+
+  &__body {
+    @apply flex-grow;
+  }
+
+  &__icon,
+  &__close {
+    @apply flex-shrink-0;
+  }
+
+  &__close {
+    @apply cursor-pointer text-black text-opacity-30 hover:text-opacity-50;
+  }
+}
+</style>