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

package/src/icons/SelectIcon/SelectIcon.tsx

@@ -1,17 +1,17 @@
 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) => (
+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"
-    className={className}
+    {...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" />
@@ -23,8 +23,14 @@ const Icon = ({ className }: IconProps) => (
   </svg>
 );
 
-export const SelectIcon = styled(Icon)`
-  width: 1.3em;
-  height: 1.3em;
+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/SidePanelCloseIcon/SidePanelCloseIcon.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" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M14 2H2C1.45 2 1 2.45 1 3V13C1 13.55 1.45 14 2 14H14C14.55 14 15 13.55 15 13V3C15 2.45 14.55 2 14 2ZM5 13H2V3H5V13ZM14 7.5H8.9L10.7 5.7L10 5L7 8L10 11L10.7 10.3L8.9 8.5H14V13H6V3H14V7.5Z" />
+  </svg>
+);
+
+export const SidePanelCloseIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SidePanelCloseIcon/SidePanelCloseIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SidePanelOpenIcon/SidePanelOpenIcon.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 2H2C1.45 2 1 2.45 1 3V13C1 13.55 1.45 14 2 14H14C14.55 14 15 13.55 15 13V3C15 2.45 14.55 2 14 2ZM5 13H2V3H5V13ZM14 13H6V8.5H11.1L9.3 10.3L10 11L13 8L10 5L9.3 5.7L11.1 7.5H6V3H14V13Z" />
+  </svg>
+);
+
+export const SidePanelOpenIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SidePanelOpenIcon/SidePanelOpenIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/Spinner/Spinner.tsx

@@ -0,0 +1,19 @@
+import styled, { keyframes } from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { CircleDashIcon } from '@redocly/theme/icons/CircleDashIcon/CircleDashIcon';
+
+const rotate = keyframes`
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const Spinner = styled(CircleDashIcon).attrs(() => ({
+  'data-component-name': 'icons/Spinner/Spinner',
+}))<IconProps>`
+  animation: 2s ${rotate} linear infinite;
+`;

package/src/icons/SpinnerIcon/SpinnerIcon.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export interface SpinnerIconProps {
-  className?: string;
-}
-export const Icon = ({ className }: SpinnerIconProps) => (
-  <svg className={className} viewBox="0 -1 38 40" strokeOpacity=".5">
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { breakpoints, getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 -1 38 40" strokeOpacity=".5" {...props}>
     <g fill="none" fillRule="evenodd">
       <g transform="translate(1 1)" strokeWidth="4">
         <circle strokeOpacity=".3" cx="18" cy="18" r="18" />
@@ -25,15 +26,19 @@ export const Icon = ({ className }: SpinnerIconProps) => (
 );
 
 export const SpinnerIcon = styled(Icon).attrs(() => ({
-  'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+  'data-component-name': 'icons/SpinnerIcon/SpinnerIcon',
 }))`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '1em'};
+  width: ${({ size }) => size || '1em'};
   cursor: pointer;
-  width: 1em;
-  height: 1em;
   left: 0.8em;
   stroke: var(--search-input-text-color);
 
-  ${({ theme }) => theme.mediaQueries.medium} {
+  @media screen and (min-width: ${breakpoints.medium}) {
     width: 1.2em;
     height: 1.2em;
   }

package/src/icons/StarFilledIcon/StarFilledIcon.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.00001 1L5.72501 5.61L0.640015 6.345L4.32001 9.935L3.45001 15L8.00001 12.61L12.55 15L11.68 9.935L15.36 6.35L10.275 5.61L8.00001 1Z" />
+  </svg>
+);
+
+export const StarFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/StarFilledIcon/StarFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/StarIcon/StarIcon.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.00001 3.26L9.38001 6.05L9.61001 6.55L10.11 6.625L13.19 7.07L11 9.22L10.625 9.585L10.715 10.085L11.24 13.15L8.48501 11.705L8.00001 11.5L7.53501 11.745L4.78001 13.17L5.28001 10.105L5.37001 9.605L5.00001 9.22L2.79001 7.045L5.87001 6.6L6.37001 6.525L6.60001 6.025L8.00001 3.26ZM8.00001 1L5.72501 5.61L0.640015 6.345L4.32001 9.935L3.45001 15L8.00001 12.61L12.55 15L11.68 9.935L15.36 6.35L10.275 5.61L8.00001 1Z" />
+  </svg>
+);
+
+export const StarIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/StarIcon/StarIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SubtractIcon/SubtractIcon.tsx

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

package/src/icons/SunIcon/SunIcon.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 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 6.00293C8.39556 6.00293 8.78224 6.12023 9.11114 6.33999C9.44004 6.55975 9.69638 6.87211 9.84776 7.23756C9.99913 7.60301 10.0387 8.00515 9.96157 8.39311C9.8844 8.78107 9.69392 9.13744 9.41421 9.41714C9.13451 9.69685 8.77814 9.88733 8.39018 9.9645C8.00222 10.0417 7.60009 10.0021 7.23463 9.85069C6.86918 9.69931 6.55682 9.44297 6.33706 9.11407C6.1173 8.78517 6 8.39849 6 8.00293C6.0006 7.47268 6.2115 6.96432 6.58644 6.58937C6.96139 6.21443 7.46975 6.00353 8 6.00293ZM8 5.00293C7.40666 5.00293 6.82664 5.17888 6.33329 5.50852C5.83994 5.83817 5.45542 6.3067 5.22836 6.85488C5.0013 7.40306 4.94189 8.00626 5.05764 8.5882C5.1734 9.17014 5.45912 9.70469 5.87868 10.1243C6.29824 10.5438 6.83279 10.8295 7.41473 10.9453C7.99667 11.061 8.59987 11.0016 9.14805 10.7746C9.69623 10.5475 10.1648 10.163 10.4944 9.66964C10.8241 9.17629 11 8.59627 11 8.00293C11 7.20728 10.6839 6.44422 10.1213 5.88161C9.55871 5.319 8.79565 5.00293 8 5.00293Z" />
+    <path d="M3.40382 2.6997L2.69679 3.40674L4.4497 5.15966L5.15674 4.45262L3.40382 2.6997Z" />
+    <path d="M3.5 7.50293H1V8.50293H3.5V7.50293Z" />
+    <path d="M4.4497 10.8462L2.69678 12.5991L3.40382 13.3062L5.15674 11.5532L4.4497 10.8462Z" />
+    <path d="M8.5 12.5029H7.5V15.0029H8.5V12.5029Z" />
+    <path d="M11.5503 10.8462L10.8433 11.5532L12.5962 13.3062L13.3032 12.5991L11.5503 10.8462Z" />
+    <path d="M15 7.50293H12.5V8.50293H15V7.50293Z" />
+    <path d="M12.5962 2.69971L10.8433 4.45263L11.5503 5.15966L13.3032 3.40674L12.5962 2.69971Z" />
+    <path d="M8.5 1.00293H7.5V3.50293H8.5V1.00293Z" />
+  </svg>
+);
+
+export const SunIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/MoonIcon/MoonIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/TableBuiltIcon/TableBuiltIcon.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 4H12V2C11.9997 1.73489 11.8942 1.48072 11.7067 1.29326C11.5193 1.10579 11.2651 1.00033 11 1H2C1.73489 1.00033 1.48072 1.10579 1.29326 1.29326C1.10579 1.48072 1.00033 1.73489 1 2V11C1.00033 11.2651 1.10579 11.5193 1.29326 11.7067C1.48072 11.8942 1.73489 11.9997 2 12H4V14C4.00033 14.2651 4.10579 14.5193 4.29326 14.7067C4.48072 14.8942 4.73488 14.9997 5 15H14C14.2651 14.9997 14.5193 14.8942 14.7067 14.7067C14.8942 14.5193 14.9997 14.2651 15 14V5C14.9997 4.73488 14.8942 4.48072 14.7067 4.29326C14.5193 4.10579 14.2651 4.00033 14 4ZM11 11H7V8.5H11V11ZM11 7.5H7V5H11V7.5ZM6 7.5H2V5H6V7.5ZM11 2V4H2V2H11ZM2 11V8.5H6V11H2ZM14 14H5V12H11C11.2651 11.9997 11.5193 11.8942 11.7067 11.7067C11.8942 11.5193 11.9997 11.2651 12 11V5H14V14Z" />
+  </svg>
+);
+
+export const TableBuiltIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/TableBuiltIcon/TableBuiltIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/TimeIcon/TimeIcon.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 15C6.61553 15 5.26216 14.5895 4.11101 13.8203C2.95987 13.0511 2.06266 11.9579 1.53285 10.6788C1.00303 9.3997 0.86441 7.99224 1.13451 6.63437C1.4046 5.2765 2.07129 4.02922 3.05026 3.05026C4.02922 2.07129 5.2765 1.4046 6.63437 1.13451C7.99224 0.86441 9.3997 1.00303 10.6788 1.53285C11.9579 2.06266 13.0511 2.95987 13.8203 4.11101C14.5895 5.26216 15 6.61553 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 2C6.81332 2 5.65328 2.3519 4.66658 3.01119C3.67989 3.67047 2.91085 4.60755 2.45673 5.7039C2.0026 6.80026 1.88378 8.00666 2.11529 9.17054C2.3468 10.3344 2.91825 11.4035 3.75736 12.2426C4.59648 13.0818 5.66558 13.6532 6.82946 13.8847C7.99335 14.1162 9.19975 13.9974 10.2961 13.5433C11.3925 13.0892 12.3295 12.3201 12.9888 11.3334C13.6481 10.3467 14 9.18669 14 8C14 6.4087 13.3679 4.88258 12.2426 3.75736C11.1174 2.63214 9.5913 2 8 2Z" />
+    <path d="M10.295 11L7.5 8.205V3.5H8.5V7.79L11 10.295L10.295 11Z" />
+  </svg>
+);
+
+export const TimeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/TimeIcon/TimeIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/TrashCanIcon/TrashCanIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7 6H6V12H7V6Z" />
+    <path d="M10 6H9V12H10V6Z" />
+    <path d="M2 3V4H3V14C3 14.2652 3.10536 14.5196 3.29289 14.7071C3.48043 14.8946 3.73478 15 4 15H12C12.2652 15 12.5196 14.8946 12.7071 14.7071C12.8946 14.5196 13 14.2652 13 14V4H14V3H2ZM4 14V4H12V14H4Z" />
+    <path d="M10 1H6V2H10V1Z" />
+  </svg>
+);
+
+export const TrashCanIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/TrashCanIcon/TrashCanIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;

package/src/icons/UserIcon/UserIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M8 2C8.49445 2 8.9778 2.14662 9.38893 2.42133C9.80005 2.69603 10.1205 3.08648 10.3097 3.54329C10.4989 4.00011 10.5484 4.50277 10.452 4.98773C10.3555 5.47268 10.1174 5.91814 9.76777 6.26777C9.41814 6.6174 8.97268 6.8555 8.48773 6.95196C8.00277 7.04843 7.50011 6.99892 7.04329 6.8097C6.58648 6.62048 6.19603 6.30005 5.92133 5.88893C5.64662 5.4778 5.5 4.99445 5.5 4.5C5.5 3.83696 5.76339 3.20107 6.23223 2.73223C6.70107 2.26339 7.33696 2 8 2ZM8 1C7.30777 1 6.63108 1.20527 6.0555 1.58986C5.47993 1.97444 5.03133 2.52107 4.76642 3.16061C4.50152 3.80015 4.4322 4.50388 4.56725 5.18282C4.7023 5.86175 5.03564 6.48539 5.52513 6.97487C6.01461 7.46436 6.63825 7.7977 7.31718 7.93275C7.99612 8.0678 8.69985 7.99849 9.33939 7.73358C9.97893 7.46867 10.5256 7.02007 10.9101 6.4445C11.2947 5.86892 11.5 5.19223 11.5 4.5C11.5 3.57174 11.1313 2.6815 10.4749 2.02513C9.8185 1.36875 8.92826 1 8 1Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M13 15H12V12.5C12 12.1717 11.9353 11.8466 11.8097 11.5433C11.6841 11.24 11.4999 10.9644 11.2678 10.7322C11.0356 10.5001 10.76 10.3159 10.4567 10.1903C10.1534 10.0647 9.8283 10 9.5 10H6.5C5.83696 10 5.20107 10.2634 4.73223 10.7322C4.26339 11.2011 4 11.837 4 12.5V15H3V12.5C3 11.5717 3.36875 10.6815 4.02513 10.0251C4.6815 9.36875 5.57174 9 6.5 9H9.5C10.4283 9 11.3185 9.36875 11.9749 10.0251C12.6313 10.6815 13 11.5717 13 12.5V15Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const UserIcon = 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/ValueVariableIcon/ValueVariableIcon.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="M4.14282 2C2.95936 2 1.99997 2.95939 1.99997 4.14286V6.61312C1.99997 7.03547 1.7628 7.42181 1.38676 7.61313C1.24248 7.68211 1.14282 7.82942 1.14282 8C1.14282 8.17057 1.24248 8.31791 1.38676 8.38683C1.7628 8.57814 1.99997 8.96454 1.99997 9.38686V11.8571C1.99997 13.0406 2.95936 14 4.14282 14C4.37951 14 4.57139 13.8081 4.57139 13.5714C4.57139 13.3348 4.37951 13.1429 4.14282 13.1429C3.43274 13.1429 2.85711 12.5672 2.85711 11.8571V9.38686C2.85711 8.85963 2.64758 8.3642 2.28997 8C2.64759 7.63581 2.85711 7.14037 2.85711 6.61312V4.14286C2.85711 3.43277 3.43274 2.85714 4.14282 2.85714C4.37951 2.85714 4.57139 2.66526 4.57139 2.42857C4.57139 2.19188 4.37951 2 4.14282 2ZM11.8571 2C13.0406 2 14 2.95939 14 4.14286V6.61312C14 7.03547 14.2371 7.42181 14.6132 7.61313C14.7574 7.68211 14.8571 7.82942 14.8571 8C14.8571 8.17057 14.7574 8.31791 14.6132 8.38683C14.2371 8.57814 14 8.96454 14 9.38686V11.8571C14 13.0406 13.0406 14 11.8571 14C11.6205 14 11.4285 13.8081 11.4285 13.5714C11.4285 13.3348 11.6205 13.1429 11.8571 13.1429C12.5672 13.1429 13.1428 12.5672 13.1428 11.8571V9.38686C13.1428 8.85963 13.3523 8.3642 13.71 8C13.3523 7.63581 13.1428 7.14037 13.1428 6.61312V4.14286C13.1428 3.43277 12.5672 2.85714 11.8571 2.85714C11.6205 2.85714 11.4285 2.66526 11.4285 2.42857C11.4285 2.19188 11.6205 2 11.8571 2Z" />
+    <path d="M5.14282 10.4507C5.14011 10.3693 5.15893 10.2886 5.1974 10.2167C5.23586 10.1449 5.2926 10.0845 5.36188 10.0416C5.43116 9.99875 5.51053 9.97491 5.59197 9.97253C5.67341 9.97015 5.75404 9.98931 5.82571 10.0281C5.8925 10.0638 5.95238 10.1029 6.00651 10.1455C6.06063 10.187 6.10785 10.2261 6.15046 10.2618C6.1872 10.2958 6.23516 10.3151 6.28519 10.316C6.34507 10.316 6.42338 10.2699 6.51896 10.1812C6.61454 10.0914 6.72049 9.97164 6.83334 9.82078C6.9485 9.67107 7.06481 9.51216 7.18458 9.34403C7.30434 9.17589 7.41489 9.00546 7.51854 8.83157L7.77879 8.38245C7.85019 8.25578 7.90201 8.15329 7.93195 8.07613C7.88445 7.87411 7.83339 7.67293 7.77879 7.4727C7.72422 7.27286 7.67316 7.07207 7.62563 6.87043C7.58427 6.70554 7.53312 6.54327 7.47247 6.38446C7.42248 6.25257 7.34957 6.13054 7.25713 6.02401C7.17471 5.92766 7.06937 5.85361 6.95081 5.80867C6.81131 5.76185 6.66596 5.73472 6.51896 5.72806C6.39217 5.72715 6.26562 5.73911 6.14124 5.76376V5.5392L7.79492 5.24209C8.02286 5.48841 8.2029 5.77506 8.3258 6.08735C8.38568 6.23706 8.4375 6.39022 8.47896 6.54683C8.52156 6.7023 8.56648 6.87273 8.61369 7.05929C8.70351 6.92685 8.81522 6.75988 8.94765 6.55489C9.08551 6.34321 9.2387 6.14191 9.40598 5.95262C9.57872 5.75454 9.76297 5.58987 9.95413 5.45743C10.1314 5.33112 10.3403 5.25657 10.5576 5.24209C10.7073 5.24209 10.842 5.28124 10.9618 5.3584C11.0827 5.43671 11.1426 5.55993 11.1426 5.72691C11.1426 6.05165 10.9802 6.21402 10.6566 6.21402C10.5403 6.21531 10.4255 6.1876 10.3226 6.13341C10.2205 6.0792 10.1066 6.05111 9.99098 6.05165C9.87583 6.05165 9.75721 6.10923 9.63054 6.22209C9.49724 6.34457 9.37684 6.4804 9.27124 6.62744C9.07212 6.90042 8.88575 7.18248 8.71273 7.4727L9.22633 9.60543C9.24678 9.74114 9.28272 9.87406 9.33343 10.0016C9.35969 10.0722 9.39617 10.1385 9.44168 10.1985C9.45808 10.2228 9.47933 10.2434 9.50411 10.2591C9.52889 10.2747 9.55665 10.2851 9.58563 10.2895C9.67502 10.2828 9.76005 10.2482 9.82861 10.1904C10.0197 10.0357 10.1867 9.8533 10.3238 9.64919C10.3837 9.56052 10.4309 9.47646 10.4677 9.39815L10.6831 9.5064C10.6142 9.65578 10.5296 9.79744 10.4309 9.92903C10.3081 10.1006 10.173 10.263 10.0267 10.415C9.8822 10.5655 9.72585 10.7041 9.55914 10.8296C9.39677 10.9493 9.24936 11.0058 9.11808 11C8.99903 11.0045 8.88293 10.9624 8.79449 10.8825C8.70702 10.8011 8.62828 10.7108 8.55957 10.6131C8.49245 10.4815 8.44142 10.3423 8.40756 10.1985C8.35614 10.0054 8.31082 9.81064 8.27167 9.61465C8.23128 9.41074 8.19251 9.20652 8.15536 9.00201C8.12866 8.83936 8.08624 8.6797 8.02869 8.52525L7.79492 8.95709C7.69785 9.13721 7.59018 9.31141 7.47247 9.47876C7.3458 9.65956 7.21682 9.84266 7.08439 10.0281C6.95957 10.2061 6.81467 10.3692 6.65255 10.514C6.49708 10.6522 6.34738 10.7685 6.20343 10.8653C6.06911 10.9583 5.90839 11.0055 5.7451 11C5.5928 11.0015 5.44525 10.947 5.33053 10.8468C5.27243 10.7983 5.22556 10.7378 5.19315 10.6694C5.16074 10.601 5.14357 10.5264 5.14282 10.4507Z" />
+  </svg>
+);
+
+export const ValueVariableIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ValueVariableIcon/ValueVariableIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/VerticalViewIcon/VerticalViewIcon.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="M6 15H2C1.73487 14.9997 1.48068 14.8943 1.2932 14.7068C1.10572 14.5193 1.00028 14.2651 1 14V2C1.00028 1.73487 1.10572 1.48068 1.2932 1.2932C1.48068 1.10572 1.73487 1.00028 2 1H6C6.26513 1.00028 6.51932 1.10572 6.7068 1.2932C6.89428 1.48068 6.99972 1.73487 7 2V14C6.99972 14.2651 6.89428 14.5193 6.7068 14.7068C6.51932 14.8943 6.26513 14.9997 6 15ZM2 2V14H6V2H2Z" />
+    <path d="M14 15H10C9.73487 14.9997 9.48068 14.8943 9.2932 14.7068C9.10572 14.5193 9.00028 14.2651 9 14V2C9.00028 1.73487 9.10572 1.48068 9.2932 1.2932C9.48068 1.10572 9.73487 1.00028 10 1H14C14.2651 1.00028 14.5193 1.10572 14.7068 1.2932C14.8943 1.48068 14.9997 1.73487 15 2V14C14.9997 14.2651 14.8943 14.5193 14.7068 14.7068C14.5193 14.8943 14.2651 14.9997 14 15ZM10 2V14H14V2H10Z" />
+  </svg>
+);
+
+export const VerticalViewIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/VerticalViewIcon/VerticalViewIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ViewIcon/ViewIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15.47 7.83C14.8819 6.30882 13.861 4.99331 12.5334 4.04604C11.2058 3.09878 9.62971 2.56129 7.99997 2.5C6.37023 2.56129 4.79416 3.09878 3.46657 4.04604C2.13898 4.99331 1.11805 6.30882 0.52997 7.83C0.490254 7.93985 0.490254 8.06015 0.52997 8.17C1.11805 9.69118 2.13898 11.0067 3.46657 11.954C4.79416 12.9012 6.37023 13.4387 7.99997 13.5C9.62971 13.4387 11.2058 12.9012 12.5334 11.954C13.861 11.0067 14.8819 9.69118 15.47 8.17C15.5097 8.06015 15.5097 7.93985 15.47 7.83ZM7.99997 12.5C5.34997 12.5 2.54997 10.535 1.53497 8C2.54997 5.465 5.34997 3.5 7.99997 3.5C10.65 3.5 13.45 5.465 14.465 8C13.45 10.535 10.65 12.5 7.99997 12.5Z" />
+    <path d="M7.99997 5C7.40663 5 6.82661 5.17595 6.33326 5.50559C5.83991 5.83524 5.45539 6.30377 5.22833 6.85195C5.00127 7.40013 4.94186 8.00333 5.05761 8.58527C5.17337 9.16721 5.45909 9.70176 5.87865 10.1213C6.29821 10.5409 6.83276 10.8266 7.4147 10.9424C7.99664 11.0581 8.59984 10.9987 9.14802 10.7716C9.6962 10.5446 10.1647 10.1601 10.4944 9.66671C10.824 9.17336 11 8.59334 11 8C11 7.20435 10.6839 6.44129 10.1213 5.87868C9.55868 5.31607 8.79562 5 7.99997 5ZM7.99997 10C7.60441 10 7.21773 9.8827 6.88883 9.66294C6.55993 9.44318 6.30359 9.13082 6.15221 8.76537C6.00084 8.39991 5.96123 7.99778 6.0384 7.60982C6.11557 7.22186 6.30605 6.86549 6.58576 6.58579C6.86546 6.30608 7.22183 6.1156 7.60979 6.03843C7.99775 5.96126 8.39988 6.00087 8.76534 6.15224C9.13079 6.30362 9.44315 6.55996 9.66291 6.88886C9.88267 7.21776 9.99997 7.60444 9.99997 8C9.99997 8.53043 9.78926 9.03914 9.41418 9.41421C9.03911 9.78929 8.5304 10 7.99997 10Z" />
+  </svg>
+);
+
+export const ViewIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ViewIcon/ViewIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ViewOffIcon/ViewOffIcon.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" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M2.62 11.255L3.335 10.545C2.55211 9.84206 1.93699 8.97234 1.535 8C2.55 5.465 5.35 3.5 8 3.5C8.68195 3.509 9.35772 3.63064 10 3.86L10.775 3.08C9.89633 2.70866 8.95385 2.51167 8 2.5C6.37026 2.56129 4.79419 3.09878 3.4666 4.04604C2.13901 4.99331 1.11808 6.30882 0.530001 7.83C0.490285 7.93985 0.490285 8.06015 0.530001 8.17C0.974124 9.34851 1.69021 10.4055 2.62 11.255Z" />
+    <path d="M6 7.865C6.03477 7.38586 6.24085 6.93524 6.58054 6.59554C6.92024 6.25584 7.37086 6.04977 7.85 6.015L8.755 5.105C8.24788 4.97147 7.71462 4.97321 7.20838 5.11003C6.70214 5.24685 6.24061 5.51399 5.8698 5.8848C5.49899 6.25561 5.23186 6.71714 5.09503 7.22338C4.95821 7.72962 4.95647 8.26288 5.09 8.77L6 7.865Z" />
+    <path d="M15.47 7.83C14.8967 6.3366 13.899 5.04351 12.6 4.11L15 1.705L14.295 1L1 14.295L1.705 15L4.255 12.45C5.39194 13.117 6.68202 13.4787 8 13.5C9.62974 13.4387 11.2058 12.9012 12.5334 11.954C13.861 11.0067 14.8819 9.69118 15.47 8.17C15.5097 8.06015 15.5097 7.93985 15.47 7.83ZM10 8C9.9979 8.35005 9.90395 8.69342 9.72755 8.99578C9.55116 9.29815 9.29849 9.54892 8.99481 9.72303C8.69112 9.89714 8.34705 9.9885 7.997 9.98797C7.64694 9.98744 7.30316 9.89503 7 9.72L9.72 7C9.89975 7.30287 9.99634 7.64783 10 8ZM8 12.5C6.95103 12.4817 5.92195 12.2107 5 11.71L6.27 10.44C6.84767 10.8408 7.54777 11.026 8.24807 10.9632C8.94836 10.9005 9.60437 10.5937 10.1015 10.0965C10.5987 9.59937 10.9055 8.94336 10.9682 8.24307C11.031 7.54277 10.8458 6.84267 10.445 6.265L11.88 4.83C13.0273 5.61749 13.9245 6.71771 14.465 8C13.45 10.535 10.65 12.5 8 12.5Z" />
+  </svg>
+);
+
+export const ViewOffIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ViewOffIcon/ViewOffIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WarningAltIcon/WarningAltIcon.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="M8 11.5C7.85167 11.5 7.70666 11.544 7.58333 11.6264C7.45999 11.7088 7.36386 11.826 7.30709 11.963C7.25033 12.1 7.23548 12.2508 7.26441 12.3963C7.29335 12.5418 7.36478 12.6754 7.46967 12.7803C7.57456 12.8852 7.7082 12.9567 7.85369 12.9856C7.99917 13.0145 8.14997 12.9997 8.28702 12.9429C8.42406 12.8862 8.54119 12.79 8.62361 12.6667C8.70602 12.5433 8.75 12.3983 8.75 12.25C8.75 12.0511 8.67099 11.8603 8.53033 11.7197C8.38968 11.579 8.19892 11.5 8 11.5Z" />
+    <path d="M8.5 6.00001H7.5V10.5H8.5V6.00001Z" />
+    <path d="M14.5 15H1.5C1.4141 15 1.32965 14.9779 1.25478 14.9357C1.17992 14.8936 1.11718 14.8329 1.0726 14.7595C1.02802 14.686 1.00311 14.6024 1.00027 14.5165C0.997436 14.4307 1.01677 14.3455 1.0564 14.2693L7.5564 1.76931C7.59862 1.68812 7.66231 1.62008 7.74053 1.5726C7.81875 1.52511 7.9085 1.5 8 1.5C8.09151 1.5 8.18126 1.52511 8.25948 1.5726C8.3377 1.62008 8.40138 1.68812 8.4436 1.76931L14.9436 14.2693C14.9832 14.3455 15.0026 14.4307 14.9997 14.5165C14.9969 14.6024 14.972 14.686 14.9274 14.7595C14.8828 14.8329 14.8201 14.8936 14.7452 14.9357C14.6704 14.9779 14.5859 15 14.5 15ZM2.32535 14H13.6747L13.6757 13.9984L8.001 3.08571H7.999L2.32435 13.9984L2.32535 14Z" />
+  </svg>
+);
+
+export const WarningAltIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WarningAltIcon/WarningAltIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WarningFilledIcon/WarningFilledIcon.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 1C4.15 1 1 4.15 1 8C1 11.85 4.15 15 8 15C11.85 15 15 11.85 15 8C15 4.15 11.85 1 8 1ZM7.45 4H8.55V9.5H7.45V4ZM8 12.5C7.6 12.5 7.25 12.15 7.25 11.75C7.25 11.35 7.6 11 8 11C8.4 11 8.75 11.35 8.75 11.75C8.75 12.15 8.4 12.5 8 12.5Z" />
+  </svg>
+);
+
+export const WarningFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WarningFilledIcon/WarningFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WarningSquareIcon/WarningSquareIcon.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="M8 10C7.85166 10 7.70666 10.044 7.58332 10.1264C7.45999 10.2088 7.36386 10.3259 7.30709 10.463C7.25032 10.6 7.23547 10.7508 7.26441 10.8963C7.29335 11.0418 7.36478 11.1754 7.46967 11.2803C7.57456 11.3852 7.7082 11.4566 7.85368 11.4856C7.99917 11.5145 8.14997 11.4997 8.28701 11.4429C8.42406 11.3861 8.54119 11.29 8.6236 11.1667C8.70601 11.0433 8.75 10.8983 8.75 10.75C8.75 10.5511 8.67098 10.3603 8.53033 10.2197C8.38968 10.079 8.19891 10 8 10Z" />
+    <path d="M8.5 4.5H7.5V9H8.5V4.5Z" />
+    <path d="M13 14H3C2.73488 13.9997 2.4807 13.8942 2.29323 13.7068C2.10576 13.5193 2.0003 13.2651 2 13V3C2.0003 2.73488 2.10576 2.4807 2.29323 2.29323C2.4807 2.10576 2.73488 2.0003 3 2H13C13.2651 2.0003 13.5193 2.10576 13.7068 2.29323C13.8942 2.4807 13.9997 2.73488 14 3V13C13.9997 13.2651 13.8942 13.5193 13.7068 13.7068C13.5193 13.8942 13.2651 13.9997 13 14ZM3 3V13H13.0006L13 3H3Z" />
+  </svg>
+);
+
+export const WarningSquareIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WarningSquareIcon/WarningSquareIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/types.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+
+export type IconProps = {
+  color?: string;
+  size?: string;
+  className?: string;
+} & React.SVGProps<SVGSVGElement>;