@redocly/theme 0.70.0-next.9 → 0.70.1

package/src/icons/PeopleIcon/PeopleIcon.tsx

@@ -0,0 +1,46 @@
+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 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M14.625 6.875H13.5V8H14.625C15.0724 8.00049 15.5013 8.17844 15.8177 8.4948C16.1341 8.81116 16.312 9.2401 16.3125 9.6875V11.9375H17.4375V9.6875C17.4366 8.94184 17.14 8.22697 16.6128 7.69972C16.0855 7.17246 15.3707 6.87586 14.625 6.875Z"
+      fill="#1F7CFF"
+    />
+    <path
+      d="M13.5 1.25C13.8338 1.25 14.16 1.34897 14.4375 1.5344C14.715 1.71982 14.9313 1.98337 15.059 2.29172C15.1868 2.60007 15.2202 2.93937 15.1551 3.26671C15.09 3.59406 14.9292 3.89474 14.6932 4.13074C14.4572 4.36674 14.1566 4.52746 13.8292 4.59258C13.5019 4.65769 13.1626 4.62427 12.8542 4.49655C12.5459 4.36882 12.2823 4.15253 12.0969 3.87502C11.9115 3.59752 11.8125 3.27126 11.8125 2.9375C11.8125 2.48995 11.9903 2.06072 12.3068 1.74426C12.6232 1.42779 13.0524 1.25 13.5 1.25ZM13.5 0.125C12.9437 0.125 12.4 0.28995 11.9375 0.598992C11.4749 0.908033 11.1145 1.34729 10.9016 1.8612C10.6887 2.37512 10.633 2.94062 10.7415 3.48619C10.8501 4.03176 11.1179 4.5329 11.5113 4.92624C11.9046 5.31957 12.4057 5.58744 12.9513 5.69596C13.4969 5.80448 14.0624 5.74878 14.5763 5.53591C15.0902 5.32304 15.5295 4.96255 15.8385 4.50004C16.1475 4.03753 16.3125 3.49376 16.3125 2.9375C16.3125 2.19158 16.0162 1.47621 15.4887 0.948762C14.9613 0.421316 14.2459 0.125 13.5 0.125Z"
+      fill="#1F7CFF"
+    />
+    <path
+      d="M12.9375 15.875H11.8125V14.75C11.812 14.3026 11.6341 13.8737 11.3177 13.5573C11.0013 13.2409 10.5724 13.063 10.125 13.0625H7.875C7.4276 13.063 6.99866 13.2409 6.6823 13.5573C6.36594 13.8737 6.18799 14.3026 6.1875 14.75V15.875H5.0625V14.75C5.06338 14.0043 5.35998 13.2895 5.88723 12.7622C6.41449 12.235 7.12935 11.9384 7.875 11.9375H10.125C10.8707 11.9384 11.5855 12.235 12.1128 12.7622C12.64 13.2895 12.9366 14.0043 12.9375 14.75V15.875Z"
+      fill="#1F7CFF"
+    />
+    <path
+      d="M9 6.3125C9.33376 6.3125 9.66002 6.41147 9.93752 6.5969C10.215 6.78232 10.4313 7.04587 10.559 7.35422C10.6868 7.66257 10.7202 8.00187 10.6551 8.32922C10.59 8.65656 10.4292 8.95724 10.1932 9.19324C9.95724 9.42924 9.65656 9.58996 9.32922 9.65508C9.00187 9.72019 8.66257 9.68677 8.35422 9.55905C8.04587 9.43132 7.78232 9.21503 7.5969 8.93752C7.41147 8.66002 7.3125 8.33376 7.3125 8C7.3125 7.55245 7.49029 7.12322 7.80676 6.80676C8.12322 6.49029 8.55245 6.3125 9 6.3125ZM9 5.1875C8.44374 5.1875 7.89997 5.35245 7.43746 5.66149C6.97495 5.97053 6.61446 6.40979 6.40159 6.9237C6.18872 7.43762 6.13302 8.00312 6.24154 8.54869C6.35006 9.09426 6.61793 9.5954 7.01126 9.98874C7.4046 10.3821 7.90574 10.6499 8.45131 10.7585C8.99688 10.867 9.56238 10.8113 10.0763 10.5984C10.5902 10.3855 11.0295 10.0251 11.3385 9.56254C11.6475 9.10003 11.8125 8.55626 11.8125 8C11.8125 7.25408 11.5162 6.53871 10.9887 6.01126C10.4613 5.48382 9.74592 5.1875 9 5.1875Z"
+      fill="#1F7CFF"
+    />
+    <path
+      d="M4.5 6.875H3.375C2.62935 6.87588 1.91449 7.17248 1.38723 7.69973C0.859976 8.22699 0.563378 8.94185 0.5625 9.6875V11.9375H1.6875V9.6875C1.68799 9.2401 1.86594 8.81116 2.1823 8.4948C2.49866 8.17844 2.9276 8.00049 3.375 8H4.5V6.875Z"
+      fill="#1F7CFF"
+    />
+    <path
+      d="M4.5 1.25C4.83376 1.25 5.16002 1.34897 5.43752 1.5344C5.71503 1.71982 5.93132 1.98337 6.05905 2.29172C6.18677 2.60007 6.22019 2.93937 6.15508 3.26671C6.08996 3.59406 5.92924 3.89474 5.69324 4.13074C5.45724 4.36674 5.15656 4.52746 4.82922 4.59258C4.50187 4.65769 4.16257 4.62427 3.85422 4.49655C3.54587 4.36882 3.28232 4.15253 3.0969 3.87502C2.91147 3.59752 2.8125 3.27126 2.8125 2.9375C2.8125 2.48995 2.99029 2.06072 3.30676 1.74426C3.62322 1.42779 4.05245 1.25 4.5 1.25ZM4.5 0.125C3.94374 0.125 3.39997 0.28995 2.93746 0.598992C2.47495 0.908033 2.11446 1.34729 1.90159 1.8612C1.68872 2.37512 1.63302 2.94062 1.74154 3.48619C1.85006 4.03176 2.11793 4.5329 2.51126 4.92624C2.9046 5.31957 3.40574 5.58744 3.95131 5.69596C4.49688 5.80448 5.06238 5.74878 5.5763 5.53591C6.09021 5.32304 6.52947 4.96255 6.83851 4.50004C7.14755 4.03753 7.3125 3.49376 7.3125 2.9375C7.3125 2.19158 7.01618 1.47621 6.48874 0.948762C5.96129 0.421316 5.24592 0.125 4.5 0.125Z"
+      fill="#1F7CFF"
+    />
+  </svg>
+);
+
+export const PeopleIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/PeopleIcon/PeopleIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;

