@redocly/theme 0.70.0-next.0 → 0.70.0-next.10

package/src/icons/CertificateIcon/CertificateIcon.tsx

@@ -1,33 +0,0 @@
-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="M10.5 6.4375L11.3365 8.05756L13.125 8.31744L11.8125 9.5L12.1498 11.25L10.5 10.2656L8.85019 11.25L9.1875 9.5L7.875 8.31744L9.7125 8.05756L10.5 6.4375Z"
-      fill="#1A1C21"
-    />
-    <path d="M5.25 6H2.625V6.875H5.25V6Z" fill="#1A1C21" />
-    <path d="M7 4.25H2.625V5.125H7V4.25Z" fill="#1A1C21" />
-    <path d="M7 2.5H2.625V3.375H7V2.5Z" fill="#1A1C21" />
-    <path
-      d="M7 10.375H1.75V1.625H12.25V6H13.125V1.625C13.125 1.39294 13.0328 1.17038 12.8687 1.00628C12.7046 0.842187 12.4821 0.75 12.25 0.75H1.75C1.51794 0.75 1.29538 0.842187 1.13128 1.00628C0.967187 1.17038 0.875 1.39294 0.875 1.625V10.375C0.875 10.6071 0.967187 10.8296 1.13128 10.9937C1.29538 11.1578 1.51794 11.25 1.75 11.25H7V10.375Z"
-      fill="#1A1C21"
-    />
-  </svg>
-);
-
-export const CertificateIcon = styled(Icon).attrs({
-  'data-component-name': 'icons/CertificateIcon/CertificateIcon',
-})`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;

package/src/icons/CharacterIcon/CharacterIcon.tsx

@@ -1,25 +0,0 @@
-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 8" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M13.5 7.5H11C10.7349 7.49964 10.4807 7.39417 10.2933 7.20671C10.1058 7.01925 10.0004 6.76511 10 6.5V3.5C10.0003 3.23488 10.1058 2.9807 10.2932 2.79323C10.4807 2.60576 10.7349 2.5003 11 2.5H13.5V3.5H11V6.5H13.5V7.5Z" />
-    <path d="M8 2.5H6V0.5H5V7.5H8C8.26511 7.49964 8.51925 7.39417 8.70671 7.20671C8.89417 7.01925 8.99964 6.76511 9 6.5V3.5C8.9997 3.23488 8.89424 2.9807 8.70677 2.79323C8.5193 2.60576 8.26512 2.5003 8 2.5ZM6 6.5V3.5H8V6.5H6Z" />
-    <path d="M3 0.5H1C0.734865 0.500265 0.480665 0.605707 0.293186 0.793186C0.105707 0.980665 0.000264738 1.23486 0 1.5V7.5H1V5H3V7.5H4V1.5C3.99974 1.23486 3.89429 0.980665 3.70681 0.793186C3.51934 0.605707 3.26514 0.500265 3 0.5ZM1 4V1.5H3V4H1Z" />
-  </svg>
-);
-
-export const CharacterIcon = styled(Icon).attrs({
-  'data-component-name': 'icons/CharacterIcon/CharacterIcon',
-})`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;

package/src/icons/ChatGptIcon/ChatGptIcon.tsx

