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

package/src/icons/DeselectIcon/DeselectIcon.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IconProps {
-  className?: string;
-  color?: string;
-}
+import type { IconProps } from '@redocly/theme/icons/types';
 
-const Icon = ({ className }: IconProps) => (
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
   <svg
     data-component-name="icons/DeselectIcon"
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className={className}
+    {...props}
   >
     <path d="M14.4966 10.5H9.49658V11.5H14.4966V10.5Z" fill="currentColor" />
     <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill="currentColor" />
@@ -21,8 +20,14 @@ const Icon = ({ className }: IconProps) => (
   </svg>
 );
 
-export const DeselectIcon = styled(Icon)`
-  width: 1.3em;
-  height: 1.3em;
+export const DeselectIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DeselectIcon/DeselectIcon',
+}))`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '1.3em'};
+  width: ${({ size }) => size || '1.3em'};
   vertical-align: middle;
 `;

package/src/icons/DocumentBlankIcon/DocumentBlankIcon.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.85 4.64993L9.35 1.14993C9.30601 1.10107 9.25192 1.06236 9.19149 1.03646C9.13106 1.01056 9.06572 0.998095 9 0.999933H4C3.73502 1.00071 3.48112 1.10632 3.29375 1.29369C3.10638 1.48105 3.00078 1.73496 3 1.99993V13.9999C3.00078 14.2649 3.10638 14.5188 3.29375 14.7062C3.48112 14.8935 3.73502 14.9992 4 14.9999H12C12.265 14.9992 12.5189 14.8935 12.7062 14.7062C12.8936 14.5188 12.9992 14.2649 13 13.9999V4.99993C13.0018 4.93421 12.9894 4.86887 12.9635 4.80844C12.9376 4.74801 12.8989 4.69393 12.85 4.64993ZM9 2.19993L11.8 4.99993H9V2.19993ZM12 13.9999H4V1.99993H8V4.99993C8.00078 5.26491 8.10638 5.51881 8.29375 5.70618C8.48112 5.89355 8.73502 5.99916 9 5.99993H12V13.9999Z" />
+  </svg>
+);
+
+export const DocumentBlankIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentBlankIcon/DocumentBlankIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentIcon/DocumentIcon.tsx

@@ -0,0 +1,32 @@
+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="M12.85 4.65L9.35 1.15C9.25 1.05 9.15 1 9 1H4C3.45 1 3 1.45 3 2V14C3 14.55 3.45 15 4 15H12C12.55 15 13 14.55 13 14V5C13 4.85 12.95 4.75 12.85 4.65ZM9 2.2L11.8 5H9V2.2ZM12 14H4V2H8V5C8 5.55 8.45 6 9 6H12V14Z" />
+    <path d="M11 11H5V12H11V11Z" />
+    <path d="M11 8H5V9H11V8Z" />
+  </svg>
+);
+
+export const DocumentIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentIcon/DocumentIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentIcon/index.ts

@@ -0,0 +1 @@
+export { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';

package/src/icons/DownloadIcon/DownloadIcon.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="M13 12V14H3V12H2V14C2 14.2652 2.10536 14.5196 2.29289 14.7071C2.48043 14.8946 2.73478 15 3 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V12H13Z" />
+    <path d="M13 7L12.295 6.295L8.5 10.085V1H7.5V10.085L3.705 6.295L3 7L8 12L13 7Z" />
+  </svg>
+);
+
+export const DownloadIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DownloadIcon/DownloadIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/EditIcon/EditIcon.tsx

@@ -1,30 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IconProps {
-  className?: string;
-}
+import type { IconProps } from '@redocly/theme/icons/types';
 
-const Icon = ({ className }: IconProps) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    className={className}
-    fill="none"
-    data-component-name="icons/EditIcon"
-  >
-    <rect width="16" height="16" fill="white" style={{ mixBlendMode: 'multiply' }} />
-    <path d="M15 13H1V14H15V13Z" fill="currentColor" />
-    <path
-      d="M12.7 4.5C13.1 4.1 13.1 3.5 12.7 3.1L10.9 1.3C10.5 0.9 9.9 0.9 9.5 1.3L2 8.8V12H5.2L12.7 4.5ZM10.2 2L12 3.8L10.5 5.3L8.7 3.5L10.2 2ZM3 11V9.2L8 4.2L9.8 6L4.8 11H3Z"
-      fill="currentColor"
-    />
+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 13H1V14H15V13Z" />
+    <path d="M12.7 4.5C13.1 4.1 13.1 3.5 12.7 3.1L10.9 1.3C10.5 0.9 9.9 0.9 9.5 1.3L2 8.8V12H5.2L12.7 4.5ZM10.2 2L12 3.8L10.5 5.3L8.7 3.5L10.2 2ZM3 11V9.2L8 4.2L9.8 6L4.8 11H3Z" />
   </svg>
 );
 
-export const EditIcon = styled(Icon)`
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
+export const EditIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/EditIcon/EditIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
 `;

package/src/icons/EmailIcon/EmailIcon.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="M14 3H2C1.73478 3 1.48043 3.10536 1.29289 3.29289C1.10536 3.48043 1 3.73478 1 4V12C1 12.2652 1.10536 12.5196 1.29289 12.7071C1.48043 12.8946 1.73478 13 2 13H14C14.2652 13 14.5196 12.8946 14.7071 12.7071C14.8946 12.5196 15 12.2652 15 12V4C15 3.73478 14.8946 3.48043 14.7071 3.29289C14.5196 3.10536 14.2652 3 14 3ZM12.9 4L8 7.39L3.1 4H12.9ZM2 12V4.455L7.715 8.41C7.7987 8.46806 7.89813 8.49918 8 8.49918C8.10187 8.49918 8.2013 8.46806 8.285 8.41L14 4.455V12H2Z" />
+  </svg>
+);
+
+export const EmailIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/EmailIcon/EmailIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ErrorIcon/ErrorIcon.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Icon = () => (
-  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.5 1C4.63438 1 1.5 4.13438 1.5 8C1.5 11.8656 4.63438 15 8.5 15C12.3656 15 15.5 11.8656 15.5 8C15.5 4.13438 12.3656 1 8.5 1ZM11.0844 10.6594L10.0531 10.6547L8.5 8.80313L6.94844 10.6531L5.91563 10.6578C5.84688 10.6578 5.79063 10.6031 5.79063 10.5328C5.79063 10.5031 5.80156 10.475 5.82031 10.4516L7.85313 8.02969L5.82031 5.60938C5.80143 5.58647 5.79096 5.5578 5.79063 5.52812C5.79063 5.45937 5.84688 5.40312 5.91563 5.40312L6.94844 5.40781L8.5 7.25938L10.0516 5.40938L11.0828 5.40469C11.1516 5.40469 11.2078 5.45937 11.2078 5.52969C11.2078 5.55937 11.1969 5.5875 11.1781 5.61094L9.14844 8.03125L11.1797 10.4531C11.1984 10.4766 11.2094 10.5047 11.2094 10.5344C11.2094 10.6031 11.1531 10.6594 11.0844 10.6594Z"
-      fill="var(--color-error-base)"
-    />
+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="M1 8C1 9.38447 1.41054 10.7378 2.17971 11.889C2.94888 13.0401 4.04213 13.9373 5.32122 14.4672C6.6003 14.997 8.00776 15.1356 9.36563 14.8655C10.7235 14.5954 11.9708 13.9287 12.9497 12.9497C13.9287 11.9708 14.5954 10.7235 14.8655 9.36563C15.1356 8.00776 14.997 6.6003 14.4672 5.32122C13.9373 4.04213 13.0401 2.94888 11.889 2.17971C10.7378 1.41054 9.38447 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8ZM12.575 11.875L4.125 3.425C5.27532 2.4675 6.74196 1.97449 8.23708 2.04273C9.7322 2.11097 11.1478 2.73554 12.2062 3.79385C13.2645 4.85216 13.889 6.2678 13.9573 7.76292C14.0255 9.25804 13.5325 10.7247 12.575 11.875ZM4.12 12.58C2.90916 11.5518 2.1555 10.0853 2.02428 8.5022C1.89306 6.9191 2.39499 5.34858 3.42 4.135L11.865 12.58C10.7821 13.495 9.4102 13.997 7.9925 13.997C6.5748 13.997 5.20289 13.495 4.12 12.58Z" />
   </svg>
 );
 
 export const ErrorIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/ErrorIcon/ErrorIcon',
-}))``;
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon.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="1 1 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C6.81332 14 5.65328 13.6481 4.66658 12.9888C3.67989 12.3295 2.91085 11.3925 2.45673 10.2961C2.0026 9.19974 1.88378 7.99334 2.11529 6.82946C2.3468 5.66557 2.91825 4.59647 3.75736 3.75736C4.59648 2.91824 5.66558 2.3468 6.82946 2.11529C7.99335 1.88378 9.19975 2.0026 10.2961 2.45672C11.3925 2.91085 12.3295 3.67988 12.9888 4.66658C13.6481 5.65327 14 6.81331 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z" />
+    <path d="M5.75 5.5C5.50278 5.5 5.2611 5.57331 5.05554 5.71066C4.84998 5.84801 4.68976 6.04324 4.59515 6.27165C4.50054 6.50005 4.47579 6.75139 4.52402 6.99386C4.57225 7.23634 4.6913 7.45907 4.86612 7.63388C5.04094 7.8087 5.26366 7.92775 5.50614 7.97598C5.74862 8.02421 5.99995 7.99946 6.22836 7.90485C6.45677 7.81024 6.65199 7.65002 6.78934 7.44446C6.92669 7.2389 7 6.99723 7 6.75C7 6.41848 6.86831 6.10054 6.63389 5.86612C6.39947 5.6317 6.08152 5.5 5.75 5.5Z" />
+    <path d="M10.25 5.5C10.0028 5.5 9.7611 5.57331 9.55554 5.71066C9.34998 5.84801 9.18976 6.04324 9.09515 6.27165C9.00054 6.50005 8.97579 6.75139 9.02402 6.99386C9.07225 7.23634 9.1913 7.45907 9.36612 7.63388C9.54093 7.8087 9.76366 7.92775 10.0061 7.97598C10.2486 8.02421 10.4999 7.99946 10.7284 7.90485C10.9568 7.81024 11.152 7.65002 11.2893 7.44446C11.4267 7.2389 11.5 6.99723 11.5 6.75C11.5 6.41848 11.3683 6.10054 11.1339 5.86612C10.8995 5.6317 10.5815 5.5 10.25 5.5Z" />
+    <path d="M8 9.5C7.30982 9.50117 6.63168 9.6809 6.03151 10.0217C5.43135 10.3625 4.92958 10.8529 4.575 11.445L5.43 11.945C5.69683 11.5019 6.07369 11.1353 6.524 10.8808C6.97431 10.6263 7.48276 10.4926 8 10.4926C8.51724 10.4926 9.0257 10.6263 9.47601 10.8808C9.92631 11.1353 10.3032 11.5019 10.57 11.945L11.425 11.445C11.0704 10.8529 10.5687 10.3625 9.96849 10.0217C9.36833 9.6809 8.69019 9.50117 8 9.5Z" />
+  </svg>
+);
+
+export const FaceDissatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FaceNeutralIcon/FaceNeutralIcon.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="1 1 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C6.81332 14 5.65328 13.6481 4.66658 12.9888C3.67989 12.3295 2.91085 11.3925 2.45673 10.2961C2.0026 9.19974 1.88378 7.99334 2.11529 6.82946C2.3468 5.66557 2.91825 4.59647 3.75736 3.75736C4.59648 2.91824 5.66558 2.3468 6.82946 2.11529C7.99335 1.88378 9.19975 2.0026 10.2961 2.45672C11.3925 2.91085 12.3295 3.67988 12.9888 4.66658C13.6481 5.65327 14 6.81331 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z" />
+    <path d="M5.75 5.5C5.50278 5.5 5.2611 5.57331 5.05554 5.71066C4.84998 5.84801 4.68976 6.04324 4.59515 6.27165C4.50054 6.50005 4.47579 6.75139 4.52402 6.99386C4.57225 7.23634 4.6913 7.45907 4.86612 7.63388C5.04094 7.8087 5.26366 7.92775 5.50614 7.97598C5.74862 8.02421 5.99995 7.99946 6.22836 7.90485C6.45677 7.81024 6.65199 7.65002 6.78934 7.44446C6.92669 7.2389 7 6.99723 7 6.75C7 6.41848 6.86831 6.10054 6.63389 5.86612C6.39947 5.6317 6.08152 5.5 5.75 5.5Z" />
+    <path d="M10.25 5.5C10.0028 5.5 9.7611 5.57331 9.55554 5.71066C9.34998 5.84801 9.18976 6.04324 9.09515 6.27165C9.00054 6.50005 8.97579 6.75139 9.02402 6.99386C9.07225 7.23634 9.1913 7.45907 9.36612 7.63388C9.54093 7.8087 9.76366 7.92775 10.0061 7.97598C10.2486 8.02421 10.4999 7.99946 10.7284 7.90485C10.9568 7.81024 11.152 7.65002 11.2893 7.44446C11.4267 7.2389 11.5 6.99723 11.5 6.75C11.5 6.41848 11.3683 6.10054 11.1339 5.86612C10.8995 5.6317 10.5815 5.5 10.25 5.5Z" />
+    <path d="M11 10H5V11H11V10Z" />
+  </svg>
+);
+
+export const FaceNeutralIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FaceNeutralIcon/FaceNeutralIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FaceSatisfiedIcon/FaceSatisfiedIcon.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="1 1 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C6.81332 14 5.65328 13.6481 4.66658 12.9888C3.67989 12.3295 2.91085 11.3925 2.45673 10.2961C2.0026 9.19974 1.88378 7.99334 2.11529 6.82946C2.3468 5.66557 2.91825 4.59647 3.75736 3.75736C4.59648 2.91824 5.66558 2.3468 6.82946 2.11529C7.99335 1.88378 9.19975 2.0026 10.2961 2.45672C11.3925 2.91085 12.3295 3.67988 12.9888 4.66658C13.6481 5.65327 14 6.81331 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z" />
+    <path d="M5.75 5.5C5.50278 5.5 5.2611 5.57331 5.05554 5.71066C4.84998 5.84801 4.68976 6.04324 4.59515 6.27165C4.50054 6.50005 4.47579 6.75139 4.52402 6.99386C4.57225 7.23634 4.6913 7.45907 4.86612 7.63388C5.04094 7.8087 5.26366 7.92775 5.50614 7.97598C5.74862 8.02421 5.99995 7.99946 6.22836 7.90485C6.45677 7.81024 6.65199 7.65002 6.78934 7.44446C6.92669 7.2389 7 6.99723 7 6.75C7.00134 6.58548 6.96991 6.42233 6.90757 6.27007C6.84522 6.11782 6.7532 5.97949 6.63686 5.86315C6.52052 5.74681 6.38219 5.65478 6.22993 5.59244C6.07767 5.53009 5.91453 5.49867 5.75 5.5Z" />
+    <path d="M10.25 5.5C10.0028 5.5 9.7611 5.57331 9.55554 5.71066C9.34998 5.84801 9.18976 6.04324 9.09515 6.27165C9.00054 6.50005 8.97579 6.75139 9.02402 6.99386C9.07225 7.23634 9.1913 7.45907 9.36612 7.63388C9.54093 7.8087 9.76366 7.92775 10.0061 7.97598C10.2486 8.02421 10.4999 7.99946 10.7284 7.90485C10.9568 7.81024 11.152 7.65002 11.2893 7.44446C11.4267 7.2389 11.5 6.99723 11.5 6.75C11.5013 6.58548 11.4699 6.42233 11.4076 6.27007C11.3452 6.11782 11.2532 5.97949 11.1369 5.86315C11.0205 5.74681 10.8822 5.65478 10.7299 5.59244C10.5777 5.53009 10.4145 5.49867 10.25 5.5Z" />
+    <path d="M8 12C8.69019 11.9988 9.36833 11.8191 9.96849 11.4783C10.5687 11.1375 11.0704 10.6471 11.425 10.055L10.57 9.555C10.3032 9.9981 9.92631 10.3647 9.47601 10.6192C9.0257 10.8737 8.51724 11.0074 8 11.0074C7.48276 11.0074 6.97431 10.8737 6.524 10.6192C6.07369 10.3647 5.69683 9.9981 5.43 9.555L4.575 10.055C4.92958 10.6471 5.43135 11.1375 6.03151 11.4783C6.63168 11.8191 7.30982 11.9988 8 12Z" />
+  </svg>
+);
+
+export const FaceSatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FaceSatisfiedIcon/FaceSatisfiedIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FileIcon/FileIcon.tsx

@@ -1,33 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IconProps {
-  className?: string;
-}
+import type { IconProps } from '@redocly/theme/icons/types';
 
-const Icon = ({ className }: IconProps) => (
-  <svg
-    data-component-name="icons/FileIcon"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
-    <path
-      d="M12.85 4.65018L9.35 1.15018C9.30601 1.10132 9.25192 1.0626 9.19149 1.0367C9.13106 1.0108 9.06572 0.998339 9 1.00018H4C3.73502 1.00096 3.48112 1.10656 3.29375 1.29393C3.10638 1.4813 3.00078 1.7352 3 2.00018V14.0002C3.00078 14.2652 3.10638 14.5191 3.29375 14.7064C3.48112 14.8938 3.73502 14.9994 4 15.0002H12C12.265 14.9994 12.5189 14.8938 12.7062 14.7064C12.8936 14.5191 12.9992 14.2652 13 14.0002V5.00018C13.0018 4.93446 12.9894 4.86912 12.9635 4.80869C12.9376 4.74826 12.8989 4.69417 12.85 4.65018ZM9 2.20018L11.8 5.00018H9V2.20018ZM12 14.0002H4V2.00018H8V5.00018C8.00078 5.26515 8.10638 5.51906 8.29375 5.70642C8.48112 5.89379 8.73502 5.9994 9 6.00018H12V14.0002Z"
-      fill="currentColor"
-    />
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M9.85 3.65006L6.35 0.150055C6.30601 0.101196 6.25192 0.0624773 6.19149 0.036578C6.13106 0.0106787 6.06572 -0.00178282 6 5.53814e-05H1C0.735023 0.000833625 0.481121 0.10644 0.293753 0.293808C0.106385 0.481176 0.000778244 0.735078 0 1.00006V13.0001C0.000778244 13.265 0.106385 13.5189 0.293753 13.7063C0.481121 13.8937 0.735023 13.9993 1 14.0001H9C9.26498 13.9993 9.51888 13.8937 9.70625 13.7063C9.89362 13.5189 9.99922 13.265 10 13.0001V4.00006C10.0018 3.93433 9.98938 3.869 9.96348 3.80857C9.93758 3.74813 9.89886 3.69405 9.85 3.65006ZM6 1.20006L8.8 4.00006H6V1.20006ZM9 13.0001H1V1.00006H5V4.00006C5.00078 4.26503 5.10638 4.51893 5.29375 4.7063C5.48112 4.89367 5.73502 4.99928 6 5.00006H9V13.0001Z" />
   </svg>
 );
 
-export const FileIcon = styled(Icon)`
-  width: 1.3em;
-  height: 1.3em;
-  vertical-align: middle;
-`;
+export const FileIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FileIcon/FileIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
 
-export const SmallFileIcon = styled(Icon)`
-  width: 1em;
-  height: 1em;
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
 `;

package/src/icons/FileStorageIcon/FileStorageIcon.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="M14 10H13V11H14V14H2V11H3V10H2C1.73488 10.0003 1.48071 10.1058 1.29324 10.2932C1.10578 10.4807 1.00032 10.7349 1 11V14C1.00032 14.2651 1.10578 14.5193 1.29324 14.7068C1.48071 14.8942 1.73488 14.9997 2 15H14C14.2651 14.9997 14.5193 14.8942 14.7068 14.7068C14.8942 14.5193 14.9997 14.2651 15 14V11C14.9997 10.7349 14.8942 10.4807 14.7068 10.2932C14.5193 10.1058 14.2651 10.0003 14 10Z" />
+    <path d="M3.5 13C3.77614 13 4 12.7761 4 12.5C4 12.2239 3.77614 12 3.5 12C3.22386 12 3 12.2239 3 12.5C3 12.7761 3.22386 13 3.5 13Z" />
+    <path d="M11.3535 3.6465L8.8535 1.1465C8.75975 1.05273 8.6326 1.00003 8.5 1H5.5C5.23488 1.0003 4.9807 1.10576 4.79323 1.29323C4.60576 1.4807 4.5003 1.73488 4.5 2V10C4.5003 10.2651 4.60576 10.5193 4.79323 10.7068C4.9807 10.8942 5.23488 10.9997 5.5 11H10.5C10.7651 10.9997 11.0193 10.8942 11.2068 10.7068C11.3942 10.5193 11.4997 10.2651 11.5 10V4C11.5 3.8674 11.4473 3.74025 11.3535 3.6465ZM10.2928 4H8.5V2.20705L10.2928 4ZM5.5 10V2H7.5V4C7.5003 4.26512 7.60576 4.5193 7.79323 4.70677C7.9807 4.89424 8.23488 4.9997 8.5 5H10.5V10H5.5Z" />
+  </svg>
+);
+
+export const FileStorageIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FileStorageIcon/FileStorageIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FilterIcon/FilterIcon.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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M9 14H7C6.73478 14 6.48043 13.8946 6.29289 13.7071C6.10536 13.5196 6 13.2652 6 13V9.205L2.295 5.5C2.10721 5.31332 2.00112 5.05979 2 4.795V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H13C13.2652 2 13.5196 2.10536 13.7071 2.29289C13.8946 2.48043 14 2.73478 14 3V4.795C13.9989 5.05979 13.8928 5.31332 13.705 5.5L10 9.205V13C10 13.2652 9.89464 13.5196 9.70711 13.7071C9.51957 13.8946 9.26522 14 9 14ZM3 3V4.795L7 8.795V13H9V8.795L13 4.795V3H3Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const FilterIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FilterIcon/FilterIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FolderAddIcon/FolderAddIcon.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="M13 10H12V12H10V13H12V15H13V13H15V12H13V10Z" />
+    <path d="M14 4H8L6.3 2.3C6.1 2.1 5.85 2 5.6 2H2C1.45 2 1 2.45 1 3V13C1 13.55 1.45 14 2 14H9V13H2V3H5.6L7.6 5H14V9H15V5C15 4.45 14.55 4 14 4Z" />
+  </svg>
+);
+
+export const FolderAddIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FolderAddIcon/FolderAddIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FolderMoveToIcon/FolderMoveToIcon.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="M9 6.5L8.295 7.205L9.585 8.5H5V9.5H9.585L8.295 10.795L9 11.5L11.5 9L9 6.5Z" />
+    <path d="M5.5858 3L7.5858 5H14V13H2V3H5.5858ZM5.5858 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V5C15 4.73478 14.8946 4.48043 14.7071 4.29289C14.5196 4.10536 14.2652 4 14 4H8L6.2929 2.2929C6.10537 2.10536 5.85102 2 5.5858 2Z" />
+  </svg>
+);
+
+export const FolderMoveToIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FolderMoveToIcon/FolderMoveToIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/GlobalOutlinedIcon/GlobalOutlinedIcon.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="M13.35 12.5141C13.3531 12.5094 13.3578 12.5047 13.3609 12.5C14.3844 11.2828 15 9.71406 15 8C15 6.28594 14.3844 4.71719 13.3625 3.5C13.3594 3.49531 13.3547 3.49219 13.3516 3.4875C13.3344 3.46719 13.3187 3.44844 13.3016 3.42969C13.2953 3.42188 13.2891 3.41563 13.2828 3.40781L13.2188 3.33437L13.2172 3.33281C13.1938 3.30625 13.1687 3.27969 13.1453 3.25312L13.1438 3.25156C13.0938 3.19844 13.0437 3.14531 12.9922 3.09375L12.9906 3.09219L12.9156 3.01719L12.9109 3.0125C12.8875 2.98906 12.8641 2.96719 12.8406 2.94531C12.8328 2.9375 12.825 2.92969 12.8156 2.92188C12.8 2.90625 12.7844 2.89219 12.7688 2.87812C12.7641 2.87344 12.7578 2.86875 12.7531 2.8625C11.5063 1.70625 9.83594 1 8 1C6.16406 1 4.49375 1.70625 3.24531 2.8625C3.24062 2.86719 3.23438 2.87187 3.22969 2.87812C3.21406 2.89219 3.19844 2.90781 3.18281 2.92344C3.175 2.93125 3.16719 2.93906 3.15781 2.94688C3.13438 2.96875 3.11094 2.99219 3.0875 3.01406L3.08281 3.01875L3.00781 3.09375L3.00625 3.09531C2.95469 3.14688 2.90469 3.2 2.85469 3.25312L2.85313 3.25469C2.82813 3.28125 2.80469 3.30781 2.78125 3.33437L2.77969 3.33594C2.75781 3.35938 2.73594 3.38437 2.71563 3.40937C2.70938 3.41719 2.70313 3.42344 2.69688 3.43125C2.67969 3.45 2.66406 3.47031 2.64687 3.48906C2.64375 3.49375 2.63906 3.49688 2.63594 3.50156C1.61562 4.71719 1 6.28594 1 8C1 9.71406 1.61563 11.2828 2.6375 12.5C2.64062 12.5047 2.64531 12.5094 2.64844 12.5141L2.69688 12.5719C2.70313 12.5797 2.70938 12.5859 2.71563 12.5938L2.77969 12.6672C2.77969 12.6687 2.78125 12.6688 2.78125 12.6703C2.80469 12.6969 2.82813 12.7234 2.85313 12.7484L2.85469 12.75C2.90469 12.8031 2.95469 12.8562 3.00469 12.9078L3.00625 12.9094C3.03125 12.9344 3.05469 12.9594 3.07969 12.9828L3.08437 12.9875C3.13594 13.0391 3.18906 13.0891 3.24219 13.1375C4.49375 14.2937 6.16406 15 8 15C9.83594 15 11.5062 14.2937 12.7547 13.1375C12.8079 13.0887 12.86 13.0387 12.9109 12.9875L12.9156 12.9828C12.9406 12.9578 12.9656 12.9344 12.9891 12.9094L12.9906 12.9078C13.0422 12.8562 13.0922 12.8031 13.1406 12.75L13.1422 12.7484C13.1656 12.7219 13.1906 12.6969 13.2141 12.6703C13.2141 12.6688 13.2156 12.6687 13.2156 12.6672C13.2375 12.6438 13.2594 12.6187 13.2797 12.5938C13.2859 12.5859 13.2922 12.5797 13.2984 12.5719C13.3161 12.553 13.3333 12.5338 13.35 12.5141ZM13.4141 10.2859C13.1984 10.7953 12.9141 11.2672 12.5672 11.6953C12.1765 11.3577 11.7494 11.0647 11.2937 10.8219C11.475 10.0891 11.5875 9.28438 11.6172 8.4375H13.8594C13.8125 9.07656 13.6625 9.69687 13.4141 10.2859ZM13.8594 7.5625H11.6172C11.5875 6.71562 11.475 5.91094 11.2937 5.17812C11.7516 4.93437 12.1781 4.64062 12.5672 4.30469C13.3212 5.23277 13.7722 6.3699 13.8594 7.5625ZM10.2859 2.58594C10.9062 2.84844 11.4703 3.21094 11.9672 3.66719C11.6785 3.91296 11.3679 4.13159 11.0391 4.32031C10.7937 3.61719 10.4797 3.00625 10.1141 2.51719C10.1719 2.53906 10.2297 2.5625 10.2859 2.58594ZM8.87031 13.5328C8.72656 13.6453 8.58281 13.7312 8.4375 13.7891V10.8906C9.05749 10.9339 9.66717 11.0719 10.2453 11.3C10.1156 11.6844 9.96562 12.0391 9.79219 12.3594C9.52031 12.8656 9.20156 13.2703 8.87031 13.5328ZM9.79219 3.64062C9.96406 3.9625 10.1156 4.31719 10.2453 4.7C9.66717 4.92806 9.05749 5.06612 8.4375 5.10938V2.2125C8.58125 2.27031 8.72656 2.35469 8.87031 2.46875C9.20156 2.72969 9.52031 3.13438 9.79219 3.64062ZM8.4375 10.0141V8.4375H10.7422C10.7172 9.12813 10.6313 9.79844 10.4875 10.4344L10.4828 10.4531C9.82708 10.2045 9.13751 10.0564 8.4375 10.0141ZM8.4375 7.5625V5.98594C9.15312 5.94219 9.84063 5.79063 10.4828 5.54688L10.4875 5.56563C10.6313 6.20156 10.7172 6.87031 10.7422 7.5625H8.4375ZM7.5625 8.4375V10.0141C6.84688 10.0578 6.15938 10.2094 5.51719 10.4531L5.5125 10.4344C5.36875 9.79844 5.28281 9.12969 5.25781 8.4375H7.5625ZM5.25781 7.5625C5.28281 6.87187 5.36875 6.20156 5.5125 5.56563L5.51719 5.54688C6.15938 5.79063 6.84531 5.94219 7.5625 5.98594V7.5625H5.25781ZM7.5625 10.8906V13.7875C7.41875 13.7297 7.27344 13.6453 7.12969 13.5312C6.79844 13.2703 6.47813 12.8641 6.20625 12.3578C6.03438 12.0359 5.88281 11.6812 5.75313 11.2984C6.33438 11.0703 6.93906 10.9344 7.5625 10.8906ZM7.5625 5.10938C6.94251 5.06612 6.33283 4.92806 5.75469 4.7C5.88437 4.31562 6.03437 3.96094 6.20781 3.64062C6.47969 3.13438 6.79844 2.72812 7.13125 2.46719C7.275 2.35469 7.41875 2.26875 7.56406 2.21094V5.10938H7.5625ZM5.71406 2.58594C5.77188 2.5625 5.82812 2.53906 5.88594 2.51719C5.52031 3.00625 5.20625 3.61719 4.96094 4.32031C4.63281 4.13281 4.32188 3.91406 4.03281 3.66719C4.52969 3.21094 5.09375 2.84844 5.71406 2.58594ZM2.58594 5.71406C2.80156 5.20469 3.08594 4.73281 3.43281 4.30469C3.82187 4.64062 4.24844 4.93437 4.70625 5.17812C4.525 5.91094 4.4125 6.71562 4.38281 7.5625H2.14062C2.1875 6.92344 2.3375 6.30313 2.58594 5.71406ZM2.14062 8.4375H4.38281C4.4125 9.28438 4.525 10.0891 4.70625 10.8219C4.25059 11.0647 3.82347 11.3577 3.43281 11.6953C2.6788 10.7672 2.22776 9.6301 2.14062 8.4375ZM5.71406 13.4141C5.09375 13.1516 4.52969 12.7891 4.03281 12.3328C4.32188 12.0859 4.63281 11.8687 4.96094 11.6797C5.20625 12.3828 5.52031 12.9938 5.88594 13.4828C5.82812 13.4609 5.77031 13.4375 5.71406 13.4141ZM10.2859 13.4141C10.2281 13.4375 10.1719 13.4609 10.1141 13.4828C10.4797 12.9938 10.7937 12.3828 11.0391 11.6797C11.3672 11.8672 11.6781 12.0859 11.9672 12.3328C11.4731 12.7872 10.9043 13.1529 10.2859 13.4141Z" />
+  </svg>
+);
+
+export const GlobalOutlinedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/GlobalOutlinedIcon/GlobalOutlinedIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/GridIcon/GridIcon.tsx

@@ -0,0 +1,38 @@
+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 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V6C2 6.26522 2.10536 6.51957 2.29289 6.70711C2.48043 6.89464 2.73478 7 3 7H6C6.26522 7 6.51957 6.89464 6.70711 6.70711C6.89464 6.51957 7 6.26522 7 6V3C7 2.73478 6.89464 2.48043 6.70711 2.29289C6.51957 2.10536 6.26522 2 6 2ZM6 6H3V3H6V6Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M13 2H10C9.73478 2 9.48043 2.10536 9.29289 2.29289C9.10536 2.48043 9 2.73478 9 3V6C9 6.26522 9.10536 6.51957 9.29289 6.70711C9.48043 6.89464 9.73478 7 10 7H13C13.2652 7 13.5196 6.89464 13.7071 6.70711C13.8946 6.51957 14 6.26522 14 6V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2ZM13 6H10V3H13V6Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M6 9H3C2.73478 9 2.48043 9.10536 2.29289 9.29289C2.10536 9.48043 2 9.73478 2 10V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H6C6.26522 14 6.51957 13.8946 6.70711 13.7071C6.89464 13.5196 7 13.2652 7 13V10C7 9.73478 6.89464 9.48043 6.70711 9.29289C6.51957 9.10536 6.26522 9 6 9ZM6 13H3V10H6V13Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M13 9H10C9.73478 9 9.48043 9.10536 9.29289 9.29289C9.10536 9.48043 9 9.73478 9 10V13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8946 9.73478 14 10 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V10C14 9.73478 13.8946 9.48043 13.7071 9.29289C13.5196 9.10536 13.2652 9 13 9ZM13 13H10V10H13V13Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const GridIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/UserIcon/UserIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/HorizontalViewIcon/HorizontalViewIcon.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" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M14 15H2C1.73487 14.9997 1.48068 14.8943 1.2932 14.7068C1.10572 14.5193 1.00028 14.2651 1 14V10C1.00028 9.73487 1.10572 9.48068 1.2932 9.2932C1.48068 9.10572 1.73487 9.00028 2 9H14C14.2651 9.00028 14.5193 9.10572 14.7068 9.2932C14.8943 9.48068 14.9997 9.73487 15 10V14C14.9997 14.2651 14.8943 14.5193 14.7068 14.7068C14.5193 14.8943 14.2651 14.9997 14 15ZM2 10V14H14V10H2Z" />
+    <path d="M14 7H2C1.73487 6.99972 1.48068 6.89428 1.2932 6.7068C1.10572 6.51932 1.00028 6.26513 1 6V2C1.00028 1.73487 1.10572 1.48068 1.2932 1.2932C1.48068 1.10572 1.73487 1.00028 2 1H14C14.2651 1.00028 14.5193 1.10572 14.7068 1.2932C14.8943 1.48068 14.9997 1.73487 15 2V6C14.9997 6.26513 14.8943 6.51932 14.7068 6.7068C14.5193 6.89428 14.2651 6.99972 14 7ZM2 2V6H14V2H2Z" />
+  </svg>
+);
+
+export const HorizontalViewIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/HorizontalViewIcon/HorizontalViewIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/IBMCloudHyperProtectCryptoServicesIcon/IBMCloudHyperProtectCryptoServicesIcon.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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M12.5 15L11.45 14.5C10.6 14.1 10 13.2 10 12.25V9H15V12.25C15 13.2 14.45 14.1 13.55 14.5L12.5 15ZM11 10V12.25C11 12.85 11.35 13.35 11.85 13.6L12.5 13.9L13.15 13.6C13.65 13.35 14 12.8 14 12.25V10H11Z" />
+    <path d="M11 6C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4C10.4477 4 10 4.44772 10 5C10 5.55228 10.4477 6 11 6Z" />
+    <path d="M10.5 1C8 1 6 3 6 5.5C6 5.95 6.05 6.4 6.2 6.8L1 12V15H4L9 10L8.3 9.3L6.9 10.7L6.2 10L5.5 10.7L6.2 11.4L5.4 12.2L4.7 11.5L4 12.2L4.7 12.9L3.6 14H2V12.4L7.3 7.1L7.15 6.5C7.05 6.15 7 5.85 7 5.5C7 3.55 8.55 2 10.5 2C12.45 2 14 3.55 14 5.5C14 6.25 13.75 6.95 13.35 7.5H14.5C14.8 6.9 14.95 6.2 14.95 5.5C15 3 13 1 10.5 1Z" />
+  </svg>
+);
+
+export const IBMCloudHyperProtectCryptoServicesIcon = styled(Icon).attrs(() => ({
+  'data-component-name':
+    'icons/IBMCloudHyperProtectCryptoServicesIcon/IBMCloudHyperProtectCryptoServicesIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/InformationFilledIcon/InformationFilledIcon.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 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 4C8.14834 4 8.29334 4.04399 8.41668 4.1264C8.54002 4.20881 8.63615 4.32594 8.69291 4.46299C8.74968 4.60003 8.76453 4.75083 8.73559 4.89632C8.70665 5.0418 8.63522 5.17544 8.53033 5.28033C8.42544 5.38522 8.29181 5.45665 8.14632 5.48559C8.00083 5.51453 7.85004 5.49968 7.71299 5.44291C7.57595 5.38614 7.45881 5.29001 7.3764 5.16668C7.29399 5.04334 7.25 4.89834 7.25 4.75C7.25 4.55109 7.32902 4.36032 7.46967 4.21967C7.61033 4.07902 7.80109 4 8 4ZM10 12.0625H6V10.9375H7.4375V8.0625H6.5V6.9375H8.5625V10.9375H10V12.0625Z" />
+  </svg>
+);
+
+export const InformationFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/InformationFilledIcon/InformationFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;