@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/src/core/utils/index.ts

@@ -0,0 +1,26 @@
+export * from '@redocly/theme/core/utils/clipboard-service';
+export * from '@redocly/theme/core/utils/css-variables';
+export * from '@redocly/theme/core/utils/highlight';
+export * from '@redocly/theme/core/utils/media-css';
+export * from '@redocly/theme/core/utils/theme-helpers';
+export * from '@redocly/theme/core/utils/class-names';
+export * from '@redocly/theme/core/utils/args-typecheck';
+export * from '@redocly/theme/core/utils/color';
+export * from '@redocly/theme/core/utils/urls';
+export * from '@redocly/theme/core/utils/js-utils';
+export * from '@redocly/theme/core/utils/tags-parser';
+export * from '@redocly/theme/core/utils/text-transform';
+export * from '@redocly/theme/core/utils/dom';
+export * from '@redocly/theme/core/utils/markdoc';
+export * from '@redocly/theme/core/utils/attribute-parser';
+export * from '@redocly/theme/core/utils/type-guards';
+export * from '@redocly/theme/core/utils/dom';
+export * from '@redocly/theme/core/utils/toc';
+export * from '@redocly/theme/core/utils/menu';
+export * from '@redocly/theme/core/utils/load-and-navigate';
+export * from '@redocly/theme/core/utils/get-scorecard-color-variable';
+export * from '@redocly/theme/core/utils/change-text-casing';
+export * from '@redocly/theme/core/utils/format-date-without-timezone';
+export * from '@redocly/theme/core/utils/details';
+export * from '@redocly/theme/core/utils/get-navbar-element';
+export * from '@redocly/theme/core/utils/with-load-progress';

package/src/core/utils/js-utils.ts

@@ -0,0 +1,25 @@
+export function findDeepFirst<T extends { items?: T[] }>(
+  list: T[],
+  cb: (item: T) => boolean,
+): T | undefined {
+  for (const item of list) {
+    if (cb(item) === true) {
+      return item;
+    }
+    if (item.items) {
+      const nestedRes = findDeepFirst(item.items, cb);
+      if (nestedRes !== undefined) return nestedRes;
+    }
+  }
+}
+
+export function toStringIfDefined(value: unknown): string | undefined {
+  return value == undefined ? undefined : String(value);
+}
+
+/**
+ * Returns true when the function executed in browser.
+ */
+export function isBrowser() {
+  return typeof window !== 'undefined' && 'HTMLElement' in window;
+}

package/src/core/utils/load-and-navigate.ts

@@ -0,0 +1,46 @@
+import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
+
+import { withLoadProgress } from '@redocly/theme/core/utils';
+
+export type HistoryOrigin = 'pm' | 'browser';
+
+let lastNavigatedPath;
+export async function loadAndNavigate(
+  navigate: NavigateFunction,
+  to: string,
+  origin: HistoryOrigin = 'browser',
+  options?: NavigateOptions,
+) {
+  lastNavigatedPath = to;
+  const { pathname, hash, search } = new URL(to, window.location.origin + window.location.pathname);
+
+  // use window-shared loader instead of importing to prevent circular import issue
+  const loader = (window as any)['__LOADER'];
+  const result = await withLoadProgress(loader.tryLoad(pathname));
+  // @ts-ignore
+  if (result?.redirectTo) {
+    // @ts-ignore
+    return loadAndNavigate(navigate, result.redirectTo, origin, options);
+  }
+
+  if (result && lastNavigatedPath === to) {
+    if (pathname !== window.location.pathname || search !== window.location.search) {
+      // origin is used to prevent infinite loop when navigating from post message (from wysiwyg)
+      navigate(
+        { pathname, search, hash },
+        { ...options, state: { origin }, unstable_flushSync: true },
+      );
+    }
+    // @ts-ignore
+    if (result.props?.disableAutoScroll) return;
+
+    if (hash) {
+      const el = document.getElementById(hash.slice(1));
+      if (el) {
+        el.scrollIntoView();
+      }
+    } else {
+      window.scrollTo(0, 0);
+    }
+  }
+}

package/src/core/utils/markdoc.ts