@@ -1,23 +0,0 @@
-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.74887 6.55188V5.54033C6.74887 5.45514 6.78085 5.39123 6.85535 5.34869L8.88914 4.17742C9.16598 4.01771 9.49608 3.94322 9.83676 3.94322C11.1145 3.94322 11.9238 4.93348 11.9238 5.98758C11.9238 6.06209 11.9238 6.14729 11.9131 6.23248L9.80481 4.99731C9.67705 4.92281 9.54923 4.92281 9.42147 4.99731L6.74887 6.55188ZM11.4978 10.4916V8.0745C11.4978 7.9254 11.4339 7.81892 11.3061 7.7444L8.63354 6.18983L9.50666 5.68935C9.58118 5.64681 9.64509 5.64681 9.71961 5.68935L11.7534 6.86061C12.3391 7.20138 12.733 7.9254 12.733 8.62811C12.733 9.43732 12.2539 10.1827 11.4978 10.4915V10.4916ZM6.12066 8.36206L5.24754 7.85099C5.17304 7.80845 5.14106 7.74451 5.14106 7.65932V5.31682C5.14106 4.17753 6.01418 3.315 7.19612 3.315C7.64339 3.315 8.05856 3.4641 8.41003 3.73029L6.31241 4.94418C6.18468 5.01868 6.12077 5.12515 6.12077 5.27428V8.36214L6.12066 8.36206ZM8.00002 9.4481L6.74887 8.74537V7.25473L8.00002 6.55199L9.25109 7.25473V8.74537L8.00002 9.4481ZM8.80393 12.6851C8.35668 12.6851 7.9415 12.536 7.59004 12.2698L9.68764 11.0559C9.81539 10.9814 9.8793 10.8749 9.8793 10.7258V7.63795L10.7631 8.14902C10.8376 8.19156 10.8696 8.25547 10.8696 8.34069V10.6832C10.8696 11.8225 9.98578 12.685 8.80393 12.685V12.6851ZM6.28037 10.3106L4.24657 9.1394C3.66089 8.7986 3.26698 8.07461 3.26698 7.37188C3.26698 6.55199 3.75678 5.8173 4.51273 5.50849V7.93618C4.51273 8.08528 4.57667 8.19176 4.7044 8.26628L7.36642 9.81016L6.49329 10.3106C6.4188 10.3532 6.35486 10.3532 6.28037 10.3106ZM6.16331 12.0569C4.96009 12.0569 4.0763 11.1518 4.0763 10.0338C4.0763 9.94859 4.08697 9.86339 4.09756 9.7782L6.19518 10.9921C6.32291 11.0666 6.45075 11.0666 6.57849 10.9921L9.25109 9.44821V10.4598C9.25109 10.545 9.21913 10.6089 9.14461 10.6514L7.11084 11.8227C6.83398 11.9824 6.50388 12.0569 6.1632 12.0569H6.16331ZM8.80393 13.3239C10.0923 13.3239 11.1677 12.4082 11.4127 11.1943C12.6052 10.8855 13.3719 9.7675 13.3719 8.62822C13.3719 7.88283 13.0525 7.15884 12.4775 6.63707C12.5307 6.41345 12.5627 6.18983 12.5627 5.96632C12.5627 4.4437 11.3275 3.3043 9.90067 3.3043C9.61325 3.3043 9.33639 3.34684 9.05953 3.44273C8.58031 2.97421 7.92013 2.67609 7.19612 2.67609C5.90773 2.67609 4.83236 3.59175 4.58736 4.80564C3.39482 5.11446 2.62817 6.23248 2.62817 7.37176C2.62817 8.11715 2.94757 8.84115 3.52258 9.36291C3.46934 9.58653 3.43738 9.81016 3.43738 10.0337C3.43738 11.5563 4.67256 12.6957 6.09937 12.6957C6.38682 12.6957 6.66368 12.6531 6.94054 12.5573C7.41965 13.0258 8.07982 13.3239 8.80393 13.3239Z" />
-  </svg>
-);
-
-export const ChatGptIcon = styled(Icon).attrs({
-  'data-component-name': 'icons/ChatGptIcon/ChatGptIcon',
-})`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;

package/src/icons/ChatIcon/ChatIcon.tsx

@@ -1,35 +0,0 @@
-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}
-  >
-    <path
-      d="M13.305 22.5L12 21.75L15 16.5H19.5C19.8978 16.5 20.2794 16.342 20.5607 16.0607C20.842 15.7794 21 15.3978 21 15V6C21 5.60218 20.842 5.22064 20.5607 4.93934C20.2794 4.65804 19.8978 4.5 19.5 4.5H4.5C4.10218 4.5 3.72064 4.65804 3.43934 4.93934C3.15804 5.22064 3 5.60218 3 6V15C3 15.3978 3.15804 15.7794 3.43934 16.0607C3.72064 16.342 4.10218 16.5 4.5 16.5H11.25V18H4.5C3.70435 18 2.94129 17.6839 2.37868 17.1213C1.81607 16.5587 1.5 15.7956 1.5 15V6C1.5 5.20435 1.81607 4.44129 2.37868 3.87868C2.94129 3.31607 3.70435 3 4.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V15C22.5 15.7956 22.1839 16.5587 21.6213 17.1213C21.0587 17.6839 20.2956 18 19.5 18H15.87L13.305 22.5Z"
-      fill="#5F81FF"
-    />
-    <path d="M18 7.5H6V9H18V7.5Z" fill="#5F81FF" />
-    <path d="M13.5 12H6V13.5H13.5V12Z" fill="#5F81FF" />
-  </svg>
-);
-
-export const ChatIcon = styled(Icon).attrs({
-  'data-component-name': 'icons/ChatIcon/ChatIcon',
-})`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;

package/src/icons/CheckboxFilledIcon/CheckboxFilledIcon.tsx

@@ -1,23 +0,0 @@
-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 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M13 2.51172H3C2.73478 2.51172 2.48043 2.61708 2.29289 2.80461C2.10536 2.99215 2 3.2465 2 3.51172V13.5117C2 13.7769 2.10536 14.0313 2.29289 14.2188C2.48043 14.4064 2.73478 14.5117 3 14.5117H13C13.2652 14.5117 13.5196 14.4064 13.7071 14.2188C13.8946 14.0313 14 13.7769 14 13.5117V3.51172C14 3.2465 13.8946 2.99215 13.7071 2.80461C13.5196 2.61708 13.2652 2.51172 13 2.51172ZM7 11.2617L4.5 8.78307L5.2954 8.01172L7 9.68452L10.7044 6.01172L11.5002 6.80032L7 11.2617Z" />
-  </svg>
-);
-
-export const CheckboxFilledIcon = styled(Icon).attrs({
-  'data-component-name': 'icons/CheckboxFilledIcon/CheckboxFilledIcon',
-})`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -1,71 +0,0 @@
-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;
-}) => (
-  <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

@@ -1,8 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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 }) => (
-  <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

@@ -1,24 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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;
-`;