@redocly/theme 0.1.7 → 0.1.8

package/src/types/portal/src/server/store.d.ts

@@ -0,0 +1,101 @@
+import { Sidebar } from './plugins/sidebars/index.js';
+import { PageType } from './constants.js';
+import type { Version, VersionsConfigType } from './plugins/versions/types.js';
+import type { ResolvedNavItem } from '../shared/types.js';
+export interface PageProps {
+  id: string;
+  seo: {
+    title: string;
+  };
+  versions?: Version[];
+  [k: string]: unknown;
+}
+export interface Page {
+  type: PageType;
+  basePath: string;
+  relativePath: string;
+  id: string;
+  pathname: string;
+  absolutePath: string;
+  hash: string;
+  sidebarId: string | null;
+  version: string;
+  versions: Version[] | null;
+  dataDependencies?: string[];
+  getPageProps(): Promise<PageProps>;
+  getSidebarLabel(): Promise<string>;
+  getTemplateId(): string;
+  getSidebar?(): ResolvedNavItem[];
+  getSidebarPages?(): Page[];
+  clone(version: string, versionsConfig: Map<string, VersionsConfigType>): Page;
+}
+export declare class Template {
+  absolutePath: string;
+  id: string;
+  hash: string;
+  constructor(absolutePath: string, id: string);
+}
+export declare class Store {
+  contentDir: string;
+  outdir: string;
+  renderMode: 'thread_worker' | 'main';
+  isReady: boolean;
+  allAbsolutePaths: string[];
+  pages: Map<string, Page>;
+  sidebars: Map<string, Sidebar>;
+  sharedData: Map<string, any>;
+  templates: Map<string, Template>;
+  esbuildPlugins: any[];
+  listeners: Map<string, Set<Function>>;
+  globalData: Record<string, unknown>;
+  cliOptions: Record<string, unknown>;
+  globalConfig: Record<string, unknown>;
+  readyPromise: Promise<void>;
+  versionsConfig: Map<string, VersionsConfigType>;
+  private _resolveReady;
+  sidebarUpdatesFrozen: boolean;
+  ignoredContentPaths: string[];
+  currentProcessedPage: string;
+  constructor(contentDir: string, outdir?: string, renderMode?: 'thread_worker' | 'main');
+  on(type: 'page-updated', cb: (page: Page) => void | any): void;
+  on(type: 'sidebar-updated', cb: (sidebar: Sidebar) => void | any): void;
+  on(type: 'template-updated', cb: (template: Template) => void | any): void;
+  on(type: 'ready', cb: (pathname: string) => void | any): void;
+  on(type: 'shared-data-updated', cb: (id: string, data: any) => void): any;
+  on(
+    type: 'global-data-updated',
+    cb: (pathname: string, data: Record<string, unknown>) => void | any,
+  ): void;
+  on(type: 'versions-config-updated', cb: any): void;
+  runListeners<T extends Array<unknown>>(
+    type:
+      | 'ready'
+      | 'page-updated'
+      | 'template-updated'
+      | 'sidebar-updated'
+      | 'global-data-updated'
+      | 'shared-data-updated'
+      | 'versions-config-updated',
+    ...args: T
+  ): void;
+  ready(): void;
+  addEsbuildPlugin(plugin: any): void;
+  setVersionsConfig(id: string, data: VersionsConfigType): void;
+  setGlobalData(data: Record<string, unknown>): void;
+  setCliOptions(data: Record<string, unknown>): void;
+  setGlobalConfig(data: Record<string, unknown>): void;
+  setAllAbsolutePaths(paths: any): void;
+  setVersionConfigUpdated(): void;
+  getPageByPathname(pathname: string): Page;
+  getSidebarById(id: string): Sidebar;
+  getPageByFsPath(absolutePath: string): Page;
+  createSidebar(sidebar: Sidebar): void;
+  removeSidebar(id: string): void;
+  createSharedData(id: string, data: any): string;
+  createPage(page: Page): Promise<void>;
+  deletePage(pathname: string): void;
+  getTemplate(id: string): Template;
+  createTemplate(template: Template): void;
+  private verifyVersionsLink;
+  private assignPagesSidebars;
+}

package/src/types/portal/src/server/utils/async.d.ts

@@ -0,0 +1,5 @@
+export declare function promiseMapLimit<T, P>(
+  array: T[],
+  poolLimit: number,
+  iteratorFn: (arg: T, array: T[]) => Promise<P>,
+): Promise<P[]>;

package/src/types/portal/src/server/utils/crypto.d.ts

@@ -0,0 +1,3 @@
+export declare function sha(content: string): string;
+export declare function shaFile(fileName: string): string;
+export declare function shaFileForUrl(fileName: string): string;