@@ -0,0 +1,5 @@
+import type { Tag } from '@markdoc/markdoc';
+
+export function isTag(value?: any): value is Tag {
+  return !!(value?.$$mdtype === 'Tag');
+}

package/src/core/utils/media-css.ts

@@ -0,0 +1,7 @@
+export type Breakpoints = {
+  small: `${number}px`;
+  medium: `${number}px`;
+  large: `${number}px`;
+};
+
+export const breakpoints: Breakpoints = { small: '700px', medium: '1050px', large: '1200px' };

package/src/core/utils/menu.ts

@@ -0,0 +1,123 @@
+import { withPathPrefix } from '@redocly/theme/core/utils/urls';
+
+import type { ResolvedNavItem, Version } from '@redocly/config';
+import type { Location } from 'react-router-dom';
+
+import { getPathnameForLocale } from '@redocly/theme/core/utils';
+import { type Locale, type TFunction, type ItemState } from '@redocly/theme/core/types';
+import { MenuItemType } from '@redocly/theme/core/constants';
+
+const TRANSLATION_KEYS = {
+  version: 'theme.mobileMenu.version',
+};
+
+export const mapNavbarItems = (
+  items: ResolvedNavItem[],
+  defaultLocale: string,
+  currentLocale: string,
+  locales: Locale[],
+  location: Location,
+): ItemState[] => {
+  return items.map(
+    (navItem) =>
+      ({
+        ...navItem,
+        ...(navItem.items && {
+          items: mapNavbarItems(navItem.items, defaultLocale, currentLocale, locales, location),
+        }),
+        ...('link' in navItem && { link: navItem.link || '/' }),
+        active:
+          'link' in navItem &&
+          isItemActive(navItem, defaultLocale, currentLocale, locales, location),
+        hasActiveSubItem: !!navItem.items?.find((item) =>
+          isItemActive(item, defaultLocale, currentLocale, locales, location),
+        ),
+      } as ItemState),
+  );
+};
+
+export const isItemActive = (
+  item: ResolvedNavItem,
+  defaultLocale: string,
+  currentLocale: string,
+  locales: Locale[],
+  location: Location,
+): boolean => {
+  const pathHash = location.pathname + location.hash;
+  const link = item.languageInsensitive
+    ? item.link || ''
+    : getPathnameForLocale(item.link || '/', defaultLocale, currentLocale, locales);
+
+  return pathHash === withPathPrefix(link);
+};
+
+export const buildLanguagesGroup = (
+  locales: Locale[],
+  defaultLocale: string,
+  currentLocale: string,
+): ResolvedNavItem | undefined => {
+  if (locales.length < 2) {
+    return;
+  }
+  const locale = locales.find((l) => l.code === currentLocale);
+  return {
+    type: 'group',
+    label: locale?.name || locale?.code,
+    items: locales
+      .filter((locale) => locale.code !== currentLocale)
+      .map((locale) => {
+        const newLangPathname = withPathPrefix(
+          getPathnameForLocale(location.pathname, defaultLocale, locale.code, locales),
+        );
+        const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+        return {
+          type: 'link',
+          label: locale.name || locale.code || '',
+          link: newUrlWithLanguage,
+          active: false,
+          hasActiveSubItem: false,
+          languageInsensitive: true,
+        };
+      }),
+  };
+};
+
+export const buildVersionSection = (
+  translate: TFunction,
+  versions: Version[],
+  activeVersion?: Version,
+): ResolvedNavItem[] => {
+  return [
+    {
+      type: 'separator',
+      label: translate(TRANSLATION_KEYS.version, 'Version'),
+    },
+    {
+      type: 'group',
+      label: activeVersion?.label,
+      items: versions
+        .filter((version) => !version.active)
+        .map((version) => {
+          return {
+            type: 'link',
+            label: version.label,
+            link: version.link,
+            active: false,
+            hasActiveSubItem: false,
+          };
+        }),
+    },
+  ];
+};
+
+export function getMenuItemType(item: ItemState): MenuItemType {
+  if (item.type === MenuItemType.Separator) {
+    return MenuItemType.Separator;
+  } else if (item.menuStyle === 'drilldown') {
+    return MenuItemType.DrillDown;
+  } else if (item.items?.length || (item.type === MenuItemType.Group && item.items?.length)) {
+    return MenuItemType.Group;
+  } else if (item.httpVerb) {
+    return MenuItemType.Operation;
+  } else return MenuItemType.Default;
+}