package/src/icons/PlayIcon/PlayIcon.tsx

@@ -0,0 +1,22 @@
+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 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.0625 12.25C2.94647 12.25 2.83519 12.2039 2.75314 12.1219C2.67109 12.0398 2.625 11.9286 2.625 11.8125V2.18753C2.62499 2.1115 2.6448 2.03678 2.68247 1.97074C2.72014 1.9047 2.77437 1.84961 2.83981 1.81092C2.90526 1.77222 2.97965 1.75124 3.05567 1.75005C3.13169 1.74887 3.20671 1.76751 3.27333 1.80415L12.0233 6.61665C12.092 6.6544 12.1492 6.70989 12.1891 6.77733C12.229 6.84476 12.25 6.92167 12.25 7.00001C12.25 7.07835 12.229 7.15526 12.1891 7.22269C12.1492 7.29013 12.092 7.34562 12.0233 7.38337L3.27333 12.1959C3.20874 12.2314 3.13622 12.25 3.0625 12.25ZM3.5 2.9273V11.0726L10.9046 7.00003L3.5 2.9273Z" />
+  </svg>
+);
+
+export const PlayIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/PlayIcon/PlayIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/PlaylistIcon/PlaylistIcon.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" {...props}>
+    <path d="M9.625 2.625H1.75V3.5H9.625V2.625Z" fill="#1A1C21" />
+    <path d="M9.625 5.25H1.75V6.125H9.625V5.25Z" fill="#1A1C21" />
+    <path d="M7 7.875H1.75V8.75H7V7.875Z" fill="#1A1C21" />
+    <path d="M9.1875 7.875L12.25 10.0625L9.1875 12.25V7.875Z" fill="#1A1C21" />
+  </svg>
+);
+
+export const PlaylistIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/PlaylistIcon/PlaylistIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/PlusCustomIcon/PlusCustomIcon.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
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect x="2.5" y="2.5" width="19" height="19" rx="9.5" stroke="#DCDDE5" />
+    <path d="M12.5 11.5V8H11.5V11.5H8V12.5H11.5V16H12.5V12.5H16V11.5H12.5Z" fill="#3B3C45" />
+  </svg>
+);
+
+export const PlusCustomIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/PlusCustomIcon/PlusCustomIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/RabbitMQIcon/RabbitMQIcon.tsx

