@redocly/theme 0.70.0-next.9 → 0.71.0-next.0

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = ({
+  className,
+  checked = false,
+  onClick,
+}: IconProps & {
+  checked?: boolean;
+  onClick?: () => void;
+}) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
+  <span className={className} onClick={onClick}>
+    {checked ? (
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z"
+          fill="var(--checkbox-content-color-inverse)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z"
+          fill="var(--checkbox-box-color-active)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.36018 9.98574L10.9106 4.21938C11.0343 4.06448 10.9203 3.83984 10.7272 3.83984H10.0758C9.93597 3.83984 9.80268 3.90389 9.71608 4.01474L9.03424 4.8785L5.99975 8.72257L4.28308 6.54742C4.24025 6.49305 4.18567 6.44909 4.12342 6.41883C4.06118 6.38858 3.99269 6.37282 3.92348 6.37273H3.27208C3.07619 6.37273 2.96673 6.59854 3.08778 6.75208L5.64029 9.98581C5.82388 10.2182 6.17616 10.2168 6.36018 9.98574Z"
+          fill="var(--checkbox-box-color-active)"
+        />
+      </svg>
+    ) : (
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="var(--checkbox-box-color)"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z"
+          fill="var(--checkbox-content-color-inverse)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z"
+          fill="var(--checkbox-border-color)"
+        />
+      </svg>
+    )}
+  </span>
+);
+
+export const CheckboxIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
+})`
+  display: flex;
+
+  &:hover {
+    --checkbox-border-color: var(--checkbox-border-color-active);
+  }
+`;

package/src/icons/CheckboxIcon/variables.dark.ts

@@ -0,0 +1,8 @@
+import { css } from 'styled-components';
+
+export const checkboxDarkMode = css`
+  --checkbox-box-color-disabled: var(--color-warm-grey-3);
+  --checkbox-border-color-disabled: var(--border-color-primary);
+  --checkbox-content-color-inverse: transparent;
+  --checkbox-border-color: var(--color-brand-subtle-border, var(--checkbox-border-color-legacy));
+`;

package/src/icons/CheckboxIcon/variables.ts

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+
+export const checkbox = css`
+  --checkbox-content-color: var(--text-color-secondary);
+  --checkbox-content-color-hover: var(--text-color-primary);
+  --checkbox-content-color-focused: var(--text-color-primary);
+  --checkbox-content-color-disabled: var(--text-color-disabled);
+
+  --checkbox-box-color: transparent;
+  --checkbox-box-color-active: var(--color-primary-base, var(--checkbox-box-color-active-legacy));
+  --checkbox-box-color-focused: var(--color-warm-grey-9);
+  --checkbox-box-color-disabled: var(--color-warm-grey-1);
+
+  --checkbox-border-color: var(--color-primary-border, var(--checkbox-border-color-legacy));
+  --checkbox-border-color-active: var(--color-warm-grey-8);
+  --checkbox-border-color-disabled: var(--border-color-secondary);
+
+  --checkbox-content-color-inverse: transparent;
+`;