package/src/core/utils/toc.ts

@@ -0,0 +1,42 @@
+import type { MdHeading } from '@redocly/theme/core/types';
+
+export function getDisplayedHeadings(
+  headings: Array<MdHeading | null> | null | undefined,
+  tocDepth: number,
+): Array<MdHeading | null> {
+  if (!headings) {
+    return [];
+  }
+  return headings.filter((heading, idx) => {
+    if (!heading) {
+      return false;
+    }
+    if (idx === 0 && heading.depth === 1) {
+      return false;
+    }
+    return !(heading.depth && heading.depth > tocDepth);
+  });
+}
+
+export function getDisplayedHeadingsIds(
+  headings: Array<MdHeading | null> | null | undefined,
+): Array<string | undefined> {
+  if (!headings) {
+    return [];
+  }
+  return headings.map((header) => header?.id);
+}
+
+export function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number {
+  if (!headings || headings.length === 0) {
+    return 1;
+  }
+  let depth = null;
+  for (const heading of headings) {
+    if (!heading) continue;
+    if (depth === null || depth > heading.depth) {
+      depth = heading.depth;
+    }
+  }
+  return depth ?? 1;
+}

package/src/core/utils/type-guards.ts

@@ -0,0 +1,19 @@
+export function isUndefined<T>(value: T | undefined): value is undefined {
+  return value === undefined;
+}
+
+export function isNull<T>(value: T | null): value is null {
+  return value === null;
+}
+
+export function isString<T>(value: T | string): value is string {
+  return typeof value === 'string';
+}
+
+export function isNotNull<T>(value: T): value is NonNullable<T> {
+  return !isNull(value);
+}
+
+export const isObject = (item: unknown): item is object => {
+  return isNotNull(item) && typeof item === 'object';
+};

package/src/core/utils/urls.ts

@@ -0,0 +1,123 @@
+import type { Locale } from '@redocly/theme/core/types';
+
+import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
+
+export function combineUrls(baseURL: string, ...relativeURLs: string[]) {
+  let res = baseURL;
+  for (let relativeURL of relativeURLs) {
+    res = relativeURL
+      ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
+      : res;
+  }
+
+  return res;
+}
+
+export function withPathPrefix(url: string) {
+  return combineUrls(getPathPrefix(), url);
+}
+
+export function withoutPathPrefix(pathname: string) {
+  const pathPrefix = getPathPrefix();
+  return pathPrefix && pathname.startsWith(pathPrefix)
+    ? pathname.slice(pathPrefix.length)
+    : pathname;
+}
+
+export function withoutHash(url: undefined | null): undefined;
+export function withoutHash(url: string): string;
+export function withoutHash(url: string | undefined): string | undefined;
+export function withoutHash(url: string | undefined | null): string | undefined {
+  if (url == null) return undefined;
+  return url.split('#')[0];
+}
+
+export function getPathPrefix() {
+  if (process.env.REDOCLY_PREFIX_PATHS) {
+    return normalizePathPrefix(process.env.REDOCLY_PREFIX_PATHS);
+  }
+
+  return '';
+}
+
+export function normalizePathPrefix(prefix: string) {
+  const withoutTrailing = removeTrailingSlash(prefix);
+  return addLeadingSlash(withoutTrailing === '.' ? '' : withoutTrailing);
+}
+
+export function addLeadingSlash(url: string): string {
+  return url.startsWith('/') ? url : `/${url}`;
+}
+
+export function removeTrailingSlash(url: string): string {
+  return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+}
+
+export function removeLeadingSlash(url: string): string {
+  return url.startsWith('/') ? url.substring(1) : url;
+}
+
+export function isPathInFolder(child: string, parent: string): boolean {
+  parent = removeTrailingSlash(removeLeadingSlash(slash(parent)));
+  child = removeTrailingSlash(removeLeadingSlash(slash(child)));
+  return child === parent || child.startsWith(parent + '/');
+}
+
+/**
+ * Convert Windows backslash paths to slash paths: foo\\bar ➔ foo/bar
+ *
+ * @param  path
+ * @return  slashed path
+ */
+export function slash(path: string): string {
+  const isExtendedLengthPath = /^\\\\\?\\/.test(path);
+
+  if (isExtendedLengthPath) {
+    return path;
+  }
+
+  return path.replace(/\\/g, `/`);
+}
+
+export function addTrailingSlash(url: string): string {
+  return url.endsWith('/') ? url : `${url}/`;
+}
+
+/**
+ * Adds locale to pathname, or replaces current locale in pathname with a new one
+ * Also handles path prefix
+ */
+export function getPathnameForLocale(
+  originalPathname: string,
+  defaultLocale: string,
+  newLocale: string,
+  allLocales: Locale[],
+) {
+  const pathnameWithoutPrefix = withoutPathPrefix(originalPathname);
+
+  const currentLocale = getLocaleFromPathname(originalPathname, defaultLocale, allLocales);
+
+  if (currentLocale === newLocale) {
+    return pathnameWithoutPrefix;
+  }
+
+  const pathnameWithoutLocale =
+    currentLocale === defaultLocale
+      ? pathnameWithoutPrefix
+      : pathnameWithoutPrefix.slice(currentLocale.length + 1);
+
+  const newLocalePrefix = newLocale === defaultLocale ? '' : '/' + newLocale;
+
+  return `${newLocalePrefix.toLowerCase()}${pathnameWithoutLocale}`;
+}
+
+export function getLocaleFromPathname(
+  pathname: string,
+  defaultLocale: string = DEFAULT_LOCALE_PLACEHOLDER,
+  allLocales: Locale[] = [],
+) {
+  const maybeLocale = withoutPathPrefix(pathname)?.split('/')[1];
+  const locale = allLocales.find((locale) => locale.code.toLowerCase() === maybeLocale);
+
+  return locale?.code || defaultLocale;
+}

