@redocly/theme 0.56.0-next.9 → 0.56.0

package/src/core/utils/get-file-icon.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+
+import { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
+
+// extension to icon name
+const fileIconMap: Record<string, string> = {
+  yaml: 'yaml',
+  yml: 'yaml',
+  json: 'json',
+  js: 'javascript',
+  ts: 'typescript',
+  css: 'css',
+  html: 'html',
+  jsx: 'react',
+  tsx: 'react',
+  md: 'markdown',
+  graphql: 'graphql',
+  gql: 'graphql',
+  py: 'python',
+  sh: 'console',
+  xsh: 'console',
+  nu: 'console',
+  java: 'java',
+  ps: 'powershell',
+  php: 'php_elephant',
+  go: 'go',
+  ruby: 'ruby',
+  swift: 'swift',
+  kotlin: 'kotlin',
+  rust: 'rust',
+  scala: 'scala',
+  elixir: 'elixir',
+  dart: 'dart',
+  http: 'http',
+  rest: 'http',
+  c: 'c',
+  h: 'c',
+  hpp: 'c',
+  cc: 'c',
+  cpp: 'c',
+  cxx: 'c',
+  'c++': 'c',
+  sql: 'database',
+  hbs: 'handlebars',
+  cs: 'csharp',
+  csx: 'csharp',
+  csharp: 'csharp',
+  markdoc: 'markdoc',
+  mdoc: 'markdoc',
+  mdx: 'mdx',
+};
+
+// code block language to icon name, only for those when code extension is not available
+const languageIconMap: Record<string, string> = {
+  bash: 'console',
+  python: 'python',
+  java: 'java',
+  graphql: 'graphql',
+  javascript: 'javascript',
+  typescript: 'typescript',
+  react: 'react',
+  markdown: 'markdown',
+  php: 'php_elephant',
+  ruby: 'ruby',
+  swift: 'swift',
+  kotlin: 'kotlin',
+  rust: 'rust',
+  scala: 'scala',
+  elixir: 'elixir',
+  dart: 'dart',
+  csharp: 'csharp',
+  objectivec: 'c',
+  perl: 'perl',
+  sql: 'database',
+  xml: 'xml',
+  vim: 'vim',
+  lua: 'lua',
+  zsh: 'console',
+  fish: 'console',
+  powershell: 'console',
+  handlebars: 'handlebars',
+  markdoc: 'markdoc',
+  mdx: 'mdx',
+};
+
+export function getFileIconByExt(ext: string) {
+  const iconName = fileIconMap[ext] || 'document';
+  return <CDNIcon name={iconName} pack="code" mode="background" />;
+}
+
+export function getFileIconByLanguage(language: string) {
+  const iconName = fileIconMap[language] || languageIconMap[language] || 'document';
+  return <CDNIcon name={iconName} pack="code" mode="background" />;
+}

package/src/core/utils/icon-resolver.ts

@@ -0,0 +1,57 @@
+export type ResolvedIcon =
+  | { type: 'link'; value: string }
+  | { type: 'font-awesome'; name: string; style: string }
+  | { type: 'invalid'; reason: string };
+
+const FA_ICON_STYLES = ['solid', 'regular', 'duotone', 'brands'] as string[];
+const FA_ICON_NAME_PATTERN = /^[a-z0-9-]+$/i;
+
+/**
+ * Resolves an icon value from configuration into a structured object.
+ *
+ * Supports:
+ * - URLs (absolute or relative paths to image files)
+ * - Font Awesome icons in formats:
+ *    - "solid camera" (style + name)
+ *    - "camera" (name only, default style: 'regular')
+ *
+ * @param icon - The icon string from config.
+ * @returns A structured object describing the icon:
+ *    - type: 'url' | 'font-awesome' | 'invalid'
+ *    - value: for URLs
+ *    - name and style: for Font Awesome icons
+ *    - reason: for invalid entries
+ */
+export function resolveIcon(icon?: string): ResolvedIcon {
+  if (!icon || typeof icon !== 'string') {
+    return { type: 'invalid', reason: 'Icon must be a non-empty string' };
+  }
+
+  const trimmed = icon.trim();
+  const isLink =
+    trimmed.match(/\.(svg|png|jpg|jpeg|gif|ico|webp)$/) || /^https?:\/\//.test(trimmed);
+
+  if (isLink) {
+    return { type: 'link', value: trimmed };
+  }
+
+  const [first, second] = trimmed.split(/\s+/);
+
+  if (first) {
+    if (second) {
+      // Format: "style name" (e.g., "solid camera")
+      if (FA_ICON_STYLES.includes(first) && FA_ICON_NAME_PATTERN.test(second)) {
+        return { type: 'font-awesome', style: first, name: second };
+      } else {
+        return { type: 'invalid', reason: 'Unrecognized icon format' };
+      }
+    } else if (!FA_ICON_STYLES.includes(first) && FA_ICON_NAME_PATTERN.test(first)) {
+      return {
+        type: 'font-awesome',
+        name: first,
+        style: 'regular',
+      };
+    }
+  }
+  return { type: 'invalid', reason: 'Unrecognized icon format' };
+}

package/src/core/utils/index.ts

@@ -9,7 +9,7 @@ export * from './color';
 export * from './urls';
 export * from './js-utils';
 export * from './tags-parser';
-export * from './text-transform';
+export * from './string';
 export * from './dom';
 export * from './markdoc';
 export * from './attribute-parser';
@@ -33,3 +33,6 @@ export * from './replace-inputs-with-value';
 export * from './find-closest-common-directory';
 export * from './get-user-agent';
 export * from './parse-style-string';
+export * from './lang-to-name';
+export * from './enhanced-smoothstep';
+export * from './icon-resolver';

package/src/core/utils/lang-to-name.ts

@@ -0,0 +1,35 @@
+import { capitalize } from './string';
+
+const languages = {
+  js: 'JavaScript',
+  ts: 'TypeScript',
+  jsx: 'React',
+  tsx: 'React',
+  html: 'HTML',
+  css: 'CSS',
+  sh: 'Shell',
+  java: 'Java',
+  py: 'Python',
+  graphql: 'GraphQL',
+  gql: 'GraphQL',
+  yaml: 'YAML',
+  yml: 'YAML',
+  json: 'JSON',
+  md: 'Markdown',
+  markdown: 'Markdown',
+  mermaid: 'Mermaid',
+  php: 'PHP',
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  react: 'React',
+  mdoc: 'Markdoc',
+  'objective-c': 'Objective-C',
+  objectivec: 'Objective-C',
+  sql: 'SQL',
+  xml: 'XML',
+  csharp: 'C#',
+};
+
+export function langToName(lang: string) {
+  return languages[lang as keyof typeof languages] || capitalize(lang);
+}

package/src/ext/configure.ts

@@ -1,4 +1,4 @@
-import { UserClaims, OpenAPIServer } from '@redocly/theme';
+import { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
 
 export type SecurityDetails = {
   password?: string;

package/src/icons/CDNIcon/CDNIcon.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { CDNIconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+import { ICONS_CDN_URL } from '@redocly/theme/core/constants';
+
+const Icon = (props: CDNIconProps) => {
+  const { name, type, pack, mode, color, ...rest } = props;
+  const cdnUrl = ICONS_CDN_URL[pack || 'font-awesome'];
+  const typeSegment = pack === 'code' ? '' : type ? type + '/' : 'regular/';
+
+  const styleProps =
+    mode === 'background'
+      ? {
+          backgroundImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          backgroundSize: 'contain',
+        }
+      : {
+          backgroundColor: color ? getCssColorVariable(color) : 'currentColor',
+          maskImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
+          maskRepeat: 'no-repeat',
+          maskPosition: 'center',
+          maskSize: 'contain',
+        };
+
+  return (
+    <svg
+      {...rest}
+      style={{
+        ...styleProps,
+        display: 'inline-block',
+        verticalAlign: 'middle',
+      }}
+    />
+  );
+};
+
+export const CDNIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CDNIcon/CDNIcon',
+}))<CDNIconProps>`
+  height: ${({ size }) => size || 'var(--icon-height, 1em)'};
+  width: ${({ size }) => size || 'var(--icon-width, 1em)'};
+`;

package/src/icons/ChatGptIcon/ChatGptIcon.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.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',
+}))<IconProps>`
+  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',
+}))<IconProps>`
+  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',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/GenericIcon/GenericIcon.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
+import { resolveIcon } from '@redocly/theme/core/utils';
+import { InlineSvg } from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
+import { Image } from '@redocly/theme/components/Image/Image';
+
+export interface GenericIconProps {
+  icon: string | React.ReactNode;
+  srcSet?: string;
+  rawContent?: string;
+  size?: string;
+  color?: string;
+  alt?: string;
+  className?: string;
+}
+
+export function GenericIcon({
+  icon,
+  srcSet,
+  rawContent,
+  size,
+  color,
+  alt,
+  className,
+}: GenericIconProps) {
+  if (srcSet) {
+    return <Image srcSet={srcSet} alt={alt} className={className} />;
+  }
+
+  const resolvedIcon = icon && typeof icon === 'string' ? resolveIcon(icon) : null;
+  const iconComponent = rawContent ? (
+    <IconSvg fileRawContent={rawContent} className={className} />
+  ) : resolvedIcon?.type === 'link' ? (
+    <IconImg src={resolvedIcon.value} alt={alt} className={className} />
+  ) : resolvedIcon?.type === 'font-awesome' ? (
+    <CDNIcon
+      name={resolvedIcon.name}
+      type={resolvedIcon.style}
+      size={size}
+      color={color}
+      className={className}
+    />
+  ) : (
+    icon
+  );
+
+  return iconComponent;
+}
+
+const IconImg = styled.img`
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+  object-fit: cover;
+`;
+
+const IconSvg = styled(InlineSvg)`
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--icon-color, currentColor);
+  }
+`;