@@ -0,0 +1,40 @@
+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}
+  >
+    <g clipPath="url(#clip0_15358_36168)">
+      <path
+        d="M13.1 6.8695H9.555C9.2715 6.8355 9.0555 6.586 9.0555 6.292V2.572C9.056 2.255 8.7985 2 8.484 2H7.2435C6.926 2 6.671 2.2575 6.671 2.5725V6.3315C6.6555 6.6155 6.4215 6.8435 6.1405 6.8695H5.212C4.939 6.836 4.728 6.607 4.71 6.33V2.5725C4.71 2.255 4.4525 2 4.138 2H2.897C2.58 2 2.325 2.2575 2.325 2.5725V7.442V13.4275C2.325 13.745 2.5825 14 2.897 14H4.1375H7.2425H8.483H13.1025C13.42 14 13.675 13.7425 13.675 13.4275V7.442C13.673 7.125 13.4175 6.8695 13.1 6.8695ZM11.4665 10.9745C11.4665 11.292 11.209 11.5495 10.8945 11.5495H9.6545C9.3365 11.5495 9.081 11.292 9.081 10.9745V9.804C9.081 9.486 9.3385 9.2295 9.6545 9.2295H10.8945C11.2125 9.2295 11.4665 9.487 11.4665 9.804V10.9745Z"
+        fill="#1A1C21"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_15358_36168">
+        <rect width="12" height="12" fill="white" transform="translate(2 2)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const RabbitMQIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/RabbitMQIcon/RabbitMQIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/RadioCheckButtonIcon/RadioCheckButtonIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    {...props}
+  >
+    <rect width="16" height="16" fill="none" />
+    <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"
+      fill="currentColor"
+    />
+    <path
+      d="M7 10.625L4.5 8.145L5.295 7.375L7 9.05L10.705 5.375L11.5 6.165L7 10.625Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const RadioCheckButtonIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/RadioCheckButtonIcon/RadioCheckButtonIcon',
+})``;

package/src/icons/RecentlyViewedIcon/RecentlyViewedIcon.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="M10.295 11L7.5 8.205V3.5H8.5V7.79L11 10.295L10.295 11Z" />
+    <path d="M8 1C7.06748 1.00013 6.14446 1.18739 5.28562 1.55068C4.42677 1.91397 3.64955 2.44591 3 3.115V1H2V5H6V4H3.54C4.47801 2.95765 5.75149 2.27676 7.13926 2.0756C8.52703 1.87444 9.94142 2.16571 11.1368 2.89882C12.3322 3.63193 13.233 4.76057 13.6829 6.08873C14.1327 7.41689 14.1032 8.86066 13.5993 10.1693C13.0955 11.4779 12.1492 12.5688 10.9249 13.2523C9.7005 13.9359 8.27537 14.1691 6.897 13.9113C5.51862 13.6535 4.27407 12.9211 3.3795 11.8412C2.48492 10.7614 1.99683 9.40227 2 8H1C1 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 1Z" />
+  </svg>
+);
+
+export const RecentlyViewedIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/RecentlyViewedIcon/RecentlyViewedIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/RedoclyIcon/RedoclyIcon.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 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g>
+      <path d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z" />
+      <path d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z" />
+    </g>
+  </svg>
+);
+
+export const RedoclyIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/RedoclyIcon/RedoclyIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/RenewIcon/RenewIcon.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="M6 4.99986H3.39C4.03668 4.00602 4.98721 3.24777 6.09991 2.83815C7.21262 2.42852 8.4279 2.38944 9.56462 2.72675C10.7013 3.06405 11.6986 3.75967 12.4078 4.70992C13.117 5.66017 13.5001 6.81415 13.5 7.99986H14.5C14.5014 6.6626 14.0903 5.35747 13.3227 4.26241C12.5552 3.16736 11.4686 2.33568 10.2111 1.88079C8.95358 1.4259 7.58637 1.36994 6.29589 1.72053C5.00541 2.07112 3.85447 2.8112 3 3.83986V1.99986H2V5.99986H6V4.99986Z" />
+    <path d="M10 10.9999H12.61C11.9633 11.9937 11.0128 12.7519 9.90009 13.1616C8.78739 13.5712 7.5721 13.6103 6.43539 13.273C5.29867 12.9357 4.30139 12.24 3.59221 11.2898C2.88303 10.3395 2.49993 9.18556 2.5 7.99986H1.5C1.49863 9.33711 1.90973 10.6422 2.67727 11.7373C3.4448 12.8324 4.53141 13.664 5.78892 14.1189C7.04642 14.5738 8.41363 14.6298 9.70411 14.2792C10.9946 13.9286 12.1455 13.1885 13 12.1599V13.9999H14V9.99986H10V10.9999Z" />
+  </svg>
+);
+
+export const RenewIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/RenewIcon/RenewIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ResetIcon/ResetIcon.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 14C10.1867 14 11.3467 13.6481 12.3334 12.9888C13.3201 12.3295 14.0892 11.3925 14.5433 10.2961C14.9974 9.19975 15.1162 7.99335 14.8847 6.82946C14.6532 5.66558 14.0818 4.59648 13.2426 3.75736C12.4035 2.91825 11.3344 2.3468 10.1705 2.11529C9.00666 1.88378 7.80026 2.0026 6.7039 2.45673C5.60754 2.91085 4.67047 3.67989 4.01118 4.66658C3.35189 5.65328 3 6.81331 3 8V11.1L1.2 9.3L0.5 10L3.5 13L6.5 10L5.8 9.3L4 11.1V8C4 7.0111 4.29324 6.0444 4.84265 5.22215C5.39206 4.39991 6.17295 3.75904 7.08658 3.38061C8.00021 3.00217 9.00555 2.90315 9.97545 3.09608C10.9454 3.289 11.8363 3.76521 12.5355 4.46447C13.2348 5.16373 13.711 6.05465 13.9039 7.02455C14.0969 7.99446 13.9978 8.99979 13.6194 9.91342C13.241 10.8271 12.6001 11.6079 11.7779 12.1574C10.9556 12.7068 9.98891 13 9 13V14Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const ResetIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ResetIcon/ResetIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/RestartIcon/RestartIcon.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 9C13 9.98891 12.7068 10.9556 12.1574 11.7779C11.6079 12.6001 10.8271 13.241 9.91342 13.6194C8.99979 13.9978 7.99446 14.0969 7.02455 13.9039C6.05465 13.711 5.16373 13.2348 4.46447 12.5355C3.76521 11.8363 3.289 10.9454 3.09608 9.97545C2.90315 9.00555 3.00217 8.00021 3.38061 7.08658C3.75904 6.17295 4.39991 5.39206 5.22215 4.84265C6.0444 4.29324 7.0111 4 8 4H11.0911L9.29885 5.7927L10 6.5L13 3.5L10 0.5L9.29885 1.207L11.0926 3H8C6.81331 3 5.65328 3.35189 4.66658 4.01118C3.67989 4.67047 2.91085 5.60754 2.45673 6.7039C2.0026 7.80026 1.88378 9.00666 2.11529 10.1705C2.3468 11.3344 2.91825 12.4035 3.75736 13.2426C4.59648 14.0818 5.66558 14.6532 6.82946 14.8847C7.99335 15.1162 9.19975 14.9974 10.2961 14.5433C11.3925 14.0892 12.3295 13.3201 12.9888 12.3334C13.6481 11.3467 14 10.1867 14 9H13Z" />
+  </svg>
+);
+
+export const RestartIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/RestartIcon/RestartIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ReturnKeyIcon/ReturnKeyIcon.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Typography } from '@redocly/theme/components/Typography/Typography';
+
+export const ReturnKeyIcon = styled(Typography).attrs<{ 'data-component-name': string }>({
+  'data-component-name': 'icons/ReturnKeyIcon/ReturnKeyIcon',
+})`
+  margin-left: auto;
+
+  ::after {
+    content: '⏎';
+  }
+`;