package/src/core/utils/with-load-progress.ts

@@ -0,0 +1,25 @@
+import nprogress from 'nprogress';
+
+nprogress.configure({
+  trickleSpeed: 100,
+  template: '<div class="bar" role="bar"><div class="peg"></div></div>',
+});
+
+// Only the last caller should be able to call nprogress.done()
+let lastCalledBy: Symbol;
+
+export async function withLoadProgress<T>(loadTarget: Promise<T>): Promise<T> {
+  const callIdentifier = Symbol();
+  lastCalledBy = callIdentifier;
+
+  // Cancel any existing progress and restart
+  nprogress.done();
+  nprogress.start();
+
+  return loadTarget.finally(() => {
+    if (lastCalledBy === callIdentifier) {
+      nprogress.done();
+      nprogress.remove();
+    }
+  });
+}

package/src/icons/AddIcon/AddIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8.5 7.5V4H7.5V7.5H4V8.5H7.5V12H8.5V8.5H12V7.5H8.5Z" />
+  </svg>
+);
+
+export const AddIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AddIcon/AddIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ArrowLeftIcon/ArrowLeftIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M7 13L7.705 12.295L3.915 8.5H14V7.5H3.915L7.705 3.705L7 3L2 8L7 13Z" />
+  </svg>
+);
+
+export const ArrowLeftIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ArrowLeftIcon/ArrowLeftIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ArrowRightIcon/ArrowRightIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M9 3L8.285 3.6965L12.075 7.5H2V8.5H12.075L8.285 12.2865L9 13L14 8L9 3Z" />
+  </svg>
+);
+
+export const ArrowRightIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ArrowRightIcon/ArrowRightIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ArrowUpRightIcon/ArrowUpRightIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M5 3V4H11.295L3 12.295L3.705 13L12 4.705V11H13V3H5Z" />
+  </svg>
+);
+
+export const ArrowUpRightIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ArrowUpRightIcon/ArrowUpRightIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/BareMetalServerIcon/BareMetalServerIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M4.5 3.5C4.77614 3.5 5 3.27614 5 3C5 2.72386 4.77614 2.5 4.5 2.5C4.22386 2.5 4 2.72386 4 3C4 3.27614 4.22386 3.5 4.5 3.5Z" />
+    <path d="M13 5H3C2.73487 4.99972 2.48068 4.89428 2.2932 4.7068C2.10572 4.51932 2.00028 4.26513 2 4V2C2.00028 1.73487 2.10572 1.48068 2.2932 1.2932C2.48068 1.10572 2.73487 1.00028 3 1H13C13.2651 1.00028 13.5193 1.10572 13.7068 1.2932C13.8943 1.48068 13.9997 1.73487 14 2V4C13.9997 4.26513 13.8943 4.51932 13.7068 4.7068C13.5193 4.89428 13.2651 4.99972 13 5ZM3 2V4H13V2H3Z" />
+    <path d="M4.5 8.5C4.77614 8.5 5 8.27614 5 8C5 7.72386 4.77614 7.5 4.5 7.5C4.22386 7.5 4 7.72386 4 8C4 8.27614 4.22386 8.5 4.5 8.5Z" />
+    <path d="M13 10H3C2.73487 9.99972 2.48068 9.89428 2.2932 9.7068C2.10572 9.51932 2.00028 9.26513 2 9V7C2.00028 6.73487 2.10572 6.48068 2.2932 6.2932C2.48068 6.10572 2.73487 6.00028 3 6H13C13.2651 6.00028 13.5193 6.10572 13.7068 6.2932C13.8943 6.48068 13.9997 6.73487 14 7V9C13.9997 9.26513 13.8943 9.51932 13.7068 9.7068C13.5193 9.89428 13.2651 9.99972 13 10ZM3 7V9H13V7H3Z" />
+    <path d="M4.5 13.5C4.77614 13.5 5 13.2761 5 13C5 12.7239 4.77614 12.5 4.5 12.5C4.22386 12.5 4 12.7239 4 13C4 13.2761 4.22386 13.5 4.5 13.5Z" />
+    <path d="M13 15H3C2.73487 14.9997 2.48068 14.8943 2.2932 14.7068C2.10572 14.5193 2.00028 14.2651 2 14V12C2.00028 11.7349 2.10572 11.4807 2.2932 11.2932C2.48068 11.1057 2.73487 11.0003 3 11H13C13.2651 11.0003 13.5193 11.1057 13.7068 11.2932C13.8943 11.4807 13.9997 11.7349 14 12V14C13.9997 14.2651 13.8943 14.5193 13.7068 14.7068C13.5193 14.8943 13.2651 14.9997 13 15ZM3 12V14H13V12H3Z" />
+  </svg>
+);
+
+export const BareMetalServerIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/BareMetalServerIcon/BareMetalServerIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/BookmarkAddIcon/BookmarkAddIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M12 8V13.3757L8 11.3525L4 13.374V2H9V1H4C3.73478 1 3.48043 1.10536 3.29289 1.29289C3.10536 1.48043 3 1.73478 3 2V15L8 12.4732L13 15V8H12Z" />
+    <path d="M13 3V1H12V3H10V4H12V6H13V4H15V3H13Z" />
+  </svg>
+);
+
+export const BookmarkAddIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/BookmarkAddIcon/BookmarkAddIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CharacterIcon/CharacterIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13.5 7.5H11C10.7349 7.49964 10.4807 7.39417 10.2933 7.20671C10.1058 7.01925 10.0004 6.76511 10 6.5V3.5C10.0003 3.23488 10.1058 2.9807 10.2932 2.79323C10.4807 2.60576 10.7349 2.5003 11 2.5H13.5V3.5H11V6.5H13.5V7.5Z" />
+    <path d="M8 2.5H6V0.5H5V7.5H8C8.26511 7.49964 8.51925 7.39417 8.70671 7.20671C8.89417 7.01925 8.99964 6.76511 9 6.5V3.5C8.9997 3.23488 8.89424 2.9807 8.70677 2.79323C8.5193 2.60576 8.26512 2.5003 8 2.5ZM6 6.5V3.5H8V6.5H6Z" />
+    <path d="M3 0.5H1C0.734865 0.500265 0.480665 0.605707 0.293186 0.793186C0.105707 0.980665 0.000264738 1.23486 0 1.5V7.5H1V5H3V7.5H4V1.5C3.99974 1.23486 3.89429 0.980665 3.70681 0.793186C3.51934 0.605707 3.26514 0.500265 3 0.5ZM1 4V1.5H3V4H1Z" />
+  </svg>
+);
+
+export const CharacterIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CharacterIcon/CharacterIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;