package/src/icons/MarkdownFullIcon/MarkdownFullIcon.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.2308 4.17188C15.2308 3.95614 15.0586 3.78125 14.8462 3.78125H1.15385C0.941429 3.78125 0.769231 3.95614 0.769231 4.17188V11.8281C0.769231 12.0439 0.941429 12.2188 1.15385 12.2188H14.8462C15.0586 12.2188 15.2308 12.0439 15.2308 11.8281V4.17188ZM16 11.8281C16 12.4753 15.4834 13 14.8462 13H1.15385C0.516595 13 0 12.4753 0 11.8281V4.17188C0 3.52467 0.516595 3 1.15385 3H14.8462C15.4834 3 16 3.52467 16 4.17188V11.8281Z" />
+    <path d="M2.30769 10.6562V5.34375H3.84615L5.38462 7.29688L6.92308 5.34375H8.46154V10.6562H6.92308V7.60938L5.38462 9.5625L3.84615 7.60938V10.6562H2.30769ZM11.9231 10.6562L9.61539 8.07812H11.1538V5.34375H12.6923V8.07812H14.2308L11.9231 10.6562Z" />
+  </svg>
+);
+
+export const MarkdownFullIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/MarkdownFullIcon/MarkdownFullIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NoneIcon/NoneIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M0 0h24v24H0z" fill="none" />
+  </svg>
+);
+
+export const NoneIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/NoneIcon/NoneIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/types.ts