package/src/icons/CheckmarkFilledIcon/CheckmarkFilledIcon.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 1ZM7 10.7954L4.5 8.2954L5.2953 7.5L7 9.2046L10.705 5.5L11.5029 6.29295L7 10.7954Z" />
+  </svg>
+);
+
+export const CheckmarkFilledIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CheckmarkFilledIcon/CheckmarkFilledIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CheckmarkIcon/CheckmarkIcon.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.5 12L2 7.49997L2.707 6.79297L6.5 10.5855L13.293 3.79297L14 4.49997L6.5 12Z" />
+  </svg>
+);
+
+export const CheckmarkIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CheckmarkIcon/CheckmarkIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon.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 10.707L4.5 8.2065L5.2065 7.5L7 9.293L10.7925 5.5L11.5 6.2075L7 10.707Z" />
+    <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" />
+  </svg>
+);
+
+export const CheckmarkOutlineIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronDownIcon/ChevronDownIcon.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="M8 10.9998L3 5.9998L3.7 5.2998L8 9.5998L12.3 5.2998L13 5.9998L8 10.9998Z" />
+  </svg>
+);
+
+export const ChevronDownIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ChevronDownIcon/ChevronDownIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  flex-shrink: 0;
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronLeftIcon/ChevronLeftIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M5 8L10 3L10.7 3.7L6.4 8L10.7 12.3L10 13L5 8Z" />
+  </svg>
+);
+
+export const ChevronLeftIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ChevronLeftIcon/ChevronLeftIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronRightIcon/ChevronRightIcon.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="M11 8L6.00002 13L5.30002 12.3L9.60002 8L5.30002 3.7L6.00002 3L11 8Z" />
+  </svg>
+);
+
+export const ChevronRightIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ChevronRightIcon/ChevronRightIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronSortIcon/ChevronSortIcon.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 = ({ className, onClick }: IconProps & { onClick?: () => void }) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
+  <svg
+    className={className}
+    onClick={onClick}
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="inherit"
+  >
+    <path d="M7 12.25L3.9375 9.1875L4.55437 8.57063L7 11.0119L9.44563 8.57063L10.0625 9.1875L7 12.25Z" />
+    <path d="M7 1.75L10.0625 4.8125L9.44563 5.42937L7 2.98812L4.55437 5.42937L3.9375 4.8125L7 1.75Z" />
+  </svg>
+);
+
+export const ChevronSortIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ChevronSortIcon/ChevronSortIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size};
+  width: ${({ size }) => size};
+`;

package/src/icons/ChevronUpIcon/ChevronUpIcon.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="M8 5L13 10L12.3 10.7L8 6.4L3.7 10.7L3 10L8 5Z" />
+  </svg>
+);
+
+export const ChevronUpIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ChevronUpIcon/ChevronUpIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  flex-shrink: 0;
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CircleDashIcon/CircleDashIcon.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 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.84997 2.35009C3.27647 2.79018 2.77103 3.31247 2.34997 3.90009L3.14997 4.50009C3.5172 3.99081 3.9549 3.53627 4.44997 3.15009L3.84997 2.35009Z" />
+    <path d="M2.29997 6.15009L1.34997 5.85009C1.10845 6.54077 0.98999 7.26847 0.999972 8.00009H1.99997C1.99794 7.37116 2.09929 6.74616 2.29997 6.15009Z" />
+    <path d="M1.34997 10.2001C1.58185 10.8973 1.91909 11.5549 2.34997 12.1501L3.14997 11.5501C2.78851 11.044 2.50221 10.4882 2.29997 9.90009L1.34997 10.2001Z" />
+    <path d="M3.89997 13.6501C4.49514 14.081 5.15275 14.4182 5.84997 14.6501L6.14997 13.7001C5.56184 13.4979 5.00608 13.2116 4.49997 12.8501L3.89997 13.6501Z" />
+    <path d="M5.84997 1.35009L6.14997 2.30009C6.74604 2.09942 7.37103 1.99806 7.99997 2.00009V1.00009C7.26835 0.990112 6.54065 1.10858 5.84997 1.35009Z" />
+    <path d="M12.1 13.6501C12.6889 13.2111 13.211 12.689 13.65 12.1001L12.85 11.5001C12.4781 12.022 12.0219 12.4783 11.5 12.8501L12.1 13.6501Z" />
+    <path d="M13.7 9.85009L14.65 10.1501C14.8675 9.45352 14.9853 8.72968 15 8.00009H14C14.002 8.62903 13.9007 9.25403 13.7 9.85009Z" />
+    <path d="M14.6 5.80009C14.3681 5.10288 14.0309 4.44526 13.6 3.85009L12.8 4.45009C13.1614 4.9562 13.4477 5.51196 13.65 6.10009L14.6 5.80009Z" />
+    <path d="M12.05 2.30009C11.4548 1.86921 10.7972 1.53197 10.1 1.30009L9.79997 2.25009C10.3881 2.45233 10.9439 2.73863 11.45 3.10009L12.05 2.30009Z" />
+    <path d="M10.15 14.6501L9.84997 13.7001C9.25391 13.9008 8.62891 14.0021 7.99997 14.0001V15.0001C8.72667 14.9568 9.44706 14.8395 10.15 14.6501Z" />
+  </svg>
+);
+
+export const CircleDashIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CircleDashIcon/CircleDashIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ClaudeIcon/ClaudeIcon.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="M4.03188 9.88255L6.60172 8.62367L6.64494 8.51434L6.60172 8.45352H6.47649L6.04701 8.43042L4.57865 8.39577L3.3052 8.34957L2.07142 8.29182L1.761 8.23408L1.46997 7.89915L1.49996 7.73207L1.761 7.57884L2.13492 7.60733L2.96126 7.65661L4.2012 7.7313L5.10074 7.77749L6.43328 7.89838H6.64494L6.67492 7.82369L6.60261 7.77749L6.54616 7.7313L5.26301 6.97212L3.87402 6.16983L3.14646 5.70785L2.75313 5.47379L2.5547 5.25435L2.46916 4.77544L2.82633 4.43204L3.30608 4.46052L3.42866 4.48901L3.91459 4.81548L4.95258 5.5169L6.30805 6.38849L6.50648 6.53248L6.58585 6.4832L6.59555 6.44855L6.50648 6.31843L5.76921 5.15503L4.98256 3.9716L4.63245 3.48114L4.53985 3.18702C4.50722 3.06614 4.48341 2.9645 4.48341 2.84054L4.88996 2.35855L5.11485 2.29541L5.65721 2.35855L5.88562 2.53179L6.22251 3.20473L6.7684 4.26419L7.61502 5.70477L7.86284 6.1321L7.99512 6.52786L8.04451 6.64874H8.13005V6.57944L8.19972 5.76791L8.32848 4.77159L8.45371 3.48961L8.49692 3.1285L8.70152 2.69579L9.10807 2.46172L9.42556 2.59415L9.6866 2.92061L9.65044 3.13158L9.49523 4.01241L9.19097 5.39217L8.99254 6.31612H9.10807L9.24036 6.20062L9.77567 5.58004L10.6752 4.59835L11.0721 4.20875L11.5351 3.77834L11.8323 3.57354H12.394L12.8076 4.1102L12.6224 4.66456L12.0439 5.30517L11.5642 5.84799L10.8763 6.65644L10.4468 7.3032L10.4865 7.35479L10.5888 7.34632L12.1427 7.05759L12.9822 6.92515L13.9841 6.77501L14.4374 6.9598L14.4868 7.14767L14.3086 7.53188L13.2371 7.76287L11.9804 7.9823L10.109 8.36882L10.0861 8.38345L10.1126 8.41194L10.9556 8.48123L11.3163 8.49817H12.1991L13.843 8.6052L14.2725 8.85312L14.53 9.15649L14.4868 9.38747L13.8253 9.68159L12.9329 9.4968L10.8498 9.06409L10.1355 8.90856H10.0367V8.96014L10.632 9.46832L11.7229 10.3284L13.089 11.4371L13.1586 11.7112L12.9831 11.9276L12.7979 11.9045L11.5977 11.116L11.1347 10.7611L10.0861 9.99035H10.0164V10.0712L10.2581 10.3799L11.5342 12.0546L11.6003 12.5682L11.5077 12.7352L11.177 12.8361L10.8137 12.7784L10.0667 11.8629L9.29592 10.8319L8.67418 9.90796L8.59834 9.94569L8.23147 13.3959L8.0595 13.5722L7.66264 13.7046L7.33193 13.4852L7.15644 13.1302L7.33193 12.4288L7.54359 11.5133L7.71556 10.7857L7.87077 9.88178L7.96337 9.5815L7.9572 9.56148L7.88136 9.56995L7.10088 10.5054L5.91385 11.906L4.97463 12.7837L4.74974 12.8615L4.35994 12.6852L4.3961 12.3703L4.61393 12.09L5.91385 10.6463L6.69785 9.75166L7.20406 9.23502L7.20053 9.16033H7.17055L3.71792 11.1176L3.10324 11.1869L2.83867 10.9705L2.8713 10.6155L2.99653 10.5001L4.03452 9.87639L4.031 9.87947L4.03188 9.88255Z" />
+  </svg>
+);
+
+export const ClaudeIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ClaudeIcon/ClaudeIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CleanIcon/CleanIcon.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="5 5 16 16" fill="inherit" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13.7499 13.75H16.3749V12.875H13.7499V13.75Z" />
+    <path d="M15.4999 17.25H18.1249V16.375H15.4999V17.25Z" />
+    <path d="M14.6249 15.5H17.2499V14.625H14.6249V15.5Z" />
+    <path d="M12.4386 13.75C12.4355 13.3808 12.337 13.0187 12.1527 12.6989C11.9684 12.379 11.7045 12.1122 11.3867 11.9244L14.6249 6.3125L13.8676 5.875L10.5532 11.6176C10.1463 11.5267 9.72319 11.5392 9.32244 11.6541C8.9217 11.769 8.55615 11.9825 8.25925 12.2751C6.62142 13.855 6.74825 17.5484 6.75425 17.705C6.75877 17.818 6.80685 17.9248 6.88841 18.0031C6.96998 18.0814 7.07868 18.1251 7.19175 18.125H13.7504C13.8422 18.125 13.9317 18.0961 14.0062 18.0424C14.0807 17.9887 14.1364 17.913 14.1654 17.8258C14.1945 17.7387 14.1954 17.6447 14.168 17.5571C14.1406 17.4694 14.0864 17.3926 14.0129 17.3375C12.4643 16.1755 12.4386 13.7735 12.4386 13.75ZM10.2192 12.4362C10.5694 12.4401 10.9046 12.5788 11.1551 12.8235C11.4056 13.0682 11.5521 13.4 11.5642 13.75C11.5642 13.7667 11.565 13.841 11.5715 13.9551L8.99053 12.8073C9.16053 12.6671 9.3567 12.5621 9.56764 12.4984C9.77857 12.4347 10.0001 12.4136 10.2192 12.4362ZM11.759 17.25C11.4094 16.8939 11.1866 16.4327 11.1249 15.9375H10.2499C10.2812 16.4031 10.4268 16.8539 10.6735 17.25H9.70085C9.52091 16.6822 9.41143 16.0945 9.37487 15.5H8.49987C8.52811 16.0927 8.62579 16.6801 8.7909 17.25H7.62487C7.63843 16.4466 7.75175 14.6722 8.41355 13.5082L11.7092 14.9738C11.8678 15.796 12.2055 16.5732 12.6985 17.25H11.759Z" />
+  </svg>
+);
+
+export const CleanIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CookieIcon/CookieIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CloseFilledIcon/CloseFilledIcon.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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 1C4.1 1 1 4.1 1 8C1 11.9 4.1 15 8 15C11.9 15 15 11.9 15 8C15 4.1 11.9 1 8 1ZM10.7 11.5L8 8.8L5.3 11.5L4.5 10.7L7.2 8L4.5 5.3L5.3 4.5L8 7.2L10.7 4.5L11.5 5.3L8.8 8L11.5 10.7L10.7 11.5Z" />
+  </svg>
+);
+
+export const CloseFilledIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CloseFilledIcon/CloseFilledIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CloseIcon/CloseIcon.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 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <rect fill="none" />
+    <path d="M18 7.05L16.95 6L12 10.95L7.05 6L6 7.05L10.95 12L6 16.95L7.05 18L12 13.05L16.95 18L18 16.95L13.05 12L18 7.05Z" />
+  </svg>
+);
+
+export const CloseIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CloseIcon/CloseIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;

package/src/icons/CloseOutlineIcon/CloseOutlineIcon.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 xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" {...props}>
+    <g>
+      <path d="M7 0.875C3.5875 0.875 0.875 3.5875 0.875 7C0.875 10.4125 3.5875 13.125 7 13.125C10.4125 13.125 13.125 10.4125 13.125 7C13.125 3.5875 10.4125 0.875 7 0.875ZM7 12.25C4.1125 12.25 1.75 9.8875 1.75 7C1.75 4.1125 4.1125 1.75 7 1.75C9.8875 1.75 12.25 4.1125 12.25 7C12.25 9.8875 9.8875 12.25 7 12.25Z" />
+      <path d="M9.3625 10.0625L7 7.7L4.6375 10.0625L3.9375 9.3625L6.3 7L3.9375 4.6375L4.6375 3.9375L7 6.3L9.3625 3.9375L10.0625 4.6375L7.7 7L10.0625 9.3625L9.3625 10.0625Z" />
+    </g>
+  </svg>
+);
+
+export const CloseOutlineIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CloseOutlineIcon/CloseOutlineIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;

package/src/icons/CloudUploadIcon/CloudUploadIcon.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="M5.50001 8.99979L6.20501 9.70479L7.50001 8.41479V14.4998H8.50001V8.41479L9.79501 9.70479L10.5 8.99979L8.00001 6.49979L5.50001 8.99979Z" />
+    <path d="M11.75 10.9998H11.5V9.99979H11.75C12.3467 10.0237 12.9285 9.80949 13.3674 9.40442C13.8062 8.99934 14.0661 8.43652 14.09 7.83979C14.1139 7.24305 13.8997 6.66127 13.4946 6.22243C13.0896 5.7836 12.5267 5.52365 11.93 5.49979H11.5L11.45 5.08979C11.3391 4.24801 10.9259 3.47526 10.2876 2.91548C9.64916 2.3557 8.82906 2.04706 7.98001 2.04706C7.13095 2.04706 6.31085 2.3557 5.67246 2.91548C5.03407 3.47526 4.62093 4.24801 4.51001 5.08979L4.50001 5.49979H4.07001C3.47327 5.52365 2.91045 5.7836 2.50538 6.22243C2.1003 6.66127 1.88614 7.24305 1.91001 7.83979C1.93387 8.43652 2.19382 8.99934 2.63265 9.40442C3.07149 9.80949 3.65327 10.0237 4.25001 9.99979H4.50001V10.9998H4.25001C3.44821 10.9947 2.67659 10.6934 2.0835 10.1538C1.49041 9.61425 1.11771 8.87447 1.03707 8.07672C0.956428 7.27898 1.17353 6.47957 1.64663 5.83221C2.11974 5.18485 2.81545 4.73523 3.60001 4.56979C3.81586 3.56305 4.37042 2.66077 5.17116 2.01352C5.9719 1.36627 6.97038 1.01318 8.00001 1.01318C9.02963 1.01318 10.0281 1.36627 10.8288 2.01352C11.6296 2.66077 12.1842 3.56305 12.4 4.56979C13.1846 4.73523 13.8803 5.18485 14.3534 5.83221C14.8265 6.47957 15.0436 7.27898 14.9629 8.07672C14.8823 8.87447 14.5096 9.61425 13.9165 10.1538C13.3234 10.6934 12.5518 10.9947 11.75 10.9998Z" />
+  </svg>
+);
+
+export const CloudUploadIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CloudUploadIcon/CloudUploadIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CodeIcon/CodeIcon.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="M15.5 8.00002L12 11.5L11.295 10.795L14.085 8.00002L11.295 5.20502L12 4.50002L15.5 8.00002Z" />
+    <path d="M0.5 8.00002L4 4.50002L4.705 5.20502L1.915 8.00002L4.705 10.795L4 11.5L0.5 8.00002Z" />
+    <path d="M8.81944 3.00049L6.20925 12.7418L7.17518 13.0007L9.78537 3.25931L8.81944 3.00049Z" />
+  </svg>
+);
+
+export const CodeIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CodeIcon/CodeIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CodexIcon/CodexIcon.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 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.073zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997z" />
+  </svg>
+);
+
+export const CodexIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CodexIcon/CodexIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ColorPaletteIcon/ColorPaletteIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.5 5.25456C3.98325 5.25456 4.375 4.86281 4.375 4.37956C4.375 3.89631 3.98325 3.50456 3.5 3.50456C3.01675 3.50456 2.625 3.89631 2.625 4.37956C2.625 4.86281 3.01675 5.25456 3.5 5.25456Z" />
+    <path d="M6.125 3.94206C6.60825 3.94206 7 3.55031 7 3.06706C7 2.58381 6.60825 2.19206 6.125 2.19206C5.64175 2.19206 5.25 2.58381 5.25 3.06706C5.25 3.55031 5.64175 3.94206 6.125 3.94206Z" />
+    <path d="M8.75 5.25456C9.23325 5.25456 9.625 4.86281 9.625 4.37956C9.625 3.89631 9.23325 3.50456 8.75 3.50456C8.26675 3.50456 7.875 3.89631 7.875 4.37956C7.875 4.86281 8.26675 5.25456 8.75 5.25456Z" />
+    <path d="M9.1875 7.87956C9.67075 7.87956 10.0625 7.48781 10.0625 7.00456C10.0625 6.52131 9.67075 6.12956 9.1875 6.12956C8.70425 6.12956 8.3125 6.52131 8.3125 7.00456C8.3125 7.48781 8.70425 7.87956 9.1875 7.87956Z" />
+    <path d="M7.4375 10.0671C7.92075 10.0671 8.3125 9.67531 8.3125 9.19206C8.3125 8.70881 7.92075 8.31706 7.4375 8.31706C6.95425 8.31706 6.5625 8.70881 6.5625 9.19206C6.5625 9.67531 6.95425 10.0671 7.4375 10.0671Z" />
+    <path d="M6.36125 0.00455826C5.53725 -0.0272487 4.7153 0.107661 3.9447 0.401198C3.17409 0.694735 2.4707 1.14086 1.87668 1.71281C1.28266 2.28477 0.810249 2.97079 0.487771 3.72974C0.165293 4.48869 -0.000611956 5.30494 1.69613e-06 6.12956C-2.00107e-05 6.45389 0.074769 6.77385 0.218553 7.06457C0.362337 7.35528 0.57124 7.60891 0.829017 7.80574C1.08679 8.00256 1.3865 8.13728 1.70482 8.1994C2.02315 8.26153 2.35151 8.24939 2.66438 8.16393L3.15438 8.02831C3.3493 7.9751 3.55388 7.96761 3.75217 8.00643C3.95047 8.04526 4.13712 8.12934 4.29759 8.25212C4.45806 8.37491 4.58801 8.53309 4.67733 8.71433C4.76664 8.89558 4.8129 9.095 4.8125 9.29706V10.9421C4.8125 11.2902 4.95078 11.624 5.19692 11.8701C5.44307 12.1163 5.77691 12.2546 6.125 12.2546C6.94962 12.2552 7.76587 12.0893 8.52482 11.7668C9.28377 11.4443 9.96979 10.9719 10.5417 10.3779C11.1137 9.78386 11.5598 9.08046 11.8534 8.30986C12.1469 7.53926 12.2818 6.71731 12.25 5.89331C12.1865 4.35185 11.5457 2.89063 10.4548 1.79973C9.36393 0.708834 7.90271 0.0680368 6.36125 0.00455826ZM9.90938 9.76518C9.42087 10.2766 8.83352 10.6835 8.18297 10.961C7.53243 11.2385 6.83227 11.3809 6.125 11.3796C6.00897 11.3796 5.89769 11.3335 5.81564 11.2514C5.7336 11.1694 5.6875 11.0581 5.6875 10.9421V9.29706C5.6875 8.7169 5.45703 8.1605 5.0468 7.75026C4.63656 7.34003 4.08016 7.10956 3.5 7.10956C3.30341 7.10991 3.10774 7.13639 2.91813 7.18831L2.42813 7.32393C2.24511 7.37298 2.05326 7.37922 1.86744 7.34216C1.68163 7.3051 1.50685 7.22574 1.35665 7.11024C1.20645 6.99474 1.08488 6.84619 1.00135 6.67612C0.917824 6.50605 0.87459 6.31903 0.875002 6.12956C0.874459 5.42247 1.01676 4.72256 1.29336 4.07181C1.56996 3.42107 1.97517 2.83291 2.48466 2.34261C2.99416 1.85232 3.59745 1.47 4.25833 1.21859C4.91922 0.967181 5.62408 0.851864 6.33063 0.879558C7.64627 0.948081 8.8899 1.50154 9.82146 2.4331C10.753 3.36466 11.3065 4.60829 11.375 5.92393C11.4051 6.63092 11.2907 7.33662 11.0387 7.99785C10.7867 8.65908 10.4024 9.26195 9.90938 9.76956V9.76518Z" />
+  </svg>
+);
+
+export const ColorPaletteIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ColorPaletteIcon/ColorPaletteIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ConnectIcon/ConnectIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.5 7.00875C9.74669 7.00947 9.01371 7.25321 8.40999 7.70375L6.29999 5.59375C6.75586 4.99443 7.00185 4.26175 6.99999 3.50875C7.00197 2.72021 6.73759 1.9541 6.24973 1.33459C5.76186 0.715073 5.07908 0.278462 4.31205 0.0955081C3.54502 -0.0874454 2.73868 -0.00601915 2.02371 0.326591C1.30874 0.659201 0.727035 1.2235 0.372873 1.92805C0.0187108 2.63259 -0.087157 3.43608 0.0724264 4.20832C0.23201 4.98055 0.647693 5.67627 1.25211 6.18272C1.85652 6.68917 2.61425 6.97668 3.4025 6.99864C4.19074 7.02061 4.96331 6.77576 5.59499 6.30375L7.69999 8.41375C7.22812 9.04527 6.98326 9.81759 7.00508 10.6056C7.0269 11.3937 7.31412 12.1512 7.82021 12.7557C8.32631 13.3601 9.02164 13.776 9.79358 13.9359C10.5655 14.0959 11.3688 13.9906 12.0735 13.637C12.7781 13.2834 13.3427 12.7024 13.6758 11.9879C14.009 11.2734 14.0912 10.4674 13.9091 9.70036C13.727 8.93334 13.2913 8.25026 12.6726 7.76174C12.0539 7.27323 11.2883 7.00791 10.5 7.00875ZM0.999993 3.50875C0.999993 3.0143 1.14662 2.53095 1.42132 2.11983C1.69602 1.70871 2.08647 1.38827 2.54328 1.19906C3.0001 1.00984 3.50277 0.960328 3.98772 1.05679C4.47267 1.15325 4.91813 1.39136 5.26776 1.74099C5.61739 2.09062 5.85549 2.53608 5.95196 3.02103C6.04842 3.50598 5.99891 4.00865 5.80969 4.46546C5.62047 4.92228 5.30004 5.31272 4.88892 5.58743C4.4778 5.86213 3.99445 6.00875 3.49999 6.00875C2.83695 6.00875 2.20107 5.74536 1.73223 5.27652C1.26339 4.80768 0.999993 4.1718 0.999993 3.50875Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const ConnectIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ConnectIcon/ConnectIcon',
+})`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+`;

package/src/icons/ContrastIcon/ContrastIcon.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.685 5.92C14.5508 5.48498 14.3732 5.06454 14.155 4.665C13.8323 4.07201 13.4265 3.52818 12.95 3.05C11.971 2.07111 10.7237 1.40449 9.36586 1.13445C8.00801 0.864415 6.60058 1.00308 5.32154 1.53291C4.0425 2.06275 2.94929 2.95996 2.18015 4.11109C1.41101 5.26221 1.00049 6.61556 1.00049 8C1.00049 9.38444 1.41101 10.7378 2.18015 11.8889C2.94929 13.04 4.0425 13.9373 5.32154 14.4671C6.60058 14.9969 8.00801 15.1356 9.36586 14.8656C10.7237 14.5955 11.971 13.9289 12.95 12.95C13.4265 12.4718 13.8323 11.928 14.155 11.335C14.3732 10.9355 14.5508 10.515 14.685 10.08C15.1065 8.72538 15.1065 7.27463 14.685 5.92ZM1.99998 8C1.99998 6.4087 2.63212 4.88258 3.75734 3.75736C4.88256 2.63214 6.40868 2 7.99998 2V14C6.40868 14 4.88256 13.3679 3.75734 12.2426C2.63212 11.1174 1.99998 9.5913 1.99998 8Z" />
+  </svg>
+);
+
+export const ContrastIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ContrastIcon/ContrastIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;