package/src/types/portal/src/server/utils/fs.d.ts

@@ -0,0 +1,3 @@
+export declare function readFileAsStringSync(filePath: string): string;
+export declare function readFileNames(dir: string): string[];
+export declare function copyStaticFile(absolutePath: string, outdir: string): string;

package/src/types/portal/src/server/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './async.js';
+export * from './crypto.js';
+export * from './fs.js';
+export * from './reporter/reporter.js';
+export * from './watcher.js';
+export * from './paths.js';

package/src/types/portal/src/server/utils/paths.d.ts

@@ -0,0 +1,16 @@
+export declare function getDataFromRelativePath(relativePath: string): {
+  pathVersion: string;
+  basePath: string;
+};
+export declare function generatePagePathname(
+  currentVersion?: string | null,
+  defaultVersion?: string | null,
+  ...combineParts: string[]
+): string;
+export declare function fromCurrentDir(moduleUrl: string, path: string): string;
+export declare function excludeVersion<T extends string[] | string>(
+  arg: T,
+): {
+  version?: string;
+  data: T;
+};

package/src/types/portal/src/server/utils/reporter/formatter.d.ts

@@ -0,0 +1,11 @@
+declare const formatter: {
+  success(message: string, ...args: any[]): string;
+  info(message: string, ...args: any[]): string;
+  warn(message: string, ...args: any[]): string;
+  error(message: string, ...args: any[]): string;
+  verbose(message: string, ...args: any[]): string;
+  formatMs(ms: number): string;
+  withTime(message: any, reporter: any): string;
+  format(pattern: string, ...args: any[]): string;
+};
+export default formatter;

package/src/types/portal/src/server/utils/reporter/reporter.d.ts

@@ -0,0 +1,17 @@
+export declare const reporter: {
+  now(): number;
+  startTiming(): void;
+  getTimeSpan(): number;
+  success(message: string, ...args: any[]): void;
+  successTime(message: string, ...args: any[]): void;
+  info(message: string, ...args: any[]): void;
+  infoTime(message: string, ...args: any[]): void;
+  warn(message: string, ...args: any[]): void;
+  warnTime(message: string, ...args: any[]): void;
+  error(message: string, ...args: any[]): void;
+  verbose(message: string, ...args: any[]): void;
+  verboseTime(message: string, ...args: any[]): void;
+  panic(message: string, ...args: any[]): never;
+  panicOnBuild(message: string, ...args: any[]): void;
+  flushErrors(): void;
+};

package/src/types/portal/src/server/utils/watcher.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="node" />
+import * as chokidar from 'chokidar';
+import * as fs from 'fs';
+declare type WatchCb = (event: 'add' | 'change' | 'unlink', path: string, stats?: fs.Stats) => void;
+export declare class Watcher {
+  cwd: string;
+  private _readyPromise;
+  private listeners;
+  constructor(cwd: string);
+  watch(test: RegExp, cb: WatchCb): void;
+  emit(event: 'add' | 'change' | 'unlink', path: string, stats?: fs.Stats): void;
+  stop(): Promise<void>;
+  start(): void;
+  ready(): Promise<chokidar.FSWatcher>;
+}
+export {};

package/src/types/portal/src/server/utils/yaml.d.ts

@@ -0,0 +1 @@
+export declare function parseYaml<T = unknown>(raw: string): T;

package/src/types/portal/src/shared/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const RUNTIME_RESOURCES_DIR = 'runtime';
+export declare const REDOC_OVERVIEW_ITEM_ID = 'overview';
+export declare const PORTAL_CUSTOM_THEMES_FOLDER = '@theme';
+export declare const USER_THEME_ALIAS = '@theme';
+export declare const PUBLIC_STATIC_FOLDER = '/static';
+export declare enum FsErrors {
+  NotExist = 'ENOENT',
+}

