@redocly/theme 0.70.0-next.9 → 0.70.0

package/src/icons/LinkIcon/LinkIcon.tsx

@@ -0,0 +1,37 @@
+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="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z"
+      fill="var(--layer-color)"
+    />
+    <path
+      d="M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z"
+      fill="var(--icon-color-primary)"
+    />
+  </svg>
+);
+
+export const LinkIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/LinkIcon/LinkIcon',
+})`
+  path:last-of-type {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '20px'};
+  width: ${({ size }) => size || '20px'};
+`;

package/src/icons/LinkIcon/LinkIconSymbol.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const LINK_ICON_SYMBOL_ID = 'redocly-link-icon';
+
+/**
+ * The link icon drawing as a hidden SVG symbol, which every `SharedLinkIcon` refers to. Render it
+ * once per page that shows a `SharedLinkIcon`; without it the icon is empty.
+ */
+export function LinkIconSymbol(): JSX.Element {
+  return (
+    <svg
+      data-component-name="icons/LinkIcon/LinkIconSymbol"
+      display="none"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <symbol id={LINK_ICON_SYMBOL_ID} viewBox="0 0 20 20">
+        <path
+          d="M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z"
+          fill="var(--link-icon-bg-color, var(--layer-color))"
+        />
+        <path d="M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z" />
+      </symbol>
+    </svg>
+  );
+}
+
+/**
+ * `LinkIcon` drawn from the page's `LinkIconSymbol`, so a page with many of them carries one copy.
+ * `color` fills the glyph; `--link-icon-bg-color` overrides the background.
+ */
+export function SharedLinkIcon({ color, size = '20px', ...props }: IconProps): JSX.Element {
+  return (
+    <svg
+      data-component-name="icons/LinkIcon/SharedLinkIcon"
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill={getCssColorVariable(color)}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <use href={`#${LINK_ICON_SYMBOL_ID}`} />
+    </svg>
+  );
+}

package/src/icons/LogoutIcon/LogoutIcon.tsx

@@ -0,0 +1,24 @@
+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="M3 15H9C9.26512 14.9997 9.5193 14.8942 9.70677 14.7068C9.89424 14.5193 9.9997 14.2651 10 14V12.5H9V14H3V2H9V3.5H10V2C9.9997 1.73488 9.89424 1.4807 9.70677 1.29323C9.5193 1.10576 9.26512 1.0003 9 1H3C2.73488 1.0003 2.4807 1.10576 2.29323 1.29323C2.10576 1.4807 2.0003 1.73488 2 2V14C2.0003 14.2651 2.10576 14.5193 2.29323 14.7068C2.4807 14.8942 2.73488 14.9997 3 15Z" />
+    <path d="M10.293 10.293L12.086 8.5H5V7.5H12.086L10.293 5.707L11 5L14 8L11 11L10.293 10.293Z" />
+  </svg>
+);
+
+export const LogoutIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/LogoutIcon/LogoutIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MagicWandIcon/MagicWandIcon.tsx

