diff --git a/packages/docusaurus-remote-content/CHANGELOG.md b/packages/docusaurus-remote-content/CHANGELOG.md
new file mode 100644
index 0000000..420e6f2
--- /dev/null
+++ b/packages/docusaurus-remote-content/CHANGELOG.md
@@ -0,0 +1 @@
+# Change Log
diff --git a/packages/docusaurus-remote-content/README.md b/packages/docusaurus-remote-content/README.md
new file mode 100644
index 0000000..1263c98
--- /dev/null
+++ b/packages/docusaurus-remote-content/README.md
@@ -0,0 +1,3 @@
+# Docusaurus Local Search
+
+TODO.
diff --git a/packages/docusaurus-remote-content/package.json b/packages/docusaurus-remote-content/package.json
new file mode 100644
index 0000000..83d9bb1
--- /dev/null
+++ b/packages/docusaurus-remote-content/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@acid-info/docusaurus-remote-content",
+  "version": "1.0.0-alpha.0",
+  "description": "Docusaurus remote content",
+  "main": "lib/index.js",
+  "types": "src/plugin.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acid-info/logos-docusaurus-plugins.git",
+    "directory": "packages/docusaurus-remote-content"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc --build",
+    "watch": "tsc --build --watch",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "fast-glob": "^3.3.2",
+    "lodash": "^4.17.21",
+    "tmp": "^0.2.1",
+    "unzipper": "^0.10.14"
+  },
+  "engines": {
+    "node": ">=16.14"
+  },
+  "devDependencies": {
+    "@docusaurus/core": "2.4.1",
+    "@docusaurus/module-type-aliases": "2.4.1",
+    "@docusaurus/types": "2.4.1",
+    "@docusaurus/utils": "2.4.1",
+    "@docusaurus/utils-common": "2.4.1",
+    "@docusaurus/utils-validation": "2.4.1",
+    "@types/lodash": "^4.14.186",
+    "@types/tmp": "^0.2.6",
+    "@types/unzipper": "^0.10.9"
+  }
+}
diff --git a/packages/docusaurus-remote-content/src/deps.d.ts b/packages/docusaurus-remote-content/src/deps.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docusaurus-remote-content/src/index.ts b/packages/docusaurus-remote-content/src/index.ts
new file mode 100644
index 0000000..bbf46d7
--- /dev/null
+++ b/packages/docusaurus-remote-content/src/index.ts
@@ -0,0 +1,169 @@
+import logger from '@docusaurus/logger'
+import type { LoadContext, Plugin } from '@docusaurus/types'
+import axios from 'axios'
+import * as fg from 'fast-glob'
+import * as fs from 'fs'
+import * as fsp from 'fs/promises'
+import * as path from 'path'
+import * as tmp from 'tmp'
+import unzipper from 'unzipper'
+
+const copyFile = async (src: string, dest: string) => {
+  const dirname = path.dirname(dest)
+  if (!fs.existsSync(dirname)) {
+    await fsp.mkdir(dirname, { recursive: true })
+  }
+
+  await fsp.copyFile(src, dest)
+}
+
+const copyContent = async (
+  src: string,
+  dest: string,
+  options?: {
+    keep?: string[]
+    exclude?: string[]
+  },
+) => {
+  const { keep = [], exclude = [] } = options || {}
+
+  const tmpDir = tmp.dirSync({ unsafeCleanup: true })
+
+  if (!fs.existsSync(dest)) await fsp.mkdir(dest, { recursive: true })
+
+  {
+    const filenames = fg.sync(['**/*'], {
+      cwd: src,
+      ignore: exclude,
+      absolute: false,
+    })
+
+    for (const filename of filenames) {
+      const absPath = path.join(src, filename)
+      const stat = await fsp.stat(absPath)
+
+      if (stat.isDirectory()) {
+        await fsp.mkdir(path.join(tmpDir.name, filename), {
+          recursive: true,
+        })
+      } else await copyFile(absPath, path.join(tmpDir.name, filename))
+    }
+  }
+
+  {
+    const filenames = fg.sync(keep, {
+      cwd: dest,
+    })
+
+    for (const filename of filenames) {
+      const absPath = path.join(dest, filename)
+      const stat = await fsp.stat(absPath)
+
+      if (stat.isDirectory()) {
+        await fsp.mkdir(path.join(tmpDir.name, filename), {
+          recursive: true,
+        })
+      } else await copyFile(absPath, path.join(tmpDir.name, filename))
+    }
+  }
+
+  await fsp.rm(dest, { recursive: true, force: true })
+  await fsp.cp(tmpDir.name, dest, { recursive: true })
+
+  tmpDir.removeCallback()
+}
+
+type PluginOptions = {
+  remote: {
+    type: 'zip'
+    url: string
+    dir?: string
+  }
+
+  // The directory in the remote repository containing the content to be copied
+  contentDir: string
+
+  // The directory in the local site to copy the content to
+  outDir: string
+
+  // Exclude files matching these glob patterns
+  exclude?: string[]
+
+  // Keep local files matching these glob patterns
+  keep?: string[]
+
+  // Keep local static files matching these glob patterns
+  keepStatic?: string[]
+}
+
+export default async function remoteContentPlugin(
+  context: LoadContext,
+  options: PluginOptions,
+): Promise<Plugin<undefined>> {
+  const tempDir = tmp.dirSync({ unsafeCleanup: true })
+  const repoDir = path.join(tempDir.name, 'repo')
+  const zipDir = path.join(tempDir.name, 'zip')
+
+  const downloadRemoteContent = async () => {
+    const { remote, contentDir, outDir, exclude = [], keep = [] } = options
+
+    if (remote.type === 'zip') {
+      const zip = await axios
+        .get(remote.url, { responseType: 'stream' })
+        .then((res) => res.data)
+      const dest = unzipper.Extract({ path: zipDir })
+
+      await new Promise((resolve, reject) => {
+        zip.pipe(dest)
+
+        dest.on('close', resolve)
+        dest.on('error', reject)
+      })
+
+      if (remote.dir) {
+        await fsp.rename(path.join(zipDir, remote.dir), repoDir)
+      } else await fsp.rename(zipDir, repoDir)
+    }
+  }
+
+  const copyRemoteContent = async () => {
+    const { remote, contentDir, outDir, exclude = [], keep = [] } = options
+
+    await copyContent(
+      path.join(repoDir, contentDir),
+      path.join(context.siteDir, outDir),
+      {
+        exclude,
+        keep,
+      },
+    )
+
+    await copyContent(
+      path.join(repoDir, 'static'),
+      path.join(context.siteDir, 'static'),
+      {
+        exclude: [],
+        keep: options.keepStatic ?? [],
+      },
+    )
+  }
+
+  try {
+    logger.info`Downloading remote content from ${options.remote.url}`
+    await downloadRemoteContent()
+    await copyRemoteContent()
+    tempDir.removeCallback()
+  } catch (error) {
+    tempDir.removeCallback()
+    console.error(error)
+    logger.error`Failed to download remote content from ${options.remote.url}`
+
+    process.exit(1)
+  }
+
+  return {
+    name: 'docusaurus-remote-content',
+  }
+}
+
+export { type PluginOptions }
diff --git a/packages/docusaurus-remote-content/src/plugin.d.ts b/packages/docusaurus-remote-content/src/plugin.d.ts
new file mode 100644
index 0000000..ccd487e
--- /dev/null
+++ b/packages/docusaurus-remote-content/src/plugin.d.ts
@@ -0,0 +1 @@
+export type * from './index'
diff --git a/packages/docusaurus-remote-content/tsconfig.json b/packages/docusaurus-remote-content/tsconfig.json
new file mode 100644
index 0000000..af48de9
--- /dev/null
+++ b/packages/docusaurus-remote-content/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib",
+    "lib": ["DOM"]
+  },
+  "include": ["src"],
+  "exclude": ["src/theme", "**/__tests__/**"]
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/README.md b/packages/logos-docusaurus-brand-guidelines-theme/README.md
new file mode 100644
index 0000000..89c5277
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/README.md
@@ -0,0 +1 @@
+# Logos Docusaurus Brand Guidelines Theme
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/gulpfile.js b/packages/logos-docusaurus-brand-guidelines-theme/gulpfile.js
new file mode 100644
index 0000000..d7b3f88
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/gulpfile.js
@@ -0,0 +1,88 @@
+const _ = require('lodash')
+
+const gulp = require('gulp')
+const path = require('path')
+const merge = require('merge2')
+const rimraf = require('rimraf')
+const ts = require('gulp-typescript')
+const TscWatch = require('tsc-watch/client')
+const sourcemaps = require('gulp-sourcemaps')
+const syncDirectory = require('sync-directory')
+const { replaceTscAliasPaths } = require('tsc-alias')
+
+const project = ts.createProject('./tsconfig.client.json', {
+  declaration: true,
+  isolatedModules: false,
+})
+
+const SOURCE_DIR = project.config.compilerOptions.rootDir ?? 'src'
+const OUT_DIR = project.config.compilerOptions.outDir ?? 'lib'
+
+const sourceDir = path.resolve('./', SOURCE_DIR)
+const outDir = path.resolve('./', OUT_DIR)
+
+const clean = async (cb) => {
+  rimraf(outDir, cb)
+}
+
+const build = (cb) => {
+  return gulp.series(buildClient, copyFiles, postBuild, buildServer)(cb)
+}
+
+const buildClient = () => {
+  const compiled = project.src().pipe(sourcemaps.init()).pipe(project())
+
+  return merge(compiled.dts, compiled.js.pipe(sourcemaps.write())).pipe(
+    gulp.dest(outDir),
+  )
+}
+
+const replaceTsAliasPaths = () =>
+  replaceTscAliasPaths({
+    configFile: './tsconfig.client.json',
+  })
+
+const postBuild = (done) =>
+  gulp.series((cb) => replaceTsAliasPaths().finally(cb))(done)
+
+const buildServer = () => {
+  const project = ts.createProject('./tsconfig.json', {
+    isolatedModules: false,
+  })
+
+  const compiled = project.src().pipe(project())
+
+  return merge(compiled.dts, compiled.js).pipe(gulp.dest(outDir))
+}
+
+const syncDirectories = async (watch = false) => {
+  syncDirectory.async(sourceDir, outDir, {
+    watch,
+    verbose: 1,
+    exclude: [/.*\.(ts|tsx)$/],
+  })
+}
+
+const watch = async () => {
+  syncDirectories(true)
+
+  const watch = new TscWatch()
+
+  watch.on('success', async () => {
+    await postBuild()
+  })
+
+  watch.start('--build')
+}
+
+const copyFiles = (cb) => {
+  syncDirectories(false).finally(cb)
+}
+
+gulp.task('build', build)
+gulp.task('watch', watch)
+gulp.task('clean', clean)
+gulp.task('build-server', buildServer)
+gulp.task('build-client', buildClient)
+gulp.task('post-build', postBuild)
+gulp.task('copy-files', copyFiles)
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/package.json b/packages/logos-docusaurus-brand-guidelines-theme/package.json
new file mode 100644
index 0000000..de3420b
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@acid-info/logos-docusaurus-brand-guidelines-theme",
+  "version": "1.0.0-alpha.0",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "src/theme.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acid-info/logos-docusaurus-plugins.git",
+    "directory": "packages/logos-docusaurus-brand-guidelines-theme"
+  },
+  "license": "MIT",
+  "scripts": {
+    "clean": "yarn gulp clean",
+    "prebuild": "yarn clean",
+    "build": "yarn gulp build",
+    "watch": "yarn gulp watch",
+    "build:client": "yarn gulp build-client",
+    "build:server": "yarn gulp build-server",
+    "prepublishOnly": "yarn clean && yarn build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@acid-info/logos-docusaurus-theme": "1.0.0-alpha.121",
+    "@types/lodash": "^4.14.186",
+    "@types/mdx-js__react": "^1.5.5",
+    "@types/three": "^0.152.1",
+    "glob": "^10.3.10",
+    "react-docgen": "^7.0.0",
+    "react-docgen-markdown-renderer": "^2.1.3",
+    "sass": "^1.55.0",
+    "tsc-alias": "^1.7.0",
+    "tsc-watch": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "@acid-info/logos-docusaurus-theme": "1.0.0-alpha.121"
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.module.scss b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.module.scss
new file mode 100644
index 0000000..24583bc
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.module.scss
@@ -0,0 +1,28 @@
+.root {
+  width: 100px;
+  border: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.root.fullWidth {
+  width: 100%;
+}
+
+.root .color {
+  width: 100%;
+  height: 130px;
+  border-bottom: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.root .info {
+  padding: 16px;
+}
+
+.root .title {
+  margin-bottom: 16px;
+}
+
+.root .variables {
+  display: grid;
+  gap: 8px 16px;
+  grid-template: auto / auto 1fr;
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.tsx b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.tsx
new file mode 100644
index 0000000..325fa18
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import styles from './ColorCard.module.scss'
+import clsx from 'clsx'
+import { Typography } from '@acid-info/lsd-react'
+
+export type ColorCardProps = Omit<
+  React.HTMLProps<HTMLDivElement>,
+  'title' | 'color'
+> & {
+  color: string
+  title: React.ReactNode
+  fullWidth?: boolean
+  variables?: {
+    name: string
+    value: string
+  }[]
+}
+
+export const ColorCard: React.FC<ColorCardProps> = ({
+  title,
+  color,
+  fullWidth,
+  variables = [],
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        styles.root,
+        fullWidth && styles.fullWidth,
+      )}
+    >
+      <div className={styles.color} style={{ background: color }}></div>
+      <div className={styles.info}>
+        <Typography
+          className={styles.title}
+          variant="subtitle1"
+          component="div"
+        >
+          {title}
+        </Typography>
+        <div className={styles.variables}>
+          {variables.map((variable, index) => (
+            <React.Fragment key={index}>
+              <Typography variant="label2">{variable.name}</Typography>
+              <Typography variant="label2">{variable.value}</Typography>
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/index.ts
new file mode 100644
index 0000000..66eddf2
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/index.ts
@@ -0,0 +1 @@
+export * from './ColorCard'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/ComponentCard.module.scss b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/ComponentCard.module.scss
new file mode 100644
index 0000000..c484d17
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/ComponentCard.module.scss
@@ -0,0 +1,42 @@
+.root {
+  width: 100%;
+  height: auto;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-decoration: none;
+  text-decoration: none !important;
+
+  aspect-ratio: 1 / 1;
+}
+
+.root .title {
+  padding: 16px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.root .image {
+}
+
+.root .imageContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: auto;
+    height: auto;
+    object-fit: cover;
+    user-select: none;
+  }
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/ComponentCard.tsx b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/ComponentCard.tsx
new file mode 100644
index 0000000..503fd45
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/ComponentCard.tsx
@@ -0,0 +1,41 @@
+import { Typography } from '@acid-info/lsd-react'
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import React from 'react'
+import styles from './ComponentCard.module.scss'
+import Link, { Props as LinkProps } from '@docusaurus/Link'
+
+export type ComponentCardProps = Omit<LinkProps, 'title' | 'color'> & {
+  title: React.ReactNode
+  imageSrc?: string
+  imageDarkSrc?: string
+  imageWidth?: string | number
+  imageHeight?: string | number
+}
+
+export const ComponentCard: React.FC<ComponentCardProps> = ({
+  title,
+  imageSrc,
+  imageDarkSrc,
+  imageWidth,
+  imageHeight,
+  ...props
+}) => {
+  return (
+    <Link {...props} className={clsx(props.className, styles.root)}>
+      <Typography className={styles.title} component="div">
+        {title}
+      </Typography>
+      <div className={styles.imageContainer}>
+        <ThemedImage
+          width={imageWidth}
+          height={imageHeight}
+          sources={{
+            dark: imageDarkSrc || imageSrc || '',
+            light: imageSrc || imageDarkSrc || '',
+          }}
+        />
+      </div>
+    </Link>
+  )
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/index.ts
new file mode 100644
index 0000000..18313fd
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentCard/index.ts
@@ -0,0 +1 @@
+export * from './ComponentCard'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/ComponentGrid.module.scss b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/ComponentGrid.module.scss
new file mode 100644
index 0000000..803aaa2
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/ComponentGrid.module.scss
@@ -0,0 +1,24 @@
+@use '@acid-info/logos-docusaurus-theme/lib/client/css/utils';
+
+.root {
+}
+
+@include utils.responsive('md', 'up') {
+  .root .item {
+    &:nth-child(even) > a {
+      border-left: none;
+    }
+
+    &:not(.lastRow) > a {
+      border-bottom: none;
+    }
+  }
+}
+
+@include utils.responsive('md', 'down') {
+  .root .item {
+    &:not(:last-child) > a {
+      border-bottom: none;
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/ComponentGrid.tsx b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/ComponentGrid.tsx
new file mode 100644
index 0000000..0bcd7dd
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/ComponentGrid.tsx
@@ -0,0 +1,38 @@
+import {
+  Grid,
+  GridProps,
+} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
+import React from 'react'
+import { ComponentCard, ComponentCardProps } from '../ComponentCard'
+import styles from './ComponentGrid.module.scss'
+import clsx from 'clsx'
+
+export type ComponentGridProps = GridProps & {
+  list: ComponentCardProps[]
+}
+
+export const ComponentGrid: React.FC<ComponentGridProps> = ({
+  list = [],
+  ...props
+}) => {
+  return (
+    <Grid
+      md={{ cols: 2, wrap: true, gap: '0' }}
+      {...props}
+      className={clsx(styles.root, props.className)}
+    >
+      {list.map((props, idx) => (
+        <Grid.Item
+          md={1}
+          key={idx}
+          className={clsx(
+            styles.item,
+            idx >= list.length - 2 && styles.lastRow,
+          )}
+        >
+          <ComponentCard {...props} />
+        </Grid.Item>
+      ))}
+    </Grid>
+  )
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/index.ts
new file mode 100644
index 0000000..b3f9ff8
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ComponentGrid/index.ts
@@ -0,0 +1 @@
+export * from './ComponentGrid'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/Image.module.scss b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/Image.module.scss
new file mode 100644
index 0000000..fe5c36e
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/Image.module.scss
@@ -0,0 +1,46 @@
+@use '@acid-info/logos-docusaurus-theme/lib/client/css/utils';
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: rgb(var(--lsd-theme-secondary));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.thumbnail {
+  cursor: pointer;
+}
+
+.enlarged {
+  position: fixed;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  max-height: 90vh;
+  max-width: 90vw;
+
+  display: block;
+  object-fit: contain;
+}
+
+.closeButton {
+  position: fixed;
+  top: 18px;
+  right: 16px;
+
+  background-color: rgb(var(--lsd-theme-secondary)) !important;
+
+  cursor: pointer;
+
+  z-index: 1001;
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/Image.tsx b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/Image.tsx
new file mode 100644
index 0000000..3701f4e
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/Image.tsx
@@ -0,0 +1,116 @@
+import { LightBoxWrapper } from '@acid-info/logos-docusaurus-theme/lib/client/containers/LightBox'
+import { CloseIcon, IconButton } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React, { useEffect, useMemo, useState } from 'react'
+import styles from './Image.module.scss'
+
+export type LoadedImage = {
+  preSrc: string
+  width: number
+  height: number
+  placeholder: any
+  src: string
+  srcSet: string
+  images: {
+    width: number
+    height: number
+    path: string
+  }[]
+}
+
+export type ImageProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'src'
+> & {
+  src?: string
+  img?: LoadedImage | undefined | null
+  minWidth?: number
+}
+
+export const Image: React.FC<ImageProps> = ({
+  minWidth = 0,
+  src,
+  img,
+  ...rest
+}) => {
+  const [enlarged, setEnlarged] = useState(false)
+  const singleImage = !img?.images || img.images.length === 0
+
+  const originalImage = {
+    src: src,
+    width: rest.width,
+    height: rest.height,
+  }
+
+  const images = img?.images || []
+
+  const sorted = useMemo(
+    () =>
+      [...images]
+        .sort((a, b) => a.width - b.width)
+        .filter((img) => img.width >= minWidth),
+    [images],
+  )
+
+  const [smallest] = [sorted[0] ?? originalImage]
+    .map(
+      (img) =>
+        img && {
+          width: img.width,
+          height: img.height,
+          src: 'src' in img ? img.src : 'path' in img ? img.path : '',
+        },
+    )
+    .filter((img) => !!img)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setEnlarged(false)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  const imageElement = (
+    <img
+      src={smallest!.src as string}
+      width={smallest!.width}
+      height={smallest!.height}
+      onClick={() => !singleImage && setEnlarged(true)}
+      {...rest}
+      className={clsx(
+        styles.image,
+        !singleImage && styles.thumbnail,
+        rest.className,
+      )}
+    />
+  )
+
+  return (
+    <>
+      {img ? imageElement : <LightBoxWrapper>{imageElement}</LightBoxWrapper>}
+      {enlarged && (
+        <div className={styles.overlay}>
+          <IconButton
+            size="small"
+            onClick={() => setEnlarged(false)}
+            className={styles.closeButton}
+          >
+            <CloseIcon color="primary" />
+          </IconButton>
+          <img
+            src={originalImage.src as string}
+            {...rest}
+            className={styles.enlarged}
+          />
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/index.ts
new file mode 100644
index 0000000..072b161
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/Image/index.ts
@@ -0,0 +1 @@
+export * from './Image'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/ImageGrid.module.scss b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/ImageGrid.module.scss
new file mode 100644
index 0000000..bf6269a
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/ImageGrid.module.scss
@@ -0,0 +1,61 @@
+@use '@acid-info/logos-docusaurus-theme/lib/client/css/utils';
+
+.thumbnailImageContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 100%;
+}
+
+.thumbnailImage {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.masonry .thumbnailImageContainer {
+  flex-direction: column;
+  margin-bottom: 16px;
+  height: auto; // overrides the height: 100% from the default thumbnailImageContainer
+}
+
+.squareThumbnails .thumbnailImageContainer {
+  aspect-ratio: 1 / 1;
+}
+
+// Overlay and expanded image styles.
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: rgb(var(--lsd-theme-secondary));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.closeButton {
+  position: fixed;
+  top: 18px;
+  right: 16px;
+
+  background-color: rgb(var(--lsd-theme-secondary)) !important;
+
+  cursor: pointer;
+
+  z-index: 1001;
+}
+
+// Single column image galleries on mobile don't have spacing between them.
+// The following padding bottom fixes that.
+@include utils.responsive('md', 'down') {
+  .thumbnailImageContainer {
+    padding-bottom: 16px;
+  }
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/ImageGrid.tsx b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/ImageGrid.tsx
new file mode 100644
index 0000000..9c2cb80
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/ImageGrid.tsx
@@ -0,0 +1,104 @@
+import {
+  Grid,
+  GridProps,
+} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
+import clsx from 'clsx'
+import React from 'react'
+import { Image, LoadedImage } from '../Image/Image'
+import styles from './ImageGrid.module.scss'
+
+type ImageType = {
+  img?: { src: LoadedImage }
+  alt?: string
+  src: string
+}
+
+type MasonryModeProps = {
+  firstColumnSize: number
+  images: ImageType[]
+}
+
+// Masonry mode only has 2 columns with 1 item each.
+const MasonryMode: React.FC<MasonryModeProps> = ({
+  firstColumnSize,
+  images,
+}) => {
+  const firstColumnImages = images.slice(0, firstColumnSize)
+  const secondColumnImages = images.slice(firstColumnSize)
+
+  return (
+    <>
+      <Grid.Item>
+        {firstColumnImages.map((image, index) => (
+          <div key={index} className={styles.thumbnailImageContainer}>
+            <Image
+              minWidth={400}
+              src={image.src}
+              img={image.img?.src}
+              alt={image.alt ?? ''}
+              className={styles.thumbnailImage}
+            />
+          </div>
+        ))}
+      </Grid.Item>
+      <Grid.Item>
+        {secondColumnImages.map((image, index) => (
+          <div key={index} className={styles.thumbnailImageContainer}>
+            <Image
+              minWidth={400}
+              src={image.src}
+              img={image.img?.src}
+              alt={image.alt ?? ''}
+              className={styles.thumbnailImage}
+            />
+          </div>
+        ))}
+      </Grid.Item>
+    </>
+  )
+}
+
+export type ImageGridProps = GridProps & {
+  images: ImageType[]
+  mode?: 'masonry' | 'regular' | 'square-thumbnails'
+  firstColumnSize?: number
+}
+
+export const ImageGrid: React.FC<ImageGridProps> = ({
+  mode = 'regular',
+  images,
+  firstColumnSize = 0,
+  ...props
+}) => {
+  return (
+    <>
+      <Grid
+        md={{ cols: mode === 'masonry' ? 2 : 3, gap: '16px' }}
+        xs={{ cols: 2, gap: '16px' }}
+        className={clsx(
+          styles.imageGrid,
+          mode === 'masonry' && styles.masonry,
+          mode === 'regular' && styles.regular,
+          mode === 'square-thumbnails' && styles.squareThumbnails,
+        )}
+        {...props}
+      >
+        {mode === 'masonry' ? (
+          <MasonryMode firstColumnSize={firstColumnSize} images={images} />
+        ) : (
+          images.map((image, index) => (
+            <Grid.Item key={index} className={styles.thumbnailImageContainer}>
+              <Image
+                minWidth={400}
+                src={image.src}
+                img={image.img?.src}
+                alt={image.alt ?? ''}
+                className={styles.thumbnailImage}
+              />
+            </Grid.Item>
+          ))
+        )}
+      </Grid>
+    </>
+  )
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/index.ts
new file mode 100644
index 0000000..46b8437
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ImageGrid/index.ts
@@ -0,0 +1 @@
+export * from './ImageGrid'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/StoryBookDemo.module.scss b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/StoryBookDemo.module.scss
new file mode 100644
index 0000000..9c8ad66
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/StoryBookDemo.module.scss
@@ -0,0 +1,13 @@
+.root {
+}
+
+.iframeContainer {
+  width: 100%;
+  margin-top: 8px;
+
+  iframe {
+    transform: translateY(-20px);
+    width: 100%;
+    background-color: transparent;
+  }
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/StorybookDemo.tsx b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/StorybookDemo.tsx
new file mode 100644
index 0000000..a94f734
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/StorybookDemo.tsx
@@ -0,0 +1,184 @@
+import { Dropdown } from '@acid-info/lsd-react'
+import { useColorMode } from '@docusaurus/theme-common'
+import clsx from 'clsx'
+import React, { useMemo, useRef, useState } from 'react'
+import styles from './StoryBookDemo.module.scss'
+
+const onIframeLoad = (iframe: HTMLIFrameElement) => {
+  const handleIframeMessage = (event: MessageEvent) => {
+    if (
+      typeof event.data === 'string' &&
+      event.data.includes('storyRendered')
+    ) {
+      // XXX: This if() block executes when storybook has finished rendering.
+      // So if we ever want to implement a loading screen, this if() block may help.
+      requestHeightFromIframe()
+    } else if (event.data && event.data.type === 'iframeHeightResponse') {
+      iframe.style.height = `${event.data.height}px`
+    }
+  }
+
+  // Request height from the iframe
+  const requestHeightFromIframe = () => {
+    if (!iframe || !iframe.contentWindow) {
+      return
+    }
+
+    iframe.contentWindow.postMessage(
+      {
+        type: 'requestHeight',
+      },
+      '*',
+    )
+  }
+
+  window.addEventListener('message', handleIframeMessage)
+
+  // The following setInterval is just a safety mechanism for the very unlikely case
+  // of the iframe not sending a storyRendered message.
+  setInterval(() => {
+    requestHeightFromIframe()
+  }, 1000)
+}
+
+type GlobalType = {
+  name: string
+  description: string
+  defaultValue: string
+  toolbar: {
+    icon: string
+    items: { title: string; value: string }[]
+  }
+}
+
+type ComponentProperty = {
+  name: string
+  type: {
+    name: 'enum'
+    value: string[]
+  }
+  defaultValue?: string
+}
+
+export type GlobalControls = 'themeFont' | 'themeColor'
+
+export type StorybookDemoProps = {
+  name: string
+  docId: string
+  storyId: string
+  storybookUrl: string
+  globalTypes: Record<string, GlobalType>
+  componentProperties: ComponentProperty[]
+  globalControls?: GlobalControls[]
+}
+
+export const StorybookDemo: React.FC<StorybookDemoProps> = ({
+  name,
+  docId,
+  storyId,
+  storybookUrl,
+  globalTypes,
+  globalControls = ['themeColor', 'themeFont'],
+  componentProperties = [],
+}) => {
+  const colorMode = useColorMode()
+
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  const [globalProps, setGlobalProps] = useState(
+    Object.fromEntries(
+      Object.entries(globalTypes).map(([name, prop]) => [
+        name,
+        name === 'themeColor'
+          ? colorMode.colorMode.slice(0, 1).toUpperCase() +
+            colorMode.colorMode.slice(1)
+          : prop.defaultValue,
+      ]),
+    ),
+  )
+
+  const [props, setProps] = useState(
+    Object.fromEntries(
+      componentProperties.map((prop) => [prop.name, prop.defaultValue]),
+    ),
+  )
+
+  const embedUrl = useMemo(() => {
+    const el = iframeRef.current
+
+    const url = el?.src
+      ? new URL(el.src)
+      : new URL('/iframe.html', storybookUrl as string)
+
+    url.searchParams.set('id', docId)
+    storyId && url.searchParams.set('storyId', storyId)
+    url.searchParams.set('globals', 'themeColor:Dark;themeFont:sans-serif')
+    url.searchParams.set('embedded', 'true')
+    url.searchParams.set(
+      'hide',
+      'title,subtitle,toolbar' +
+        (storyId ? ',description,canvas-border,code' : ''),
+    )
+    url.searchParams.set(
+      'globalControls',
+      globalControls && globalControls.length
+        ? globalControls.join(',')
+        : 'false',
+    )
+
+    return url.toString()
+  }, [docId, storyId, globalProps, globalControls, props])
+
+  return (
+    <div className={clsx(styles.root, styles[globalProps.themeColor!])}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '0 8px',
+        }}
+      >
+        {Object.entries(globalTypes).map(([name, prop]) => (
+          <Dropdown
+            key={name}
+            value={globalProps[name]}
+            onChange={(value) =>
+              setGlobalProps((state) => ({ ...state, [name]: value as string }))
+            }
+            options={prop.toolbar.items.map((i) => ({
+              name: i.title,
+              value: i.value,
+            }))}
+            triggerLabel={prop.name}
+            label={prop.name}
+          />
+        ))}
+        {componentProperties.map((prop) => (
+          <Dropdown
+            key={prop.name}
+            value={props[prop.name]}
+            onChange={(value) =>
+              setProps((state) => ({ ...state, [prop.name]: value as string }))
+            }
+            options={prop.type.value.map((i) => ({
+              name: i,
+              value: i,
+            }))}
+            triggerLabel={prop.name}
+            label={prop.name}
+          />
+        ))}
+      </div>
+      <div className={styles.iframeContainer}>
+        <iframe
+          ref={iframeRef}
+          src={embedUrl}
+          height={500}
+          onLoad={() => {
+            onIframeLoad(iframeRef.current!)
+          }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/index.ts
new file mode 100644
index 0000000..c380a73
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/StorybookDemo/index.ts
@@ -0,0 +1 @@
+export * from './StorybookDemo'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/index.ts
new file mode 100644
index 0000000..e13ee5f
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/index.ts
@@ -0,0 +1,5 @@
+export * from './ColorCard'
+export * from './ComponentCard'
+export * from './ComponentGrid'
+export * from './ImageGrid'
+export * from './StorybookDemo'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/css/custom.scss b/packages/logos-docusaurus-brand-guidelines-theme/src/client/css/custom.scss
new file mode 100644
index 0000000..a323326
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/css/custom.scss
@@ -0,0 +1,26 @@
+.hidden {
+  display: none;
+}
+
+.sidebar-menu-divider {
+  margin-bottom: 24px;
+}
+
+.DocCardList--no-overview {
+  article:first-child {
+    display: none;
+  }
+
+  article a {
+    text-decoration: none;
+  }
+
+  article a:hover {
+    text-decoration: underline;
+  }
+}
+
+pre {
+  background-color: rgb(var(--lsd-theme-secondary)) !important;
+  border: 1px solid rgb(var(--lsd-border-primary)) !important;
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/client/types/theme.types.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/client/types/theme.types.ts
new file mode 100644
index 0000000..fba6bce
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/client/types/theme.types.ts
@@ -0,0 +1,6 @@
+import type { PluginOptions as DefaultPluginOptions } from '@docusaurus/theme-classic'
+import { BuildLSDStorybookDocsOptions } from '../../server/utils/build-lsd-storybook-docs'
+
+export type ThemeOptions = DefaultPluginOptions & {
+  lsdDocs?: BuildLSDStorybookDocsOptions
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/deps.d.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/deps.d.ts
new file mode 100644
index 0000000..99508d5
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/deps.d.ts
@@ -0,0 +1 @@
+declare module '*.scss'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/index.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/index.ts
new file mode 100644
index 0000000..07e4c9b
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/index.ts
@@ -0,0 +1,58 @@
+import type { LoadContext, Plugin } from '@docusaurus/types'
+import path from 'path'
+import type { ThemeOptions } from './client/types/theme.types'
+import { buildLSDStorybookDocs } from './server/utils/build-lsd-storybook-docs'
+
+export default async function logosTheme(
+  context: LoadContext,
+  options: ThemeOptions,
+): Promise<Plugin<any>> {
+  const clientModules: string[] = [
+    path.resolve(__dirname, './client/css/custom.scss'),
+  ]
+  if (options.customCss) {
+    if (typeof options.customCss === 'string')
+      clientModules.push(options.customCss)
+    else clientModules.push(...options.customCss)
+  }
+
+  context.siteConfig.staticDirectories = [
+    ...(context.siteConfig.staticDirectories ?? []),
+    path.join(__dirname, './client/static/'),
+  ]
+
+  if (options.lsdDocs) {
+    await buildLSDStorybookDocs({
+      ...options.lsdDocs,
+      staticDirectory: path.join(
+        context.siteDir,
+        'static',
+        options.lsdDocs.staticDirectory,
+      ),
+      componentsDirectory: path.join(
+        context.siteDir,
+        options.lsdDocs.componentsDirectory,
+      ),
+      designTokensDirectory: path.join(
+        context.siteDir,
+        options.lsdDocs.designTokensDirectory,
+      ),
+    })
+  }
+
+  return {
+    name: 'logos-docusaurus-brand-guidelines-theme',
+
+    getThemePath: () => path.resolve(__dirname, './client/theme'),
+
+    getTypeScriptThemePath: () =>
+      path.resolve(__dirname, '../src/client/theme'),
+
+    getClientModules: () => clientModules,
+
+    loadContent: async () => {},
+  }
+}
+
+export { validateOptions } from './server/utils/validateOptions'
+export type { ThemeOptions }
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/server/utils/build-lsd-storybook-docs.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/server/utils/build-lsd-storybook-docs.ts
new file mode 100644
index 0000000..60cb2c7
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/server/utils/build-lsd-storybook-docs.ts
@@ -0,0 +1,142 @@
+import * as fs from 'fs'
+import * as fsp from 'fs/promises'
+import fetch from 'node-fetch'
+import * as path from 'path'
+import { URL } from 'url'
+import { ComponentGridProps } from '../../client/components/mdx'
+
+export type BuildLSDStorybookDocsOptions = {
+  storybookUrl: string
+  componentsDirectory: string
+  designTokensDirectory: string
+  staticDirectory: string
+  excludeComponents?: string[]
+  componentConfig?: {
+    [key: string]: {
+      globalProps?: string[]
+    }
+  }
+}
+
+export const buildLSDStorybookDocs = async ({
+  storybookUrl,
+  componentsDirectory,
+  designTokensDirectory,
+  excludeComponents = [],
+  componentConfig = {},
+  staticDirectory,
+}: BuildLSDStorybookDocsOptions) => {
+  const metadataUrl = new URL('/_metadata.json', storybookUrl)
+  const metadata = await (await fetch(metadataUrl.toString())).json()
+
+  if (fs.existsSync(componentsDirectory))
+    await fsp.rm(componentsDirectory, { recursive: true })
+
+  if (fs.existsSync(designTokensDirectory))
+    await fsp.rm(designTokensDirectory, { recursive: true })
+
+  await fsp.mkdir(componentsDirectory, { recursive: true })
+  await fsp.mkdir(designTokensDirectory, { recursive: true })
+
+  const components = metadata.components.filter(
+    (component) => !excludeComponents.includes(component.name),
+  )
+
+  for (const component of components) {
+    const story =
+      component.stories.find((s) => s.name === 'Root') || component.stories[0]
+    const storyId = story.id
+
+    let doc = ''
+    doc += `---\ntitle: ${component.name}\n---\n\n`
+    doc += `import { StorybookDemo } from '@site/src/components/mdx';\n\n`
+    doc += `# ${component.component.title}\n\n`
+    doc += `<StorybookDemo name="${
+      component.name
+    }" storybookUrl="${storybookUrl}" docId="${storyId.replace(
+      '--root',
+      '--docs',
+    )}" globalTypes={{}} componentProperties={[]} />\n`
+
+    await fsp.writeFile(
+      path.join(componentsDirectory, `${component.name}.mdx`),
+      doc,
+    )
+  }
+
+  {
+    const themeProvider = components.find(
+      (comp) => comp.name === 'ThemeProvider',
+    )
+
+    const root = themeProvider.stories.find((story) => story.name === 'Root')
+    const stories = themeProvider.stories.filter((story) => story !== root)
+    for (const story of stories) {
+      let doc = ''
+      const config = componentConfig[story.name] || {}
+      const globalControls = config.globalProps || ['themeConfig', 'themeFont']
+
+      doc += `---\ntitle: ${story.name}\n---\n\n`
+      doc += `import { StorybookDemo } from '@site/src/components/mdx';\n\n`
+      doc += `# ${story.name}\n\n`
+      doc += `<StorybookDemo name="${story.name}" docId="${root.id.replace(
+        '--root',
+        '--docs',
+      )}" storybookUrl="${storybookUrl}" storyId="${
+        story.id
+      }" globalTypes={{}} componentProperties={[]} globalControls={${JSON.stringify(
+        globalControls,
+      )}}/>\n`
+
+      await fsp.writeFile(
+        path.join(designTokensDirectory, `${story.name}.mdx`),
+        doc,
+      )
+    }
+
+    await fsp.writeFile(
+      path.join(designTokensDirectory, '_category_.json'),
+      JSON.stringify(
+        {
+          label: 'Design Tokens',
+          link: {
+            type: 'generated-index',
+            title: 'Design Tokens',
+          },
+        },
+        null,
+        2,
+      ),
+    )
+  }
+
+  {
+    // components index page
+
+    let doc = ''
+    doc += `---\ntitle: Components\n---\n\n`
+    doc += `import { ComponentGrid } from '@site/src/components/mdx';\n\n`
+    doc += `# Components\n\n`
+
+    const list: ComponentGridProps['list'] = []
+
+    for (const component of components) {
+      const { name } = component
+
+      const fullPath = path.join(staticDirectory, `/${name}.png`)
+      const imagePath = '/' + fullPath.split('/static/')[1]
+
+      if (fs.existsSync(fullPath)) {
+        list.push({
+          title: name,
+          href: `./${name}`,
+          imageSrc: imagePath,
+        })
+      }
+    }
+
+    doc += `<ComponentGrid list={${JSON.stringify(list, null, 2)}} />\n`
+
+    await fsp.writeFile(path.join(componentsDirectory, `index.mdx`), doc)
+  }
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/server/utils/validateOptions.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/server/utils/validateOptions.ts
new file mode 100644
index 0000000..38ec65c
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/server/utils/validateOptions.ts
@@ -0,0 +1,12 @@
+import { Joi } from '@docusaurus/utils-validation'
+import { ThemeOptions } from '../../client/types/theme.types'
+
+const schema = Joi.object<ThemeOptions>({}).unknown(true)
+
+export const validateOptions = ({
+  options,
+  validate,
+}: {
+  options: ThemeOptions
+  validate: any
+}) => validate(schema, { ...(options ?? {}) })
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/src/theme.d.ts b/packages/logos-docusaurus-brand-guidelines-theme/src/theme.d.ts
new file mode 100644
index 0000000..ccd487e
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/src/theme.d.ts
@@ -0,0 +1 @@
+export type * from './index'
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/tsconfig.client.json b/packages/logos-docusaurus-brand-guidelines-theme/tsconfig.client.json
new file mode 100644
index 0000000..708c15a
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/tsconfig.client.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "rootDir": "src",
+    "outDir": "lib",
+    "module": "CommonJS",
+    "target": "esnext",
+    "jsx": "react",
+    "types": [
+      "node",
+      "@docusaurus/module-type-aliases",
+      "@docusaurus/theme-classic"
+    ],
+    "baseUrl": "./",
+    "lib": ["DOM"],
+    "paths": {
+      "@logos-theme/*": ["src/client/*"]
+    },
+    "plugins": [{ "transform": "typescript-transform-paths" }]
+  },
+  "include": ["src/client", "src/server", "src/*.d.ts", "src/theme.ts"],
+  "exclude": ["src/index.ts", "**/__tests__/**"]
+}
diff --git a/packages/logos-docusaurus-brand-guidelines-theme/tsconfig.json b/packages/logos-docusaurus-brand-guidelines-theme/tsconfig.json
new file mode 100644
index 0000000..2cb315d
--- /dev/null
+++ b/packages/logos-docusaurus-brand-guidelines-theme/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "references": [{ "path": "./tsconfig.client.json" }],
+  "compilerOptions": {
+    "noEmit": false,
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib",
+    "jsx": "react",
+    "target": "es5"
+  },
+  "include": [
+    "src",
+    "src/client/theme/NavbarItem",
+    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx",
+    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx"
+  ],
+  "exclude": ["src/client", "**/__tests__/**"]
+}
diff --git a/yarn.lock b/yarn.lock
index 2b1a6c7..7ef191d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3827,11 +3827,23 @@
     fflate "~0.6.9"
     lil-gui "~0.17.0"
 
+"@types/tmp@^0.2.6":
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.2.6.tgz#d785ee90c52d7cc020e249c948c36f7b32d1e217"
+  integrity sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/unzipper@^0.10.9":
+  version "0.10.9"
+  resolved "https://registry.yarnpkg.com/@types/unzipper/-/unzipper-0.10.9.tgz#ccbc393ecd1ec013dbe9bc6f13332dad0aa00a0f"
+  integrity sha512-vHbmFZAw8emNAOVkHVbS3qBnbr0x/qHQZ+ei1HE7Oy6Tyrptl+jpqnOX+BF5owcu/HZLOV0nJK+K9sjs1Ox2JA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/vinyl@^2.0.4":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/vinyl/-/vinyl-2.0.7.tgz#9739a9a2afaf9af32761c54a0e82c735279f726c"
@@ -4726,6 +4738,15 @@ axios@^1.0.0, axios@^1.4.0:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+axios@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
@@ -4977,6 +4998,11 @@ bidi-js@^1.0.2:
   dependencies:
     require-from-string "^2.0.2"
 
+big-integer@^1.6.17:
+  version "1.6.52"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85"
+  integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -5002,6 +5028,14 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+binary@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/binary/-/binary-0.3.0.tgz#9f60553bc5ce8c3386f3b553cff47462adecaa79"
+  integrity sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==
+  dependencies:
+    buffers "~0.1.1"
+    chainsaw "~0.1.0"
+
 binaryextensions@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
@@ -5023,6 +5057,11 @@ bl@^4.0.3, bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bluebird@~3.4.1:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
+  integrity sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==
+
 body-parser@1.20.1:
   version "1.20.1"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
@@ -5183,6 +5222,11 @@ buffer-from@1.x, buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
+buffer-indexof-polyfill@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz#d2732135c5999c64b277fcf9b1abe3498254729c"
+  integrity sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==
+
 buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
@@ -5199,6 +5243,11 @@ buffer@^6.0.3:
     base64-js "^1.3.1"
     ieee754 "^1.2.1"
 
+buffers@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
+  integrity sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==
+
 builtin-modules@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
@@ -5398,6 +5447,13 @@ ccount@^1.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043"
   integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
 
+chainsaw@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/chainsaw/-/chainsaw-0.1.0.tgz#5eab50b28afe58074d0d58291388828b5e5fbc98"
+  integrity sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==
+  dependencies:
+    traverse ">=0.3.0 <0.4"
+
 chalk@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
@@ -7224,6 +7280,13 @@ draco3d@^1.4.1:
   resolved "https://registry.yarnpkg.com/draco3d/-/draco3d-1.5.6.tgz#0d570a9792e3a3a9fafbfea065b692940441c626"
   integrity sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==
 
+duplexer2@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  integrity sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==
+  dependencies:
+    readable-stream "^2.0.2"
+
 duplexer3@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
@@ -8113,6 +8176,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -8607,6 +8681,16 @@ fsevents@^2.1.2, fsevents@~2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
+fstream@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
+  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -9087,7 +9171,7 @@ graceful-fs@4.2.10:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -9785,7 +9869,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -11501,6 +11585,11 @@ lines-and-columns@~2.0.3:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.3.tgz#b2f0badedb556b747020ab8ea7f0373e22efac1b"
   integrity sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==
 
+listenercount@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/listenercount/-/listenercount-1.0.1.tgz#84c8a72ab59c4725321480c975e6508342e70937"
+  integrity sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==
+
 load-json-file@6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-6.2.0.tgz#5c7770b42cafa97074ca2848707c61662f4251a1"
@@ -12275,7 +12364,7 @@ mkdirp-infer-owner@^2.0.0:
     infer-owner "^1.0.4"
     mkdirp "^1.0.3"
 
-mkdirp@0.x, mkdirp@^0.5.1:
+mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
@@ -15231,6 +15320,13 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rimraf@2:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -15672,7 +15768,7 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.5:
+setimmediate@^1.0.5, setimmediate@~1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
@@ -16815,7 +16911,7 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
-tmp@~0.2.1:
+tmp@^0.2.1, tmp@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
   integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
@@ -16928,6 +17024,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+"traverse@>=0.3.0 <0.4":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.3.9.tgz#717b8f220cc0bb7b44e40514c22b2e8bbc70d8b9"
+  integrity sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==
+
 treeverse@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/treeverse/-/treeverse-3.0.0.tgz#dd82de9eb602115c6ebd77a574aae67003cb48c8"
@@ -17512,6 +17613,22 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+unzipper@^0.10.14:
+  version "0.10.14"
+  resolved "https://registry.yarnpkg.com/unzipper/-/unzipper-0.10.14.tgz#d2b33c977714da0fbc0f82774ad35470a7c962b1"
+  integrity sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==
+  dependencies:
+    big-integer "^1.6.17"
+    binary "~0.3.0"
+    bluebird "~3.4.1"
+    buffer-indexof-polyfill "~1.0.0"
+    duplexer2 "~0.1.4"
+    fstream "^1.0.12"
+    graceful-fs "^4.2.2"
+    listenercount "~1.0.1"
+    readable-stream "~2.3.6"
+    setimmediate "~1.0.4"
+
 upath@2.0.1, upath@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"