package/src/types/portal/src/shared/types.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import type { PageProps } from '../server/store';
+export declare type ResolvedNavLinkItem = {
+  type: 'link';
+  link: string;
+  label: string;
+  items?: ResolvedNavItem[];
+  external?: boolean;
+  version?: string;
+  default?: string;
+  httpVerb?: string;
+  separatorLine?: boolean;
+  active?: boolean;
+};
+export declare type ResolvedNavGroupItem = {
+  type: 'group';
+  link?: string;
+  label: string;
+  items: ResolvedNavItem[];
+  version?: string;
+  default?: string;
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  active?: boolean;
+};
+export declare type ResolvedNavItem =
+  | ResolvedNavLinkItem
+  | ResolvedNavGroupItem
+  | {
+      type: 'separator';
+      label?: string;
+      separatorLine?: boolean;
+    }
+  | {
+      type: 'error';
+      label: string;
+    };
+export declare type ResolvedSidebar = ResolvedNavItem[];
+export interface PageData {
+  templateId: string;
+  sidebarId?: string;
+  dataDependencies?: string[];
+  props: PageProps;
+}
+export interface CachedPageData extends PageData {
+  Template: React.ComponentType<{
+    pageProps: PageProps;
+    resolvedDataDependencies?: Record<string, unknown>[];
+  }>;
+}
+export interface ResolvedPageData extends CachedPageData {
+  sidebar: ResolvedSidebar;
+  resolvedDataDependencies?: Record<string, unknown>[];
+}
+export declare enum MenuStyle {
+  Drilldown = 'drilldown',
+}
+export declare type NavItem = {
+  page?: string;
+  directory?: string;
+  group?: string;
+  label?: string;
+  href?: never;
+  items?: NavItem[];
+  separator?: string;
+  separatorLine?: boolean;
+  version?: string;
+  menuStyle?: MenuStyle;
+  external?: boolean;
+};
+export declare type RawNavItem = string | NavItem;
+export interface LogoConfig {
+  image?: string;
+  altText?: string;
+  link?: string;
+  favicon?: string;
+}

package/src/types/portal/src/shared/urls.d.ts

@@ -0,0 +1,7 @@
+export declare function getPageDataUrl(normalizedRoute: string): string;
+export declare function getClientPageDataUrl(normalizedRoute: string): string;
+export declare function getSidebarUrl(id: string): string;
+export declare function getSharedDataUrl(id: string): string;
+export declare const GLOBAL_DATA_URL = '/app-data.json';
+export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
+export declare function withPathPrefix(url: string): string;

package/src/types/portal/src/shared/utils.d.ts

@@ -0,0 +1,10 @@
+export declare const isLocalLink: (path: string) => boolean;
+/**
+ *
+ * @returns url with leading and without trailing slash or empty string, e.g. '/prefix'
+ */
+export declare function getPathPrefix(): string;
+export declare function normalizePathPrefix(prefix: string): string;
+export declare function addLeadingSlash(url: string): string;
+export declare function removeTrailingSlash(url: string): string;
+export declare function getGlobMatcher(glob: string, options?: {}): (file: string) => boolean;

package/src/ui/AlertIcon.tsx

@@ -0,0 +1,110 @@
+import React, { HTMLProps } from 'react';
+import styled from 'styled-components';
+
+interface IconProps extends HTMLProps<HTMLElement> {
+  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+}
+
+function Icon({ type, className }: IconProps) {
+  switch (type) {
+    case 'warning':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" />
+          <path d="M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" />
+          <circle cx="250.3" cy="342.1" r="25.3" />
+        </svg>
+      );
+    case 'success':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" />
+          <path d="M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" />
+          <path d="M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" />
+        </svg>
+      );
+    case 'danger':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" />
+          <path d="M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" />
+          <path d="M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" />
+        </svg>
+      );
+    case 'attention':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" />
+          <circle cx="250.3" cy="339.2" r="22.5" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" />
+          <path d="M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" />
+          <circle cx="250.3" cy="163.7" r="25.3" />
+        </svg>
+      );
+  }
+}
+
+export const AlertIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'ui/AlertIcon',
+}))`
+  position: absolute;
+  left: var(--alert-padding-horizontal);
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--alert-icon-size);
+  height: var(--alert-icon-size);
+  margin-right: var(--alert-padding-horizontal);
+  flex-shrink: 0;
+
+  fill: ${({ type }) => `var(--alert-${type}-icon-color)`};
+`;

package/src/ui/Arrow/Arrow.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ArrowProps {
+  direction?: string;
+}
+
+function directionToTransform({ direction }: ArrowProps) {
+  switch (direction) {
+    case 'up':
+      return 180;
+    case 'right':
+      return -90;
+    case 'left':
+      return 90;
+    default:
+      return 0;
+  }
+}
+
+const Icon = ({ className }: { className?: string }) => (
+  <span data-component-name="ui/Arrow/Arrow">
+    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 5" className={className}>
+      <path d="M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" />
+    </svg>
+  </span>
+);
+
+export const Arrow = styled(Icon)`
+  width: var(--sidebar-chevron-size);
+  height: var(--sidebar-chevron-size);
+  fill: var(--sidebar-chevron-color);
+  transform: rotate(${directionToTransform}deg);
+
+  vertical-align: middle;
+`;

package/src/ui/Background.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+import { Flex } from '@theme/ui/Flex';
+
+export const Background = styled(Flex).attrs(() => ({
+  'data-component-name': 'ui/Background',
+}))`
+  background: var(--navbar-color-background);
+  color: var(--color-primary-contrast);
+  font-family: var(--h-font-family);
+
+  a:not([role='button']),
+  a:not([role='button']):hover {
+    color: var(--color-primary-contrast);
+  }
+`;