@@ -0,0 +1,26 @@
+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 12.25 12.2494" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.9937 9.62499L4.37501 2.00632C4.20836 1.84719 3.98679 1.7584 3.75636 1.7584C3.52594 1.7584 3.30437 1.84719 3.13772 2.00632L2.00634 3.1377C1.84252 3.30191 1.75051 3.52439 1.75051 3.75634C1.75051 3.9883 1.84252 4.21078 2.00634 4.37499L9.62457 11.9937C9.7888 12.1575 10.0113 12.2494 10.2432 12.2494C10.4752 12.2494 10.6976 12.1575 10.8619 11.9937L11.9937 10.8621C12.0749 10.7808 12.1394 10.6844 12.1834 10.5782C12.2274 10.4721 12.25 10.3583 12.25 10.2434C12.25 10.1285 12.2274 10.0147 12.1834 9.90859C12.1394 9.80244 12.0749 9.70622 11.9937 9.62499ZM2.62501 3.75632L3.75634 2.62499L5.94384 4.81249L4.81221 5.94426L2.62471 3.75676L2.62501 3.75632ZM10.2432 11.375L5.43074 6.56293L6.56251 5.43116L11.375 10.2437L10.2432 11.375Z" />
+    <path d="M0.875027 5.24999L3.56734e-05 6.12498L0.875027 6.99997L1.75002 6.12498L0.875027 5.24999Z" />
+    <path d="M6.12503 8.20979e-06L5.25004 0.875L6.12503 1.74999L7.00002 0.875L6.12503 8.20979e-06Z" />
+    <path d="M0.874992 0L0 0.874992L0.874992 1.74998L1.74998 0.874992L0.874992 0Z" />
+  </svg>
+);
+
+export const MagicWandIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MagicWandIcon/MagicWandIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+`;

package/src/icons/MarkdownFullIcon/MarkdownFullIcon.tsx

@@ -0,0 +1,24 @@
+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="M15.2308 4.17188C15.2308 3.95614 15.0586 3.78125 14.8462 3.78125H1.15385C0.941429 3.78125 0.769231 3.95614 0.769231 4.17188V11.8281C0.769231 12.0439 0.941429 12.2188 1.15385 12.2188H14.8462C15.0586 12.2188 15.2308 12.0439 15.2308 11.8281V4.17188ZM16 11.8281C16 12.4753 15.4834 13 14.8462 13H1.15385C0.516595 13 0 12.4753 0 11.8281V4.17188C0 3.52467 0.516595 3 1.15385 3H14.8462C15.4834 3 16 3.52467 16 4.17188V11.8281Z" />
+    <path d="M2.30769 10.6562V5.34375H3.84615L5.38462 7.29688L6.92308 5.34375H8.46154V10.6562H6.92308V7.60938L5.38462 9.5625L3.84615 7.60938V10.6562H2.30769ZM11.9231 10.6562L9.61539 8.07812H11.1538V5.34375H12.6923V8.07812H14.2308L11.9231 10.6562Z" />
+  </svg>
+);
+
+export const MarkdownFullIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MarkdownFullIcon/MarkdownFullIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MaximizeIcon/MaximizeIcon.tsx

@@ -0,0 +1,24 @@
+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="M10 1V2H13.293L9 6.291L9.707 7L14 2.707V6H15V1H10Z" />
+    <path d="M7 9.708L6.296 9L2 13.293V10H1V15H6V14H2.707L7 9.708Z" />
+  </svg>
+);
+
+export const MaximizeIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MaximizeIcon/MaximizeIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MenuIcon/MenuIcon.tsx

@@ -0,0 +1,27 @@
+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
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.5 3.5H14.5V4.5H1.5V3.5ZM1.5 7.5H14.5V8.5H1.5V7.5ZM1.5 11.5H14.5V12.5H1.5V11.5Z"
+    />
+  </svg>
+);
+
+export const MenuIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MenuIcon/MenuIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MinimizeIcon/MinimizeIcon.tsx

@@ -0,0 +1,24 @@
+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="M2 9V10H5.293L1 14.291L1.707 15L6 10.707V14H7V9H2Z" />
+    <path d="M15 1.708L14.296 1L10 5.293V2H9V7H14V6H10.707L15 1.708Z" />
+  </svg>
+);
+
+export const MinimizeIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MinimizeIcon/MinimizeIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MobileSidebarIcon/MobileSidebarIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25px"
+    height="25px"
+    viewBox="0 0 294.842 294.842"
+    {...props}
+  >
+    <path d="M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z" />
+    <path d="M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z" />
+    <path d="M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z" />
+    <path d="M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z" />
+    <path d="M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z" />
+    <path d="M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z" />
+  </svg>
+);
+
+export const MobileSidebarIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MobileSidebarIcon/MobileSidebarIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MoleculesIcon/MoleculesIcon.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...props}>
+    <path d="M13.625 11.375C13.2277 11.3769 12.8386 11.4878 12.5 11.6956L10.7619 9.95188C11.1663 9.38137 11.3835 8.69932 11.3835 8C11.3835 7.30068 11.1663 6.61863 10.7619 6.04813L12.5 4.30438C12.8386 4.51216 13.2277 4.62306 13.625 4.625C14.07 4.625 14.505 4.49304 14.875 4.24581C15.245 3.99857 15.5334 3.64717 15.7037 3.23604C15.874 2.8249 15.9186 2.3725 15.8318 1.93605C15.745 1.49959 15.5307 1.09868 15.216 0.784011C14.9013 0.469343 14.5004 0.255051 14.064 0.168234C13.6275 0.0814174 13.1751 0.125975 12.764 0.296272C12.3528 0.466569 12.0014 0.754957 11.7542 1.12497C11.507 1.49498 11.375 1.92999 11.375 2.375C11.3769 2.77227 11.4878 3.1614 11.6956 3.5L9.95188 5.23813C9.38137 4.83369 8.69932 4.61645 8 4.61645C7.30068 4.61645 6.61863 4.83369 6.04813 5.23813L4.30438 3.5C4.51216 3.1614 4.62306 2.77227 4.625 2.375C4.625 1.92999 4.49304 1.49498 4.24581 1.12497C3.99857 0.754957 3.64717 0.466569 3.23604 0.296272C2.8249 0.125975 2.3725 0.0814174 1.93605 0.168234C1.49959 0.255051 1.09868 0.469343 0.784011 0.784011C0.469343 1.09868 0.255051 1.49959 0.168234 1.93605C0.0814174 2.3725 0.125975 2.8249 0.296272 3.23604C0.466569 3.64717 0.754957 3.99857 1.12497 4.24581C1.49498 4.49304 1.92999 4.625 2.375 4.625C2.77227 4.62306 3.1614 4.51216 3.5 4.30438L5.23813 6.04813C4.83369 6.61863 4.61645 7.30068 4.61645 8C4.61645 8.69932 4.83369 9.38137 5.23813 9.95188L3.5 11.6956C3.1614 11.4878 2.77227 11.3769 2.375 11.375C1.92999 11.375 1.49498 11.507 1.12497 11.7542C0.754957 12.0014 0.466569 12.3528 0.296272 12.764C0.125975 13.1751 0.0814174 13.6275 0.168234 14.064C0.255051 14.5004 0.469343 14.9013 0.784011 15.216C1.09868 15.5307 1.49959 15.745 1.93605 15.8318C2.3725 15.9186 2.8249 15.874 3.23604 15.7037C3.64717 15.5334 3.99857 15.245 4.24581 14.875C4.49304 14.505 4.625 14.07 4.625 13.625C4.62306 13.2277 4.51216 12.8386 4.30438 12.5L6.04813 10.7619C6.61863 11.1663 7.30068 11.3835 8 11.3835C8.69932 11.3835 9.38137 11.1663 9.95188 10.7619L11.6956 12.5C11.4878 12.8386 11.3769 13.2277 11.375 13.625C11.375 14.07 11.507 14.505 11.7542 14.875C12.0014 15.245 12.3528 15.5334 12.764 15.7037C13.1751 15.874 13.6275 15.9186 14.064 15.8318C14.5004 15.745 14.9013 15.5307 15.216 15.216C15.5307 14.9013 15.745 14.5004 15.8318 14.064C15.9186 13.6275 15.874 13.1751 15.7037 12.764C15.5334 12.3528 15.245 12.0014 14.875 11.7542C14.505 11.507 14.07 11.375 13.625 11.375ZM13.625 1.25C13.8475 1.25 14.065 1.31598 14.25 1.4396C14.435 1.56321 14.5792 1.73892 14.6644 1.94448C14.7495 2.15005 14.7718 2.37625 14.7284 2.59448C14.685 2.81271 14.5778 3.01316 14.4205 3.1705C14.2632 3.32783 14.0627 3.43498 13.8445 3.47838C13.6262 3.52179 13.4 3.49951 13.1945 3.41437C12.9889 3.32922 12.8132 3.18502 12.6896 3.00002C12.566 2.81501 12.5 2.59751 12.5 2.375C12.5 2.07663 12.6185 1.79048 12.8295 1.57951C13.0405 1.36853 13.3266 1.25 13.625 1.25ZM1.25 2.375C1.25 2.1525 1.31598 1.93499 1.4396 1.74998C1.56321 1.56498 1.73892 1.42078 1.94448 1.33564C2.15005 1.25049 2.37625 1.22821 2.59448 1.27162C2.81271 1.31503 3.01316 1.42217 3.1705 1.57951C3.32783 1.73684 3.43498 1.9373 3.47838 2.15552C3.52179 2.37375 3.49951 2.59995 3.41437 2.80552C3.32922 3.01109 3.18502 3.18679 3.00002 3.3104C2.81501 3.43402 2.59751 3.5 2.375 3.5C2.07663 3.5 1.79048 3.38147 1.57951 3.1705C1.36853 2.95952 1.25 2.67337 1.25 2.375ZM2.375 14.75C2.1525 14.75 1.93499 14.684 1.74998 14.5604C1.56498 14.4368 1.42078 14.2611 1.33564 14.0555C1.25049 13.85 1.22821 13.6238 1.27162 13.4055C1.31503 13.1873 1.42217 12.9868 1.57951 12.8295C1.73684 12.6722 1.9373 12.565 2.15552 12.5216C2.37375 12.4782 2.59995 12.5005 2.80552 12.5856C3.01109 12.6708 3.18679 12.815 3.3104 13C3.43402 13.185 3.5 13.4025 3.5 13.625C3.5 13.9234 3.38147 14.2095 3.1705 14.4205C2.95952 14.6315 2.67337 14.75 2.375 14.75ZM8 10.25C7.55499 10.25 7.11998 10.118 6.74997 9.87081C6.37996 9.62357 6.09157 9.27217 5.92127 8.86104C5.75097 8.4499 5.70642 7.99751 5.79323 7.56105C5.88005 7.12459 6.09434 6.72368 6.40901 6.40901C6.72368 6.09434 7.12459 5.88005 7.56105 5.79323C7.99751 5.70642 8.4499 5.75097 8.86104 5.92127C9.27217 6.09157 9.62357 6.37996 9.87081 6.74997C10.118 7.11998 10.25 7.55499 10.25 8C10.25 8.59674 10.0129 9.16903 9.59099 9.59099C9.16903 10.0129 8.59674 10.25 8 10.25ZM13.625 14.75C13.4025 14.75 13.185 14.684 13 14.5604C12.815 14.4368 12.6708 14.2611 12.5856 14.0555C12.5005 13.85 12.4782 13.6238 12.5216 13.4055C12.565 13.1873 12.6722 12.9868 12.8295 12.8295C12.9868 12.6722 13.1873 12.565 13.4055 12.5216C13.6238 12.4782 13.85 12.5005 14.0555 12.5856C14.2611 12.6708 14.4368 12.815 14.5604 13C14.684 13.185 14.75 13.4025 14.75 13.625C14.75 13.9234 14.6315 14.2095 14.4205 14.4205C14.2095 14.6315 13.9234 14.75 13.625 14.75Z" />
+  </svg>
+);
+
+export const MoleculesIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MoleculesIcon/MoleculesIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/MoonIcon/MoonIcon.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="M6.75126 2.7068C6.52204 3.68541 6.49085 4.69999 6.65953 5.69083C6.82821 6.68168 7.19334 7.62878 7.73346 8.47643C8.27357 9.32407 8.97776 10.0551 9.80458 10.6266C10.6314 11.1981 11.5642 11.5984 12.548 11.8041C12.0307 12.3392 11.4112 12.765 10.7263 13.0561C10.0413 13.3472 9.30482 13.4977 8.56056 13.4987C8.49131 13.4987 8.42146 13.5013 8.35166 13.4987C7.05599 13.4529 5.81731 12.9547 4.85075 12.0906C3.88418 11.2265 3.25081 10.0512 3.06063 8.76875C2.87044 7.48629 3.13547 6.17773 3.80967 5.07034C4.48387 3.96295 5.52466 3.12669 6.75126 2.7068ZM7.49001 1.5C7.46074 1.50005 7.43153 1.50266 7.40271 1.5078C5.81059 1.79059 4.37942 2.65251 3.38485 3.92753C2.39029 5.20254 1.90269 6.80048 2.01597 8.41355C2.12925 10.0266 2.8354 11.5407 3.9984 12.6642C5.1614 13.7877 6.69899 14.4412 8.31501 14.4986C8.39706 14.5016 8.47911 14.4986 8.56046 14.4986C9.60987 14.4992 10.644 14.2471 11.5754 13.7636C12.5068 13.2801 13.308 12.5794 13.9115 11.7208C13.9604 11.6469 13.9889 11.5613 13.9943 11.4728C13.9996 11.3842 13.9815 11.2958 13.9418 11.2165C13.902 11.1372 13.8421 11.0698 13.7681 11.021C13.694 10.9722 13.6084 10.9438 13.5198 10.9387C12.5209 10.851 11.5555 10.5349 10.6983 10.0146C9.84106 9.49439 9.11494 8.784 8.57605 7.93837C8.03716 7.09274 7.69993 6.13452 7.59045 5.13777C7.48096 4.14102 7.60213 3.13245 7.94461 2.19C7.97375 2.1146 7.98445 2.03332 7.97582 1.95295C7.96719 1.87257 7.93949 1.79542 7.89501 1.72792C7.85054 1.66042 7.79058 1.60452 7.72014 1.56487C7.64969 1.52523 7.57079 1.50299 7.49001 1.5Z" />
+  </svg>
+);
+
+export const MoonIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/MoonIcon/MoonIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NavaidMilitaryIcon/NavaidMilitaryIcon.tsx

@@ -0,0 +1,43 @@
+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) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8 15C6.61553 15 5.26216 14.5895 4.11101 13.8203C2.95987 13.0511 2.06266 11.9579 1.53285 10.6788C1.00303 9.3997 0.86441 7.99224 1.13451 6.63437C1.4046 5.2765 2.07129 4.02922 3.05026 3.05026C4.02922 2.07129 5.2765 1.4046 6.63437 1.13451C7.99224 0.86441 9.3997 1.00303 10.6788 1.53285C11.9579 2.06266 13.0511 2.95987 13.8203 4.11101C14.5895 5.26216 15 6.61553 15 8C14.9979 9.85588 14.2597 11.6351 12.9474 12.9474C11.6351 14.2597 9.85588 14.9979 8 15ZM8 2C6.81332 2 5.65328 2.3519 4.66658 3.01119C3.67989 3.67047 2.91085 4.60755 2.45673 5.7039C2.0026 6.80026 1.88378 8.00666 2.11529 9.17054C2.3468 10.3344 2.91825 11.4035 3.75736 12.2426C4.59648 13.0818 5.66558 13.6532 6.82946 13.8847C7.99335 14.1162 9.19975 13.9974 10.2961 13.5433C11.3925 13.0892 12.3295 12.3201 12.9888 11.3334C13.6481 10.3467 14 9.18669 14 8C13.9982 6.40926 13.3655 4.88419 12.2406 3.75936C11.1158 2.63454 9.59075 2.00182 8 2Z"
+        fill="#1A1C21"
+      />
+      <path
+        d="M8 12C7.20888 12 6.43552 11.7654 5.77772 11.3259C5.11993 10.8864 4.60724 10.2616 4.30449 9.53074C4.00173 8.79983 3.92252 7.99557 4.07686 7.21964C4.2312 6.44372 4.61217 5.73099 5.17158 5.17158C5.73099 4.61217 6.44372 4.2312 7.21964 4.07686C7.99557 3.92252 8.79983 4.00173 9.53074 4.30449C10.2616 4.60724 10.8864 5.11993 11.3259 5.77772C11.7654 6.43552 12 7.20888 12 8C11.9988 9.0605 11.577 10.0772 10.8271 10.8271C10.0772 11.577 9.0605 11.9988 8 12ZM8 5C7.40666 5 6.82664 5.17595 6.33329 5.50559C5.83994 5.83524 5.45543 6.30377 5.22836 6.85195C5.0013 7.40013 4.94189 8.00333 5.05765 8.58527C5.1734 9.16722 5.45913 9.70177 5.87868 10.1213C6.29824 10.5409 6.83279 10.8266 7.41473 10.9424C7.99668 11.0581 8.59988 10.9987 9.14805 10.7716C9.69623 10.5446 10.1648 10.1601 10.4944 9.66671C10.8241 9.17337 11 8.59335 11 8C10.9991 7.20463 10.6828 6.44208 10.1203 5.87966C9.55793 5.31725 8.79538 5.00089 8 5Z"
+        fill="#1A1C21"
+      />
+      <path
+        d="M8 9C8.55229 9 9 8.55229 9 8C9 7.44772 8.55229 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9Z"
+        fill="#1A1C21"
+      />
+    </svg>
+  );
+};
+
+export const NavaidMilitaryIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/NavaidMilitaryIcon/NavaidMilitaryIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NetworkIcon/NetworkIcon.tsx

@@ -0,0 +1,31 @@
+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
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    {...props}
+  >
+    <rect width="18" height="18" />
+    <path d="M16.3125 13.6036V4.39644C16.9659 4.16323 17.4375 3.54471 17.4375 2.8125C17.4375 1.88196 16.6805 1.125 15.75 1.125C14.8195 1.125 14.0625 1.88196 14.0625 2.8125C14.0625 3.03278 14.1078 3.2418 14.1847 3.43462L9 7.97141L3.81527 3.43485C3.89233 3.24174 3.9375 3.03278 3.9375 2.8125C3.9375 1.88196 3.18054 1.125 2.25 1.125C1.31946 1.125 0.5625 1.88196 0.5625 2.8125C0.5625 3.54476 1.0341 4.16329 1.6875 4.39616V13.6038C1.0341 13.8367 0.5625 14.4552 0.5625 15.1874C0.5625 16.118 1.31946 16.8749 2.25 16.8749C3.18054 16.8749 3.9375 16.118 3.9375 15.1874C3.9375 14.8125 3.81049 14.4692 3.6027 14.1888L6.60279 11.5636L7.93283 13.8911C7.55724 14.2009 7.3125 14.6636 7.3125 15.1874C7.3125 16.118 8.06946 16.8749 9 16.8749C9.93054 16.8749 10.6875 16.118 10.6875 15.1874C10.6875 14.6636 10.4426 14.2009 10.0672 13.8911L11.3972 11.5636L14.3973 14.1888C14.1895 14.4692 14.0625 14.8125 14.0625 15.1874C14.0625 16.118 14.8195 16.8749 15.75 16.8749C16.6805 16.8749 17.4375 16.118 17.4375 15.1874C17.4375 14.4552 16.9659 13.8367 16.3125 13.6036ZM15.75 2.25C16.0602 2.25 16.3125 2.50239 16.3125 2.8125C16.3125 3.12261 16.0602 3.375 15.75 3.375C15.4398 3.375 15.1875 3.12261 15.1875 2.8125C15.1875 2.50239 15.4398 2.25 15.75 2.25ZM13.6001 5.44101L11.1028 9.81135L9.85421 8.71875L13.6001 5.44101ZM8.14584 8.71875L6.89709 9.81135L4.39976 5.44101L8.14584 8.71875ZM2.25 2.25C2.56022 2.25 2.8125 2.50239 2.8125 2.8125C2.8125 3.12261 2.56022 3.375 2.25 3.375C1.93978 3.375 1.6875 3.12261 1.6875 2.8125C1.6875 2.50239 1.93978 2.25 2.25 2.25ZM2.25 15.75C1.93978 15.75 1.6875 15.4976 1.6875 15.1875C1.6875 14.8774 1.93978 14.625 2.25 14.625C2.56022 14.625 2.8125 14.8774 2.8125 15.1875C2.8125 15.4976 2.56022 15.75 2.25 15.75ZM2.8125 13.3855V4.93065L6.03343 10.5672L2.8125 13.3855ZM9 15.75C8.68978 15.75 8.4375 15.4976 8.4375 15.1875C8.4375 14.8774 8.68978 14.625 9 14.625C9.31022 14.625 9.5625 14.8774 9.5625 15.1875C9.5625 15.4976 9.31022 15.75 9 15.75ZM9 13.4915L7.46657 10.8078L9 9.46609L10.5334 10.8078L9 13.4915ZM15.1875 4.93042V13.3855L11.9666 10.5672L15.1875 4.93042ZM15.75 15.7501C15.4398 15.7501 15.1875 15.4977 15.1875 15.1876C15.1875 14.8774 15.4398 14.6251 15.75 14.6251C16.0602 14.6251 16.3125 14.8774 16.3125 15.1876C16.3125 15.4977 16.0602 15.7501 15.75 15.7501Z" />
+  </svg>
+);
+
+export const NetworkIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/NetworkIcon/NetworkIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NewChatIcon/NewChatIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+function Icon(props: IconProps) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M11.375 11.375H2.625V2.625H7V1.75H2.625C2.39301 1.75023 2.17058 1.84249 2.00654 2.00654C1.84249 2.17058 1.75023 2.39301 1.75 2.625V11.375C1.75023 11.607 1.84249 11.8294 2.00654 11.9935C2.17058 12.1575 2.39301 12.2498 2.625 12.25H11.375C11.607 12.2498 11.8294 12.1575 11.9935 11.9935C12.1575 11.8294 12.2498 11.607 12.25 11.375V7H11.375V11.375Z"
+      />
+      <path
+        fill="currentColor"
+        d="M11.375 2.625V0.875H10.5V2.625H8.75V3.5H10.5V5.25H11.375V3.5H13.125V2.625H11.375Z"
+      />
+    </svg>
+  );
+}
+
+export const NewChatIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/NewChatIcon/NewChatIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size = '14px' }) => size};
+  width: ${({ size = '14px' }) => size};
+`;