package/src/icons/RocketIcon/RocketIcon.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="M7.64273 7.64733L3.64404 11.646L4.35115 12.3531L8.34984 8.35443L7.64273 7.64733Z" />
+    <path d="M8.5 15C8.43668 15.0002 8.3739 14.9883 8.315 14.965C8.23309 14.9324 8.16127 14.8786 8.10682 14.8093C8.05238 14.7399 8.01725 14.6574 8.005 14.57L7.505 11.07L8.505 10.93L8.88 13.565L10.5 12.26V8.50003C10.4996 8.43423 10.5122 8.369 10.5371 8.30808C10.562 8.24716 10.5987 8.19175 10.645 8.14503L12.68 6.11003C13.0993 5.69356 13.4319 5.19806 13.6585 4.65222C13.885 4.10638 14.0011 3.52103 14 2.93003V2.00003H13.07C12.479 1.99891 11.8937 2.11499 11.3478 2.34157C10.802 2.56814 10.3065 2.90071 9.89 3.32003L7.855 5.35503C7.80828 5.40137 7.75287 5.43803 7.69196 5.46292C7.63104 5.4878 7.56581 5.50041 7.5 5.50003H3.74L2.435 7.13003L5.07 7.50503L4.93 8.50503L1.43 8.00503C1.34267 7.99278 1.26014 7.95765 1.19077 7.90321C1.1214 7.84877 1.06766 7.77695 1.035 7.69503C1.00194 7.61254 0.991465 7.52274 1.00465 7.43485C1.01783 7.34697 1.0542 7.26419 1.11 7.19503L3.11 4.69503C3.15606 4.63519 3.21508 4.58655 3.28263 4.55278C3.35017 4.51901 3.42449 4.50097 3.5 4.50003H7.295L9.18 2.61003C9.68959 2.09758 10.2958 1.6914 10.9636 1.41503C11.6313 1.13865 12.3473 0.997596 13.07 1.00003H14C14.2652 1.00003 14.5196 1.10539 14.7071 1.29292C14.8946 1.48046 15 1.73481 15 2.00003V2.93003C15.0024 3.65271 14.8614 4.36869 14.585 5.03645C14.3086 5.7042 13.9024 6.31045 13.39 6.82003L11.5 8.70503V12.5C11.4997 12.5751 11.4824 12.6492 11.4495 12.7167C11.4166 12.7842 11.3689 12.8435 11.31 12.89L8.81 14.89C8.72203 14.9606 8.61278 14.9994 8.5 15Z" />
+  </svg>
+);
+
+export const RocketIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/RocketIcon/RocketIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SaveIcon/SaveIcon.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.855 4.64501L11.355 2.14501C11.3083 2.09867 11.2529 2.06201 11.192 2.03712C11.131 2.01224 11.0658 1.99963 11 2.00001H3C2.73478 2.00001 2.48043 2.10537 2.29289 2.2929C2.10536 2.48044 2 2.73479 2 3.00001V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8947 2.73478 14 3 14H13C13.2652 14 13.5196 13.8947 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V5.00001C14.0004 4.93421 13.9878 4.86897 13.9629 4.80806C13.938 4.74714 13.9013 4.69173 13.855 4.64501ZM6 3.00001H10V5.00001H6V3.00001ZM10 13H6V9.00001H10V13ZM11 13V9.00001C11 8.73479 10.8946 8.48044 10.7071 8.2929C10.5196 8.10537 10.2652 8.00001 10 8.00001H6C5.73478 8.00001 5.48043 8.10537 5.29289 8.2929C5.10536 8.48044 5 8.73479 5 9.00001V13H3V3.00001H5V5.00001C5 5.26523 5.10536 5.51958 5.29289 5.70712C5.48043 5.89465 5.73478 6.00001 6 6.00001H10C10.2652 6.00001 10.5196 5.89465 10.7071 5.70712C10.8946 5.51958 11 5.26523 11 5.00001V3.20501L13 5.20501V13H11Z" />
+  </svg>
+);
+
+export const SaveIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/SaveIcon/SaveIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SearchIcon/SearchIcon.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.5 13.7931L10.724 10.017C11.6313 8.9277 12.0838 7.5305 11.9872 6.11608C11.8907 4.70165 11.2525 3.37891 10.2055 2.423C9.15857 1.4671 7.78336 0.951637 6.36602 0.983845C4.94867 1.01605 3.5983 1.59345 2.59582 2.59593C1.59335 3.5984 1.01595 4.94877 0.983738 6.36612C0.95153 7.78347 1.46699 9.15867 2.4229 10.2057C3.3788 11.2526 4.70155 11.8908 6.11597 11.9873C7.53039 12.0839 8.92759 11.6314 10.0169 10.7241L13.793 14.5001L14.5 13.7931ZM2.00001 6.50012C2.00001 5.6101 2.26393 4.74007 2.7584 4.00005C3.25286 3.26003 3.95567 2.68325 4.77794 2.34266C5.6002 2.00207 6.505 1.91295 7.37792 2.08658C8.25083 2.26022 9.05266 2.6888 9.68199 3.31814C10.3113 3.94747 10.7399 4.7493 10.9135 5.62221C11.0872 6.49513 10.9981 7.39993 10.6575 8.22219C10.3169 9.04446 9.7401 9.74726 9.00008 10.2417C8.26006 10.7362 7.39003 11.0001 6.50001 11.0001C5.30694 10.9988 4.16312 10.5243 3.31949 9.68064C2.47587 8.83701 2.00133 7.69319 2.00001 6.50012Z" />
+  </svg>
+);
+
+export const SearchIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/SearchIcon/SearchIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SecurityIcon/SecurityIcon.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="M7 8.295L5.705 7L5 7.705L7 9.705L11 5.705L10.295 5L7 8.295Z" />
+    <path d="M8 15L4.9121 13.3535C4.03174 12.8852 3.29552 12.186 2.78248 11.3309C2.26944 10.4758 1.99893 9.49718 2 8.5V2C2.00028 1.73487 2.10573 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 2V8.5C14.0011 9.49718 13.7306 10.4758 13.2175 11.3309C12.7045 12.186 11.9683 12.8852 11.0879 13.3535L8 15ZM3 2V8.5C2.99914 9.3159 3.22048 10.1166 3.64028 10.8163C4.06007 11.5159 4.66246 12.088 5.3828 12.4712L8 13.8666L10.6172 12.4712C11.3375 12.088 11.9399 11.5159 12.3597 10.8163C12.7795 10.1166 13.0009 9.3159 13 8.5V2H3Z" />
+  </svg>
+);
+
+export const SecurityIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/SecurityIcon/SecurityIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SelectIcon/SelectIcon.tsx