package/src/ui/Box.tsx

@@ -0,0 +1,39 @@
+import {
+  space,
+  position,
+  flex,
+  textAlign,
+  color,
+  border,
+  layout,
+  SpaceProps,
+  LayoutProps,
+  TextAlignProps,
+  ColorProps,
+  PositionProps,
+  FlexProps,
+  BordersProps,
+} from 'styled-system';
+import styled from 'styled-components';
+
+export interface BoxProps
+  extends SpaceProps,
+    LayoutProps,
+    PositionProps,
+    FlexProps,
+    TextAlignProps,
+    ColorProps,
+    BordersProps {}
+
+export const Box = styled.div.attrs(() => ({
+  'data-component-name': 'ui/Box',
+}))<BoxProps>`
+  max-width: 100%;
+  ${space}
+  ${layout}
+  ${position}
+  ${flex}
+  ${textAlign}
+  ${color}
+  ${border}
+`;

package/src/ui/Button.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LinkProps } from 'react-router-dom';
+
+import { Button as RefDocsButton, ButtonProps } from '@theme/Button';
+import { Link } from '@portal/Link';
+
+const StyledButtonAsLink = RefDocsButton.withComponent(Link);
+
+export function Button(
+  props: ButtonProps & Partial<LinkProps<never>> & { ref?: any; external?: boolean },
+): JSX.Element {
+  if (props.to) {
+    return <StyledButtonAsLink {...props} role="button" data-component-name="ui/Button" />;
+  } else {
+    return (
+      <RefDocsButton {...(props as ButtonProps)} role="button" data-component-name="ui/Button" />
+    );
+  }
+}

package/src/ui/Dropdown.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { Version } from '@theme/types/portal';
+
+type DropdownProps = {
+  items: Version[];
+  activeItem: Version;
+};
+
+const Icon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+);
+
+const DropDownContainer = styled.div`
+  position: relative;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+`;
+
+const DropDownHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid #e4e7eb;
+  font-weight: 600;
+  color: var(--color-text-main);
+  background: var(--color-secondary-300);
+`;
+
+const DropDownList = styled.div`
+  position: absolute;
+  background: var(--color-secondary-300);
+  margin: 2px 20px 0 20px;
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid rgba(38, 50, 56, 0.2);
+  z-index: 9999;
+  left: 0;
+  right: 0;
+`;
+
+const IconWrapper = styled.span`
+  transition: transform 0.2s;
+  display: inline-block;
+  font-size: 0;
+  &.active {
+    transform: rotate(-180deg);
+  }
+`;
+
+const ListItem = styled.div`
+  background-color: var(--background-color);
+  padding: 0.4em 10px;
+  font-size: 1em;
+  color: var(--color-text-main);
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(38, 50, 56, 0.12);
+  }
+  &.active {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;
+
+const DropDownLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+  color: var(--color-text-main);
+`;
+
+export default function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const toggling = () => setIsOpen(!isOpen);
+  useEffect(() => {
+    const checkIfClickedOutside = (e: MouseEvent) => {
+      if (!(e.target instanceof HTMLElement)) {
+        return;
+      }
+
+      if (isOpen && ref.current && !ref.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', checkIfClickedOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', checkIfClickedOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <DropDownContainer ref={ref} data-component-name="ui/Dropdown">
+      <DropDownHeader onClick={toggling}>
+        {activeItem?.label || activeItem.version}
+        <IconWrapper className={isOpen ? 'active' : ''}>
+          <Icon />
+        </IconWrapper>
+      </DropDownHeader>
+      {isOpen && (
+        <DropDownList>
+          {items.map((item) => (
+            <ListItem
+              className={activeItem.version === item.version ? 'active' : ''}
+              onClick={toggling}
+              key={item?.link + item?.version}
+            >
+              <DropDownLink to={item?.link || '#'}>{item?.label || item.version}</DropDownLink>
+            </ListItem>
+          ))}
+        </DropDownList>
+      )}
+    </DropDownContainer>
+  );
+}

package/src/ui/Flex.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import { flexbox, FlexboxProps, width, WidthProps } from 'styled-system';
+
+import { Box } from '@theme/ui/Box';
+
+export interface FlexProps extends FlexboxProps, WidthProps {}
+
+export const Flex = styled(Box).attrs({ 'data-component-name': 'ui/Flex' })<FlexProps>`
+  display: flex;
+  ${flexbox}
+  ${width}
+`;
+
+export function FlexSection(props: React.PropsWithChildren<FlexProps>): JSX.Element {
+  return (
+    <Flex {...props} width={props.width || { xs: '90%', large: 910 }}>
+      {props.children}
+    </Flex>
+  );
+}