Resolved merge conflicts

@stellar/design-system-website/docs/components/elements/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Elements",
+  "link": {
+    "type": "generated-index"
+  }
+}

@stellar/design-system-website/docs/components/elements/avatar.mdx

@@ -0,0 +1,19 @@
+---
+slug: /avatar
+---
+
+# Avatar
+
+<ComponentDescription componentName="Avatar" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Avatar">
+  <Avatar publicAddress="GD4XW236EFCESNO4RKGG5PWML2WNQIJS335XECBW4GRARXKE64VIMOLZ" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Avatar" />

@stellar/design-system-website/docs/components/notifications/banner.mdx

@@ -0,0 +1,19 @@
+---
+slug: /banner
+---
+
+# Banner
+
+<ComponentDescription componentName="Banner" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Banner">
+  <Banner variant="default">Banner message</Banner>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Banner" />

@stellar/design-system-website/src/componentPreview/avatarPreview.tsx

@@ -0,0 +1,5 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const avatarPreview: ComponentPreview = {
+  options: [],
+};

@stellar/design-system-website/src/componentPreview/bannerPreview.tsx

@@ -0,0 +1,32 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const bannerPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "default",
+          label: "Default",
+        },
+        {
+          value: "primary",
+          label: "Primary",
+        },
+        {
+          value: "success",
+          label: "Success",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+        {
+          value: "warning",
+          label: "Warning",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -13,8 +13,10 @@ import { headingPreview } from "@site/src/componentPreview/headingPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
+import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
 import { badgePreview } from "@site/src/componentPreview/badgePreview";
+import { avatarPreview } from "@site/src/componentPreview/avatarPreview";
 
 // =============================================================================
 // Component previews
@@ -27,8 +29,10 @@ const previews: { [key: string]: ComponentPreview } = {
   Caption: captionPreview,
   Paragraph: paragraphPreview,
   Title: titlePreview,
+  Banner: bannerPreview,
   Notification: notificationPreview,
   Badge: badgePreview,
+  Avatar: avatarPreview,
 };
 
 type Theme = "sds-theme-light" | "sds-theme-dark";

@stellar/design-system/src/components/Avatar/index.tsx

@@ -1,10 +1,15 @@
 import { createStellarIdenticon } from "../../helpers/createStellarIdenticon";
 import "./styles.scss";
 
-type AvatarProps = {
+/** */
+export interface AvatarProps {
+  /** Public Stellar address */
   publicAddress: string;
-};
+}
 
+/**
+ * Unique identicon of public Stellar address. [We’re using stellar-identicon-js](https://github.com/Lobstrco/stellar-identicon-js).
+ */
 export const Avatar: React.FC<AvatarProps> = ({
   publicAddress,
 }: AvatarProps) => {

@stellar/design-system/src/components/Banner/index.tsx

@@ -1,11 +1,17 @@
 import React from "react";
 import "./styles.scss";
 
-interface BannerProps {
+/** */
+export interface BannerProps {
+  /** Variant of the banner */
   variant: "default" | "success" | "warning" | "primary" | "error";
+  /** Message to display in the banner */
   children: string | React.ReactNode;
 }
 
+/**
+ * Use banner to display messages at the top of the page, stretching across the whole width. There are five variants `default`, `primary`, `success`, `error`, and `warning`.
+ */
 export const Banner: React.FC<BannerProps> = ({ variant, children }) => (
   <div className={`Banner Banner--${variant}`}>
     <div className="Banner__content">{children}</div>