package/src/icons/NoneIcon/NoneIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M0 0h24v24H0z" fill="none" />
+  </svg>
+);
+
+export const NoneIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/NoneIcon/NoneIcon',
+})`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NoteIcon/NoteIcon.tsx

@@ -0,0 +1,35 @@
+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
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="12"
+    viewBox="0 0 8 12"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M7.6375 3.4875L5.0125 0.8625C4.9375 0.7875 4.8625 0.75 4.75 0.75H1C0.5875 0.75 0.25 1.0875 0.25 1.5V10.5C0.25 10.9125 0.5875 11.25 1 11.25H7C7.4125 11.25 7.75 10.9125 7.75 10.5V3.75C7.75 3.6375 7.7125 3.5625 7.6375 3.4875ZM4.75 1.65L6.85 3.75H4.75V1.65ZM7 10.5H1V1.5H4V3.75C4 4.1625 4.3375 4.5 4.75 4.5H7V10.5Z"
+      fill="currentColor"
+    />
+    <path d="M6.25 8.25H1.75V9H6.25V8.25Z" fill="currentColor" />
+    <path d="M6.25 6H1.75V6.75H6.25V6Z" fill="currentColor" />
+  </svg>
+);
+
+export const NoteIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/NoteIcon/NoteIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NotesIcon/NotesIcon.tsx

@@ -0,0 +1,43 @@
+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
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    {...props}
+  >
+    <path d="M15.25 5.875H10.25V7.125H15.25V5.875Z" fill="currentColor" />
+    <path d="M7.75 10.875H2.75V12.125H7.75V10.875Z" fill="currentColor" />
+    <path
+      d="M5.25 9C4.75555 9 4.2722 8.85338 3.86107 8.57867C3.44995 8.30397 3.12952 7.91352 2.9403 7.45671C2.75108 6.99989 2.70157 6.49723 2.79804 6.01227C2.8945 5.52732 3.1326 5.08186 3.48223 4.73223C3.83186 4.3826 4.27732 4.1445 4.76227 4.04804C5.24723 3.95157 5.74989 4.00108 6.20671 4.1903C6.66352 4.37952 7.05397 4.69995 7.32867 5.11107C7.60338 5.5222 7.75 6.00555 7.75 6.5C7.74926 7.16281 7.48562 7.79826 7.01694 8.26694C6.54826 8.73562 5.91281 8.99926 5.25 9ZM5.25 5.25C5.00277 5.25 4.7611 5.32331 4.55554 5.46066C4.34998 5.59801 4.18976 5.79324 4.09515 6.02165C4.00054 6.25005 3.97579 6.50139 4.02402 6.74386C4.07225 6.98634 4.1913 7.20907 4.36612 7.38388C4.54093 7.5587 4.76366 7.67775 5.00614 7.72598C5.24861 7.77421 5.49995 7.74946 5.72835 7.65485C5.95676 7.56024 6.15199 7.40002 6.28934 7.19446C6.42669 6.9889 6.5 6.74723 6.5 6.5C6.49967 6.16858 6.36787 5.85083 6.13352 5.61648C5.89917 5.38213 5.58142 5.25033 5.25 5.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.75 14C12.2555 14 11.7722 13.8534 11.3611 13.5787C10.95 13.304 10.6295 12.9135 10.4403 12.4567C10.2511 11.9999 10.2016 11.4972 10.298 11.0123C10.3945 10.5273 10.6326 10.0819 10.9822 9.73223C11.3319 9.3826 11.7773 9.1445 12.2623 9.04804C12.7472 8.95157 13.2499 9.00108 13.7067 9.1903C14.1635 9.37952 14.554 9.69995 14.8287 10.1111C15.1034 10.5222 15.25 11.0055 15.25 11.5C15.2493 12.1628 14.9856 12.7983 14.5169 13.2669C14.0483 13.7356 13.4128 13.9993 12.75 14ZM12.75 10.25C12.5028 10.25 12.2611 10.3233 12.0555 10.4607C11.85 10.598 11.6898 10.7932 11.5951 11.0216C11.5005 11.2501 11.4758 11.5014 11.524 11.7439C11.5723 11.9863 11.6913 12.2091 11.8661 12.3839C12.0409 12.5587 12.2637 12.6777 12.5061 12.726C12.7486 12.7742 12.9999 12.7495 13.2284 12.6549C13.4568 12.5602 13.652 12.4 13.7893 12.1945C13.9267 11.9889 14 11.7472 14 11.5C13.9997 11.1686 13.8679 10.8508 13.6335 10.6165C13.3992 10.3821 13.0814 10.2503 12.75 10.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16.5 17.75H1.5C1.16859 17.7497 0.850846 17.6178 0.6165 17.3835C0.382155 17.1492 0.250347 16.8314 0.25 16.5V1.5C0.250347 1.16859 0.382155 0.850846 0.6165 0.6165C0.850846 0.382155 1.16859 0.250347 1.5 0.25H16.5C16.8314 0.250347 17.1492 0.382155 17.3835 0.6165C17.6178 0.850846 17.7497 1.16859 17.75 1.5V16.5C17.7497 16.8314 17.6178 17.1492 17.3835 17.3835C17.1492 17.6178 16.8314 17.7497 16.5 17.75ZM1.5 1.5V16.5H16.5V1.5H1.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const NotesIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/NotesIcon/NotesIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/OverflowMenuHorizontalIcon/OverflowMenuHorizontalIcon.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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.2 9.1998C3.86274 9.1998 4.4 8.66255 4.4 7.9998C4.4 7.33706 3.86274 6.7998 3.2 6.7998C2.53726 6.7998 2 7.33706 2 7.9998C2 8.66255 2.53726 9.1998 3.2 9.1998Z" />
+    <path d="M8 9.1998C8.66274 9.1998 9.2 8.66255 9.2 7.9998C9.2 7.33706 8.66274 6.7998 8 6.7998C7.33726 6.7998 6.8 7.33706 6.8 7.9998C6.8 8.66255 7.33726 9.1998 8 9.1998Z" />
+    <path d="M12.8 9.1998C13.4627 9.1998 14 8.66255 14 7.9998C14 7.33706 13.4627 6.7998 12.8 6.7998C12.1373 6.7998 11.6 7.33706 11.6 7.9998C11.6 8.66255 12.1373 9.1998 12.8 9.1998Z" />
+  </svg>
+);
+
+export const OverflowMenuHorizontalIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/OverflowMenuHorizontalIcon/OverflowMenuHorizontalIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon.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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7.99999 4.4C8.66273 4.4 9.19999 3.86274 9.19999 3.2C9.19999 2.53726 8.66273 2 7.99999 2C7.33725 2 6.79999 2.53726 6.79999 3.2C6.79999 3.86274 7.33725 4.4 7.99999 4.4Z" />
+    <path d="M7.99999 9.2C8.66273 9.2 9.19999 8.66274 9.19999 8C9.19999 7.33726 8.66273 6.8 7.99999 6.8C7.33725 6.8 6.79999 7.33726 6.79999 8C6.79999 8.66274 7.33725 9.2 7.99999 9.2Z" />
+    <path d="M7.99999 14C8.66273 14 9.19999 13.4627 9.19999 12.8C9.19999 12.1373 8.66273 11.6 7.99999 11.6C7.33725 11.6 6.79999 12.1373 6.79999 12.8C6.79999 13.4627 7.33725 14 7.99999 14Z" />
+  </svg>
+);
+
+export const OverflowMenuVerticalIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;