@@ -0,0 +1,36 @@
+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
+    data-component-name="icons/SelectIcon"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill="currentColor" />
+    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill="currentColor" />
+    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill="currentColor" />
+    <path
+      d="M10.5 10.9425L9.205 9.64746L8.5 10.3525L10.5 12.3525L14.5 8.35246L13.795 7.64746L10.5 10.9425Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SelectIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/SelectIcon/SelectIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '1.3em'};
+  width: ${({ size }) => size || '1.3em'};
+  vertical-align: middle;
+`;

package/src/icons/SendIcon/SendIcon.tsx

@@ -0,0 +1,33 @@
+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="M13.0094 7.61066L3.38435 2.79816C3.30892 2.76043 3.22418 2.74532 3.14035 2.75463C3.05652 2.76394 2.97717 2.79729 2.91186 2.85066C2.84948 2.90294 2.80292 2.97158 2.77742 3.04886C2.75191 3.12615 2.74847 3.20902 2.76748 3.28816L3.92685 7.56253H8.87498V8.43753H3.92685L2.74998 12.6988C2.73214 12.7649 2.73006 12.8342 2.7439 12.9013C2.75774 12.9683 2.78712 13.0312 2.82968 13.0848C2.87223 13.1384 2.92677 13.1813 2.98891 13.21C3.05106 13.2387 3.11907 13.2524 3.18748 13.25C3.25597 13.2496 3.3234 13.2331 3.38435 13.2019L13.0094 8.38941C13.081 8.35269 13.1412 8.29692 13.1832 8.22821C13.2252 8.15951 13.2474 8.08055 13.2474 8.00003C13.2474 7.91951 13.2252 7.84056 13.1832 7.77185C13.1412 7.70315 13.081 7.64737 13.0094 7.61066Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const SendIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/SendIcon/SendIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SettingsCogIcon/SettingsCogIcon.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) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M13.5 8.38008C13.5 8.25508 13.5 8.13008 13.5 8.00008C13.5 7.87008 13.5 7.74508 13.5 7.61508L14.46 6.77508C14.637 6.61911 14.7531 6.40559 14.7879 6.17228C14.8226 5.93897 14.7738 5.70088 14.65 5.50008L13.47 3.50008C13.3823 3.34821 13.2562 3.22207 13.1044 3.13431C12.9526 3.04655 12.7804 3.00026 12.605 3.00008C12.4963 2.99925 12.3882 3.01614 12.285 3.05008L11.07 3.46008C10.8602 3.32068 10.6414 3.19541 10.415 3.08508L10.16 1.82508C10.1143 1.59488 9.98905 1.3881 9.80623 1.24093C9.62341 1.09376 9.39466 1.01558 9.16 1.02008H6.82C6.58535 1.01558 6.3566 1.09376 6.17378 1.24093C5.99096 1.3881 5.86573 1.59488 5.82 1.82508L5.565 3.08508C5.33697 3.19538 5.11649 3.32066 4.905 3.46008L3.715 3.03008C3.61065 3.00289 3.50259 2.99276 3.395 3.00008C3.21964 3.00026 3.04741 3.04655 2.89559 3.13431C2.74376 3.22207 2.61769 3.34821 2.53 3.50008L1.35 5.50008C1.2333 5.70058 1.18993 5.93541 1.22733 6.16436C1.26473 6.39332 1.38057 6.60214 1.555 6.75508L2.5 7.62008C2.5 7.74508 2.5 7.87008 2.5 8.00008C2.5 8.13008 2.5 8.25508 2.5 8.38508L1.555 9.22508C1.37564 9.37908 1.25663 9.59165 1.2191 9.82505C1.18158 10.0585 1.22795 10.2976 1.35 10.5001L2.53 12.5001C2.61769 12.6519 2.74376 12.7781 2.89559 12.8659C3.04741 12.9536 3.21964 12.9999 3.395 13.0001C3.50368 13.0009 3.61176 12.984 3.715 12.9501L4.93 12.5401C5.13977 12.6795 5.35859 12.8048 5.585 12.9151L5.84 14.1751C5.88573 14.4053 6.01096 14.6121 6.19378 14.7592C6.3766 14.9064 6.60535 14.9846 6.84 14.9801H9.2C9.43466 14.9846 9.66341 14.9064 9.84623 14.7592C10.029 14.6121 10.1543 14.4053 10.2 14.1751L10.455 12.9151C10.683 12.8048 10.9035 12.6795 11.115 12.5401L12.325 12.9501C12.4282 12.984 12.5363 13.0009 12.645 13.0001C12.8204 12.9999 12.9926 12.9536 13.1444 12.8659C13.2962 12.7781 13.4223 12.6519 13.51 12.5001L14.65 10.5001C14.7667 10.2996 14.8101 10.0648 14.7727 9.8358C14.7353 9.60685 14.6194 9.39802 14.445 9.24508L13.5 8.38008ZM12.605 12.0001L10.89 11.4201C10.4885 11.7601 10.0297 12.026 9.535 12.2051L9.18 14.0001H6.82L6.465 12.2251C5.97422 12.0409 5.51786 11.7755 5.115 11.4401L3.395 12.0001L2.215 10.0001L3.575 8.80008C3.48255 8.28251 3.48255 7.75265 3.575 7.23508L2.215 6.00008L3.395 4.00008L5.11 4.58008C5.51147 4.24003 5.97031 3.97421 6.465 3.79508L6.82 2.00008H9.18L9.535 3.77508C10.0258 3.95929 10.4821 4.22465 10.885 4.56008L12.605 4.00008L13.785 6.00008L12.425 7.20008C12.5175 7.71765 12.5175 8.24751 12.425 8.76508L13.785 10.0001L12.605 12.0001Z"
+        fill="#1A1C21"
+      />
+      <path
+        d="M8 11.0001C7.40666 11.0001 6.82664 10.8241 6.33329 10.4945C5.83995 10.1648 5.45543 9.69631 5.22837 9.14813C5.0013 8.59995 4.94189 7.99675 5.05765 7.41481C5.1734 6.83287 5.45913 6.29832 5.87868 5.87876C6.29824 5.4592 6.83279 5.17348 7.41473 5.05773C7.99668 4.94197 8.59988 5.00138 9.14805 5.22844C9.69623 5.45551 10.1648 5.84002 10.4944 6.33337C10.8241 6.82672 11 7.40674 11 8.00008C11.004 8.39516 10.9292 8.78707 10.7798 9.15286C10.6305 9.51865 10.4096 9.85096 10.1303 10.1303C9.85089 10.4097 9.51857 10.6305 9.15278 10.7799C8.787 10.9292 8.39508 11.0041 8 11.0001ZM8 6.00008C7.73568 5.99392 7.47285 6.04145 7.22741 6.13978C6.98198 6.23811 6.75904 6.3852 6.57208 6.57216C6.38512 6.75912 6.23803 6.98205 6.1397 7.22749C6.04137 7.47292 5.99385 7.73575 6 8.00008C5.99385 8.26441 6.04137 8.52724 6.1397 8.77267C6.23803 9.01811 6.38512 9.24105 6.57208 9.42801C6.75904 9.61496 6.98198 9.76206 7.22741 9.86039C7.47285 9.95872 7.73568 10.0062 8 10.0001C8.26433 10.0062 8.52716 9.95872 8.7726 9.86039C9.01803 9.76206 9.24097 9.61496 9.42793 9.42801C9.61489 9.24105 9.76198 9.01811 9.86031 8.77267C9.95864 8.52724 10.0062 8.26441 10 8.00008C10.0062 7.73575 9.95864 7.47292 9.86031 7.22749C9.76198 6.98205 9.61489 6.75912 9.42793 6.57216C9.24097 6.3852 9.01803 6.23811 8.7726 6.13978C8.52716 6.04145 8.26433 5.99392 8 6.00008Z"
+        fill="#1A1C21"
+      />
+    </svg>
+  );
+};
+
+export const SettingsCogIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/SettingsCogIcon/SettingsCogIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SettingsIcon/SettingsIcon.tsx

@@ -0,0 +1,48 @@
+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 & { variant?: 'circle' | 'default' }) => {
+  const { variant, ...rest } = props;
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      {variant === 'circle' ? (
+        <>
+          <path
+            d="M10.8116 7.33256C10.8116 7.22318 10.8116 7.11381 10.8116 7.00006C10.8116 6.88631 10.8116 6.77693 10.8116 6.66318L11.6516 5.92818C11.8064 5.7917 11.908 5.60488 11.9384 5.40073C11.9689 5.19658 11.9261 4.98825 11.8178 4.81256L10.7853 3.06256C10.7086 2.92967 10.5983 2.8193 10.4654 2.74251C10.3326 2.66572 10.1819 2.62521 10.0284 2.62506C9.93336 2.62433 9.83878 2.6391 9.74845 2.66881L8.68532 3.02756C8.50177 2.90558 8.31031 2.79597 8.1122 2.69943L7.88907 1.59693C7.84907 1.39551 7.73949 1.21457 7.57952 1.0858C7.41956 0.957028 7.21939 0.888621 7.01407 0.892556H4.96657C4.76125 0.888621 4.56109 0.957028 4.40112 1.0858C4.24116 1.21457 4.13158 1.39551 4.09157 1.59693L3.86845 2.69943C3.66892 2.79594 3.476 2.90556 3.29095 3.02756L2.2497 2.65131C2.15839 2.62752 2.06384 2.61865 1.9697 2.62506C1.81626 2.62521 1.66555 2.66572 1.53271 2.74251C1.39986 2.8193 1.28954 2.92967 1.21282 3.06256L0.180323 4.81256C0.0782047 4.98799 0.040258 5.19347 0.0729819 5.3938C0.105706 5.59414 0.207064 5.77686 0.359698 5.91068L1.18657 6.66756C1.18657 6.77693 1.18657 6.88631 1.18657 7.00006C1.18657 7.11381 1.18657 7.22318 1.18657 7.33693L0.359698 8.07193C0.202753 8.20668 0.0986221 8.39268 0.0657848 8.59691C0.0329474 8.80114 0.0735273 9.0104 0.180323 9.18756L1.21282 10.9376C1.28954 11.0704 1.39986 11.1808 1.53271 11.2576C1.66555 11.3344 1.81626 11.3749 1.9697 11.3751C2.06479 11.3758 2.15936 11.361 2.2497 11.3313L3.31282 10.9726C3.49637 11.0945 3.68784 11.2041 3.88595 11.3007L4.10907 12.4032C4.14908 12.6046 4.25866 12.7855 4.41862 12.9143C4.57859 13.0431 4.77875 13.1115 4.98407 13.1076H7.04907C7.25439 13.1115 7.45456 13.0431 7.61452 12.9143C7.77449 12.7855 7.88407 12.6046 7.92407 12.4032L8.1472 11.3007C8.34673 11.2042 8.53965 11.0946 8.7247 10.9726L9.78345 11.3313C9.87378 11.361 9.96836 11.3758 10.0634 11.3751C10.2169 11.3749 10.3676 11.3344 10.5004 11.2576C10.6333 11.1808 10.7436 11.0704 10.8203 10.9376L11.8178 9.18756C11.9199 9.01212 11.9579 8.80664 11.9252 8.60631C11.8924 8.40597 11.7911 8.22325 11.6384 8.08943L10.8116 7.33256ZM10.0284 10.5001L8.52782 9.99256C8.17654 10.2901 7.77506 10.5227 7.3422 10.6794L7.03157 12.2501H4.96657L4.65595 10.6969C4.22651 10.5357 3.8272 10.3036 3.4747 10.0101L1.9697 10.5001L0.937198 8.75006L2.1272 7.70006C2.0463 7.24718 2.0463 6.78356 2.1272 6.33068L0.937198 5.25006L1.9697 3.50006L3.47032 4.00756C3.82161 3.71001 4.22309 3.47742 4.65595 3.32068L4.96657 1.75006H7.03157L7.3422 3.30318C7.77164 3.46437 8.17095 3.69656 8.52345 3.99006L10.0284 3.50006L11.0609 5.25006L9.87095 6.30006C9.95184 6.75293 9.95184 7.21656 9.87095 7.66943L11.0609 8.75006L10.0284 10.5001Z"
+            fill="#22242B"
+          />
+          <path
+            d="M5.99907 9.62506C5.4799 9.62506 4.97238 9.4711 4.5407 9.18266C4.10902 8.89422 3.77257 8.48426 3.57389 8.0046C3.37521 7.52494 3.32323 6.99714 3.42451 6.48794C3.5258 5.97874 3.7758 5.51101 4.14292 5.1439C4.51003 4.77679 4.97776 4.52678 5.48696 4.42549C5.99616 4.32421 6.52396 4.37619 7.00362 4.57487C7.48327 4.77355 7.89324 5.11 8.18168 5.54168C8.47012 5.97336 8.62407 6.48088 8.62407 7.00006C8.62758 7.34575 8.56208 7.68867 8.43141 8.00874C8.30073 8.3288 8.10751 8.61958 7.86305 8.86403C7.61859 9.10849 7.32782 9.30171 7.00776 9.43239C6.68769 9.56306 6.34477 9.62857 5.99907 9.62506ZM5.99907 5.25006C5.76779 5.24467 5.53781 5.28625 5.32305 5.37229C5.1083 5.45833 4.91323 5.58703 4.74964 5.75062C4.58605 5.91421 4.45734 6.10928 4.37131 6.32404C4.28527 6.53879 4.24369 6.76877 4.24907 7.00006C4.24369 7.23134 4.28527 7.46132 4.37131 7.67607C4.45734 7.89083 4.58605 8.0859 4.74964 8.24949C4.91323 8.41308 5.1083 8.54178 5.32305 8.62782C5.53781 8.71386 5.76779 8.75544 5.99907 8.75006C6.23036 8.75544 6.46034 8.71386 6.67509 8.62782C6.88985 8.54178 7.08492 8.41308 7.24851 8.24949C7.41209 8.0859 7.5408 7.89083 7.62684 7.67607C7.71288 7.46132 7.75446 7.23134 7.74907 7.00006C7.75446 6.76877 7.71288 6.53879 7.62684 6.32404C7.5408 6.10928 7.41209 5.91421 7.24851 5.75062C7.08492 5.58703 6.88985 5.45833 6.67509 5.37229C6.46034 5.28625 6.23036 5.24467 5.99907 5.25006Z"
+            fill="#22242B"
+          />
+        </>
+      ) : (
+        <>
+          <path
+            d="M15.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z"
+            fill="#22242B"
+          />
+          <path
+            d="M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z"
+            fill="#22242B"
+          />
+        </>
+      )}
+    </svg>
+  );
+};
+
+export const SettingsIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/SettingsIcon/SettingsIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;