@@ -5,3 +5,10 @@ export type IconProps = {
   size?: string;
   className?: string;
 } & React.SVGProps<SVGSVGElement>;
+
+export type CDNIconProps = IconProps & {
+  name: string;
+  type?: string;
+  pack?: 'font-awesome' | 'code'; // default is font-awesome, code is for vscode icons
+  mode?: 'mask' | 'background'; // default is mask, background allows to keep original colors
+};

package/src/index.ts

@@ -4,6 +4,7 @@ export * from '@redocly/theme/ext/configure';
 
 /* Components */
 export * from '@redocly/theme/components/Button/Button';
+export * from '@redocly/theme/components/Button/ButtonGroup';
 export * from '@redocly/theme/components/JsonViewer/JsonViewer';
 export * from '@redocly/theme/components/Tag/Tag';
 export * from '@redocly/theme/components/TableOfContent/TableOfContent';
@@ -25,6 +26,7 @@ export * from '@redocly/theme/components/Tags/HttpTag';
 export * from '@redocly/theme/components/Tags/CounterTag';
 export * from '@redocly/theme/components/VersionPicker/VersionPicker';
 export * from '@redocly/theme/components/Marker/Marker';
+export * from '@redocly/theme/components/PageActions/PageActions';
 /* Buttons */
 export * from '@redocly/theme/components/Buttons/CopyButton';
 export * from '@redocly/theme/components/Buttons/EditPageButton';
@@ -171,7 +173,9 @@ export * from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
 export * from '@redocly/theme/icons/AddIcon/AddIcon';
 export * from '@redocly/theme/icons/BookmarkAddIcon/BookmarkAddIcon';
 export * from '@redocly/theme/icons/SpinnerIcon/SpinnerIcon';
+export * from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
 export * from '@redocly/theme/icons/CopyIcon/CopyIcon';
+export * from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
 export * from '@redocly/theme/icons/CleanIcon/CleanIcon';
 export * from '@redocly/theme/icons/GraphqlIcon/GraphqlIcon';
 export * from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
@@ -237,6 +241,7 @@ export * from '@redocly/theme/icons/LinkIcon/LinkIcon';
 export * from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 export * from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
 export * from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
+export * from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from '@redocly/theme/icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';
 export * from '@redocly/theme/icons/MenuIcon/MenuIcon';
@@ -275,6 +280,7 @@ export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { breakpoints } from '@redocly/theme/core';
+import { breakpoints } from '@redocly/theme/core/utils';
 
 export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
   className?: string;

package/src/layouts/DocumentationLayout.tsx

@@ -10,6 +10,12 @@ import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNav
 import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
 import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
 
+import {
+  CodeSnippetContext,
+  CODE_GROUP_SNIPPET_NAME_KEY,
+} from '../core/contexts/CodeSnippetContext';
+import { useLocalState } from '../core/hooks/use-local-state';
+
 type DocumentationLayoutProps = {
   tableOfContent: React.ReactNode;
   feedback: React.ReactNode;
@@ -38,20 +44,24 @@ export function DocumentationLayout({
   const { editPage: themeEditPage } = config || {};
   const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
 
+  const [activeSnippetName, setActiveSnippetName] = useLocalState(CODE_GROUP_SNIPPET_NAME_KEY, '');
+
   return (
-    <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
-      <ContentWrapper withToc={!config?.toc?.hide}>
-        <Breadcrumbs />
-        <LayoutTop>
-          {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-          {mergedConf && <EditPageButton to={mergedConf.to} />}
-        </LayoutTop>
-        {children}
-        <LayoutBottom>{feedback}</LayoutBottom>
-        <PageNavigation nextPage={nextPage} prevPage={prevPage} />
-      </ContentWrapper>
-      {tableOfContent}
-    </LayoutWrapper>
+    <CodeSnippetContext.Provider value={{ activeSnippetName, setActiveSnippetName }}>
+      <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
+        <ContentWrapper withToc={!config?.toc?.hide}>
+          <Breadcrumbs />
+          <LayoutTop>
+            {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
+            {mergedConf && <EditPageButton to={mergedConf.to} />}
+          </LayoutTop>
+          {children}
+          <LayoutBottom>{feedback}</LayoutBottom>
+          <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+        </ContentWrapper>
+        {tableOfContent}
+      </LayoutWrapper>
+    </CodeSnippetContext.Provider>
   );
 }
 

package/src/markdoc/components/Cards/CardIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { InlineSvg } from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type CardIconProps = {
   variant?: string;
@@ -13,31 +13,16 @@ export type CardIconProps = {
 export function CardIcon({ variant, src, rawContent, position }: CardIconProps) {
   return (
     <CardIconWrapper $variant={variant} $position={position}>
-      {rawContent ? <CardSvg fileRawContent={rawContent} /> : <CardImg src={src} />}
+      <GenericIcon icon={src} rawContent={rawContent} />
     </CardIconWrapper>
   );
 }
 
-const CardImg = styled.img`
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-  object-fit: cover;
-`;
-
-const CardSvg = styled(InlineSvg)`
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: var(--card-icon-color);
-  }
-`;
-
 const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
+  --icon-width: var(--card-icon-width);
+  --icon-height: var(--card-icon-height);
+  --icon-color: var(--card-icon-color);
+
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
   justify-content: center;