@redocly/theme 0.48.0 → 0.48.1

package/src/components/Search/SearchDialog.tsx

@@ -153,7 +153,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                     }
                   }}
                 >
-                  {translate('search.aiButton', 'Search with AI')}
+                  {translate('search.ai.button', 'Search with AI')}
                 </SearchAiButton>
               ) : null}
               {showSearchFilterButton && (
@@ -236,41 +236,50 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
             />
           )}
         </SearchDialogBody>
-        {mode === 'search' && (
-          <SearchDialogFooter>
-            <SearchShortcuts>
-              <SearchShortcut
-                data-translation-key="search.keys.navigate"
-                combination="Tab"
-                text={translate('search.keys.navigate', 'to navigate')}
-              />
-              <SearchShortcut
-                data-translation-key="search.keys.select"
-                combination="⏎"
-                text={translate('search.keys.select', 'to select')}
-              />
-              <SearchShortcut
-                data-translation-key="search.keys.exit"
-                combination="Esc"
-                text={translate('search.keys.exit', 'to exit')}
-              />
-            </SearchShortcuts>
-            {isSearchLoading && (
-              <SearchLoading>
-                <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
-                {translate('search.loading', 'Loading...')}
-              </SearchLoading>
-            )}
-            <SearchCancelButton
-              data-translation-key="search.cancel"
-              variant="secondary"
-              size="small"
-              onClick={onClose}
-            >
-              {translate('search.cancel', 'Cancel')}
-            </SearchCancelButton>
-          </SearchDialogFooter>
-        )}
+        <SearchDialogFooter>
+          {mode === 'ai-dialog' ? (
+            <AiDisclaimer>
+              {translate(
+                'search.ai.disclaimer',
+                'AI search might provide incomplete or incorrect results. Verify important information.',
+              )}
+            </AiDisclaimer>
+          ) : (
+            <>
+              <SearchShortcuts>
+                <SearchShortcut
+                  data-translation-key="search.keys.navigate"
+                  combination="Tab"
+                  text={translate('search.keys.navigate', 'to navigate')}
+                />
+                <SearchShortcut
+                  data-translation-key="search.keys.select"
+                  combination="⏎"
+                  text={translate('search.keys.select', 'to select')}
+                />
+                <SearchShortcut
+                  data-translation-key="search.keys.exit"
+                  combination="Esc"
+                  text={translate('search.keys.exit', 'to exit')}
+                />
+              </SearchShortcuts>
+              {isSearchLoading && (
+                <SearchLoading>
+                  <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
+                  {translate('search.loading', 'Loading...')}
+                </SearchLoading>
+              )}
+              <SearchCancelButton
+                data-translation-key="search.cancel"
+                variant="secondary"
+                size="small"
+                onClick={onClose}
+              >
+                {translate('search.cancel', 'Cancel')}
+              </SearchCancelButton>
+            </>
+          )}
+        </SearchDialogFooter>
       </SearchDialogWrapper>
     </SearchOverlay>
   );
@@ -439,3 +448,10 @@ const SearchHeaderButtons = styled.div`
   padding-left: var(--search-header-buttons-padding-left);
   border-left: var(--search-header-buttons-border-left);
 `;
+
+const AiDisclaimer = styled.div`
+  font-size: var(--search-ai-disclaimer-font-size);
+  line-height: var(--search-ai-disclaimer-line-height);
+  color: var(--search-ai-disclaimer-text-color);
+  margin: 0 auto;
+`;

package/src/components/Search/variables.ts

@@ -176,5 +176,9 @@ export const search = css`
   --search-ai-resource-tag-text-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-color: var(--text-color-secondary);
 
+  --search-ai-disclaimer-font-size: var(--font-size-sm);
+  --search-ai-disclaimer-line-height: var(--line-height-sm);
+  --search-ai-disclaimer-text-color: var(--text-color-secondary);
+
   // @tokens End
 `;

package/src/components/Segmented/Segmented.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { ReactElement } from 'react';
+import type { ForwardedRef, ReactElement } from 'react';
 import type { SelectOption } from '@redocly/theme/core/types/select';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
@@ -14,15 +14,13 @@ export type SegmentedProps<T> = {
   size?: 'regular' | 'small';
 };
 
-function SegmentedComponent<T>({
-  options,
-  onChange,
-  value,
-  className = '',
-  size = 'regular',
-}: SegmentedProps<T>): ReactElement {
+function SegmentedComponent<T>(
+  { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,
+  ref?: ForwardedRef<HTMLDivElement>,
+): ReactElement {
   return (
     <SegmentedGroup
+      ref={ref}
       data-component-name="Segmented/Segmented"
       className={`tag-grey ${size} ${className}`}
       role="tablist"
@@ -43,7 +41,9 @@ function SegmentedComponent<T>({
   );
 }
 
-export const Segmented = typedMemo(SegmentedComponent);
+export const Segmented = typedMemo(forwardRef(SegmentedComponent)) as <T>(
+  props: SegmentedProps<T> & { ref?: ForwardedRef<HTMLDivElement> },
+) => ReactElement;
 
 const SegmentedGroup = styled.div`
   display: flex;

package/src/components/Tag/Tag.tsx

@@ -83,7 +83,7 @@ export function Tag({
   );
 }
 
-const ContentWrapper = styled.div`
+export const ContentWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -60,6 +60,7 @@ export function useCodeWalkthroughControls(
   filters: Record<string, CodeWalkthroughFilter>,
   inputs: InputsMarkdocAttr,
   toggles: TogglesMarkdocAttr,
+  enableDeepLink: boolean,
 ): WalkthroughControlsState {
   const location = useLocation();
   const navigate = useNavigate();
@@ -72,7 +73,7 @@ export function useCodeWalkthroughControls(
         ...toggle,
         render: true,
         type: 'toggle',
-        value: searchParams.get(id) === 'true',
+        value: enableDeepLink ? searchParams.get(id) === 'true' : false,
       };
     }
     return initialState;
@@ -116,7 +117,7 @@ export function useCodeWalkthroughControls(
         ...input,
         render: true,
         type: 'input',
-        value: searchParams.get(id) || input.value,
+        value: enableDeepLink ? (searchParams.get(id) ?? input.value) : input.value,
       };
     }
     return initialState;
@@ -156,11 +157,12 @@ export function useCodeWalkthroughControls(
     const initialState: FiltersState = {};
 
     for (const [id, filter] of Object.entries(filters)) {
+      const defaultValue = filter?.items?.[0]?.value || '';
       initialState[id] = {
         ...filter,
         render: true,
         type: 'filter',
-        value: searchParams.get(id) || filter?.items?.[0]?.value || '',
+        value: enableDeepLink ? (searchParams.get(id) ?? defaultValue) : defaultValue,
       };
     }
 
@@ -270,6 +272,10 @@ export function useCodeWalkthroughControls(
    * Update the URL search params with the current state of the filters and inputs
    */
   useEffect(() => {
+    if (!enableDeepLink) {
+      return;
+    }
+
     const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
 
     for (const [id, { value }] of Object.entries(state)) {

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -8,9 +8,9 @@ import { ACTIVE_STEP_QUERY_PARAM } from '@redocly/theme/core/constants';
 
 type ActiveStep = string | null;
 type CodeWalkthroughStep = CodeWalkthroughStepAttr & {
-  active?: boolean;
   compRef?: HTMLElement;
 };
+
 export type WalkthroughStepsState = {
   activeStep: ActiveStep;
   setActiveStep: (stepId: ActiveStep) => void;
@@ -20,7 +20,10 @@ export type WalkthroughStepsState = {
   filtersElementRef?: React.RefObject<HTMLDivElement>;
 };
 
-export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): WalkthroughStepsState {
+export function useCodeWalkthroughSteps(
+  steps: CodeWalkthroughStep[],
+  enableDeepLink: boolean,
+): WalkthroughStepsState {
   const location = useLocation();
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
@@ -32,7 +35,7 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
   const observedElementsRef = useRef(new Set<HTMLElement>());
 
   const [activeStep, setActiveStep] = useState<ActiveStep>(
-    searchParams.get(ACTIVE_STEP_QUERY_PARAM),
+    enableDeepLink ? searchParams.get(ACTIVE_STEP_QUERY_PARAM) : null,
   );
 
   const register = useCallback(
@@ -74,28 +77,23 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
         return;
       }
 
-      const stepsEntries = [];
+      const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+
+      if (renderedSteps.length < 2) {
+        setActiveStep(renderedSteps[0]?.id || null);
+        return;
+      }
+
       for (const entry of entries) {
-        const { target } = entry;
-        const stepKey = Number((target as HTMLElement)?.dataset?.stepKey);
-        const stepActive = (target as HTMLElement)?.dataset?.stepActive === 'true';
+        const stepKey = Number((entry.target as HTMLElement)?.dataset?.stepKey);
 
         if (!Number.isInteger(stepKey) || stepKey < 0) {
           continue;
         }
 
+        const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
         const step = steps[stepKey];
-        step.active = stepActive;
-        stepsEntries.push(entry);
-      }
 
-      for (const stepEntry of stepsEntries) {
-        const { target, intersectionRatio, boundingClientRect, rootBounds, isIntersecting } =
-          stepEntry;
-        const stepKey = Number((target as HTMLElement)?.dataset?.stepKey);
-        const step = steps[stepKey];
-
-        const renderedSteps = steps.filter((step) => Boolean(step.compRef));
         const stepIndex = renderedSteps.findIndex(
           (renderedStep) => renderedStep.stepKey === step.stepKey,
         );
@@ -105,6 +103,16 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
           rootBounds?.bottom !== undefined && boundingClientRect.top < rootBounds.top;
         const stepGoesIn = isIntersecting;
 
+        if (
+          intersectionRatio > 0.8 &&
+          intersectionRatio < 1 &&
+          intersectionAtTop &&
+          activeStep === null
+        ) {
+          setActiveStep(step.id);
+          break;
+        }
+
         if (intersectionRatio < 1 && intersectionRatio !== 0 && intersectionAtTop) {
           let newStep: string | null = null;
 
@@ -128,7 +136,7 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
     const filtersElementHeight = filtersElementRef.current?.clientHeight || 0;
     const navbarHeight = document.querySelector('nav')?.clientHeight || 0;
     const newObserver = new IntersectionObserver(observerCallback, {
-      threshold: [0.8],
+      threshold: [0.8, 0.85, 0.9, 0.95],
       rootMargin: `-${filtersElementHeight + navbarHeight}px 0px 0px 0px`,
     });
 
@@ -145,6 +153,10 @@ export function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): Walkthrou
    * Update the URL search params with the current state of the filters and inputs
    */
   useEffect(() => {
+    if (!enableDeepLink) {
+      return;
+    }
+
     const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
 
     if (activeStep) {

package/src/core/hooks/code-walkthrough/use-code-walkthrough.ts

@@ -1,10 +1,7 @@
 import type {
-  CodeWalkthroughFileset,
   CodeWalkthroughFile,
   CodeWalkthroughStepAttr,
-  CodeWalkthroughFilter,
-  InputsMarkdocAttr,
-  TogglesMarkdocAttr,
+  CodeWalkthroughAttr,
 } from '@redocly/config';
 
 import {
@@ -23,16 +20,19 @@ export type WalkthroughState = {
 
 export function useCodeWalkthrough(
   steps: CodeWalkthroughStepAttr[],
-  attributes: {
-    filters: Record<string, CodeWalkthroughFilter>;
-    filesets: CodeWalkthroughFileset[];
-    inputs: InputsMarkdocAttr;
-    toggles: TogglesMarkdocAttr;
-  },
+  attributes: Omit<CodeWalkthroughAttr, 'steps' | 'preview'>,
 ): WalkthroughState {
-  const { filters, filesets, inputs, toggles } = attributes;
-  const stepsState = useCodeWalkthroughSteps(steps);
-  const controlsState = useCodeWalkthroughControls(filters, inputs, toggles);
+  const { filters, filesets, inputs, toggles, __idx } = attributes;
+  /* 
+    We only enable deep linking for the first CodeWalkthrough, 
+    because we don't expect more than one on the same page. 
+    Any subsequent walkthroughs have it disabled to avoid 
+    collisions/conflicts in the URL.
+  */
+  const enableDeepLink = __idx === 1;
+
+  const stepsState = useCodeWalkthroughSteps(steps, enableDeepLink);
+  const controlsState = useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink);
 
   const files: CodeWalkthroughFile[] = filesets
     .filter((fileset) => controlsState.areConditionsMet(fileset))

package/src/core/hooks/code-walkthrough/use-renderable-files.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+import type { CodeWalkthroughFile } from '@redocly/config';
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import {
+  getFileIconByExt,
+  removeLeadingSlash,
+  findClosestCommonDirectory,
+} from '@redocly/theme/core/utils';
+
+export type RenderableFile = CodeWalkthroughFile & {
+  FileIcon: React.FunctionComponent<IconProps>;
+  parentFolder: string;
+  isNameDuplicate: boolean;
+  inRootDir: boolean;
+};
+
+export function useRenderableFiles(files: CodeWalkthroughFile[]): RenderableFile[] {
+  return useMemo(
+    function () {
+      const filePaths = files.map(({ path }) => path);
+      const rootDir = findClosestCommonDirectory(filePaths);
+
+      const renderableFiles = files.map((file) => {
+        const FileIcon = getFileTypeIcon(file.basename);
+        const parentFolder = file.path.split('/').slice(-2, -1)[0];
+        const isNameDuplicate = files.some(
+          (_file) => file.basename === _file.basename && file.path !== _file.path,
+        );
+        const inRootDir = file.path === `${removeLeadingSlash(rootDir)}/${file.basename}`;
+
+        return {
+          ...file,
+          FileIcon,
+          inRootDir,
+          parentFolder,
+          isNameDuplicate,
+        };
+      });
+
+      return renderableFiles;
+    },
+    [files],
+  );
+}
+
+function getFileTypeIcon(basename: string) {
+  const extension = basename.split('.').pop()?.toLowerCase() || '';
+  return getFileIconByExt(extension);
+}

package/src/core/hooks/index.ts

@@ -32,3 +32,4 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-steps';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-panel';
+export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';

package/src/core/types/l10n.ts

@@ -85,8 +85,9 @@ export type TranslationKey =
   | 'search.filter.field.reset'
   | 'search.ai.thinkingText'
   | 'search.ai.resourcesFound'
-  | 'search.aiButton'
+  | 'search.ai.button'
   | 'search.ai.label'
+  | 'search.ai.disclaimer'
   | 'toc.header'
   | 'footer.copyrightText'
   | 'page.homeButton'
@@ -196,6 +197,7 @@ export type TranslationKey =
   | 'openapi.expandAll'
   | 'openapi.collapseAll'
   | 'openapi.noResponseExample'
+  | 'openapi.noResponseContent'
   | 'openapi.noRequestPayload'
   | 'openapi.hidePattern'
   | 'openapi.showPattern'

package/src/core/utils/download-code-walkthrough.ts

@@ -3,7 +3,11 @@ import JSZip from 'jszip';
 
 import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
 
-import { getCodeWalkthroughFileText } from '@redocly/theme/core/utils';
+import {
+  findClosestCommonDirectory,
+  getCodeWalkthroughFileText,
+  removeLeadingSlash,
+} from '@redocly/theme/core/utils';
 
 // https://github.com/Stuk/jszip/issues/196#issuecomment-69503828
 JSZip.support.nodebuffer = false;
@@ -15,9 +19,17 @@ export async function downloadCodeWalkthrough(
 ) {
   const zip = new JSZip();
 
+  const filePaths = files.map(({ path }) => path);
+  const commonClosestDirectory = findClosestCommonDirectory(filePaths);
+
   for (const file of files) {
     const fileContent = getCodeWalkthroughFileText(file, state, inputsState);
-    zip.file(file.basename, fileContent);
+    if (commonClosestDirectory === '/') {
+      zip.file(file.path, fileContent);
+    } else {
+      const filePath = file.path.replace(removeLeadingSlash(`${commonClosestDirectory}/`), '');
+      zip.file(filePath, fileContent);
+    }
   }
 
   const zipContent = await zip.generateAsync({ type: 'blob' });

package/src/core/utils/find-closest-common-directory.ts

@@ -0,0 +1,51 @@
+/**
+ * Splits a file path into its directory components, removing the file name.
+ * @param path - The full file path.
+ * @returns An array of directories.
+ */
+function splitPath(path: string): string[] {
+  const parts = path.split('/').filter(Boolean);
+  parts.pop();
+  return parts;
+}
+
+/**
+ * Finds the longest common prefix between two paths.
+ * @param path1 - The first path as an array of directories.
+ * @param path2 - The second path as an array of directories.
+ * @returns An array representing the common prefix.
+ */
+function findCommonPrefix(path1: string[], path2: string[]): string[] {
+  const common: string[] = [];
+  for (let i = 0; i < Math.min(path1.length, path2.length); i++) {
+    if (path1[i] === path2[i]) {
+      common.push(path1[i]);
+    } else {
+      break;
+    }
+  }
+  return common;
+}
+
+/**
+ * Finds the closest common directory for a set of file paths.
+ * @param paths - An array of absolute file paths.
+ * @returns The closest common directory as a string.
+ */
+export function findClosestCommonDirectory(paths: string[]): string {
+  if (paths.length === 0) {
+    return '/';
+  }
+
+  const splitPaths = paths.map(splitPath);
+  let commonPrefix = splitPaths[0];
+
+  for (let i = 1; i < splitPaths.length; i++) {
+    commonPrefix = findCommonPrefix(commonPrefix, splitPaths[i]);
+    if (commonPrefix.length === 0) {
+      return '/';
+    }
+  }
+
+  return '/' + commonPrefix.join('/');
+}

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

@@ -10,6 +10,9 @@ import { DocumentHtmlIcon } from '@redocly/theme/icons/DocumentHtmlIcon/Document
 import { DocumentReactIcon } from '@redocly/theme/icons/DocumentReactIcon/DocumentReactIcon';
 import { DocumentMarkdownIcon } from '@redocly/theme/icons/DocumentMarkdownIcon/DocumentMarkdownIcon';
 import { DocumentGraphqlIcon } from '@redocly/theme/icons/DocumentGraphqlIcon/DocumentGraphqlIcon';
+import { DocumentPythonIcon } from '@redocly/theme/icons/DocumentPythonIcon/DocumentPythonIcon';
+import { DocumentShellIcon } from '@redocly/theme/icons/DocumentShellIcon/DocumentShellIcon';
+import { DocumentJavaIcon } from '@redocly/theme/icons/DocumentJavaIcon/DocumentJavaIcon';
 
 const fileIconMap: Record<string, React.FunctionComponent<IconProps>> = {
   yaml: DocumentYamlIcon,
@@ -28,6 +31,10 @@ const fileIconMap: Record<string, React.FunctionComponent<IconProps>> = {
 
   graphql: DocumentGraphqlIcon,
   gql: DocumentGraphqlIcon,
+
+  py: DocumentPythonIcon,
+  sh: DocumentShellIcon,
+  java: DocumentJavaIcon,
 };
 
 export function getFileIconByExt(ext: string) {

package/src/core/utils/index.ts

@@ -30,3 +30,4 @@ export * from '@redocly/theme/core/utils/download-code-walkthrough';
 export * from '@redocly/theme/core/utils/get-file-icon';
 export * from '@redocly/theme/core/utils/match-code-walkthrough-conditions';
 export * from '@redocly/theme/core/utils/replace-inputs-with-value';
+export * from '@redocly/theme/core/utils/find-closest-common-directory';

package/src/core/utils/replace-inputs-with-value.ts

@@ -1,11 +1,14 @@
-const inputRegex = /(?:\/\*|<!--|#|\/\/)\s*@redocly-input\s*\{"id":\s*"(.*?)"\}\s*(?:\*\/|-->)?/g;
+export function replaceInputsWithValue(node: string, inputs: Record<string, { value?: string }>) {
+  const validKeys = Object.entries(inputs)
+    .filter(([_, input]) => input.value)
+    .map(([key]) => key)
+    .join('|');
 
-export function replaceInputsWithValue(node: string, inputs: Record<string, { value: string }>) {
-  return node.replace(inputRegex, (match, inputKey) => {
-    if (Object.prototype.hasOwnProperty.call(inputs, inputKey)) {
-      return inputs[inputKey]?.value;
-    } else {
-      return match;
-    }
-  });
+  if (!validKeys) {
+    return node;
+  }
+
+  const inputRegex = new RegExp(`\\{\\{\\s*(${validKeys})\\s*\\}\\}`, 'g');
+
+  return node.replace(inputRegex, (_, inputKey) => inputs[inputKey]?.value as string);
 }

package/src/icons/DocumentJavaIcon/DocumentJavaIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M2 13H14V14H2V13ZM14 2H3.5C3.36739 2 3.24021 2.05268 3.14645 2.14645C3.05268 2.24021 3 2.36739 3 2.5V9C3 9.53043 3.21071 10.0391 3.58579 10.4142C3.96086 10.7893 4.46957 11 5 11H10C10.5304 11 11.0391 10.7893 11.4142 10.4142C11.7893 10.0391 12 9.53043 12 9V7H14C14.2652 7 14.5196 6.89464 14.7071 6.70711C14.8946 6.51957 15 6.26522 15 6V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2ZM14 6H12V3H14V6Z"
+      fill="#3B3C45"
+    />
+  </svg>
+);
+
+export const DocumentJavaIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentJavaIcon/DocumentJavaIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentJavaIcon/index.ts

@@ -0,0 +1 @@
+export { DocumentJavaIcon } from '@redocly/theme/icons/DocumentJavaIcon/DocumentJavaIcon';

package/src/icons/DocumentPythonIcon/DocumentPythonIcon.tsx

@@ -0,0 +1,37 @@
+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="M6.57325 1.33301C6.06757 1.33301 5.5826 1.53389 5.22504 1.89146C4.86747 2.24903 4.66659 2.734 4.66659 3.23967V4.35967H7.52659C7.78659 4.35967 7.99992 4.73967 7.99992 4.99967H3.23992C2.73424 4.99967 2.24927 5.20055 1.8917 5.55812C1.53413 5.91569 1.33325 6.40066 1.33325 6.90634V9.42701C1.33325 9.93269 1.53413 10.4177 1.8917 10.7752C2.24927 11.1328 2.73424 11.3337 3.23992 11.3337H4.02659V9.54701C4.02571 9.29694 4.07421 9.04915 4.1693 8.81786C4.26439 8.58657 4.4042 8.37633 4.58072 8.19919C4.75724 8.02206 4.96699 7.88151 5.19794 7.78561C5.4289 7.6897 5.67651 7.64034 5.92659 7.64034H9.42659C10.4799 7.64034 11.3333 6.79301 11.3333 5.73967V3.23967C11.3333 2.734 11.1324 2.24903 10.7748 1.89146C10.4172 1.53389 9.93227 1.33301 9.42659 1.33301H6.57325ZM6.09325 2.40634C6.35992 2.40634 6.57325 2.48634 6.57325 2.87967C6.57325 3.27301 6.35992 3.47367 6.09325 3.47367C5.83325 3.47367 5.61992 3.27367 5.61992 2.88034C5.61992 2.48701 5.83325 2.40634 6.09325 2.40634Z"
+      fill="#3B3C45"
+    />
+    <path
+      d="M11.9727 4.66699V6.45366C11.9735 6.70367 11.925 6.95139 11.8298 7.1826C11.7347 7.41381 11.5949 7.62397 11.4184 7.80104C11.2419 7.97811 11.0321 8.1186 10.8012 8.21446C10.5703 8.31032 10.3228 8.35966 10.0727 8.35966H6.57341C6.32334 8.35878 6.07556 8.40728 5.84427 8.50237C5.61298 8.59746 5.40274 8.73727 5.2256 8.91379C5.04846 9.09031 4.90791 9.30006 4.81201 9.53102C4.71611 9.76197 4.66675 10.0096 4.66675 10.2597V12.7597C4.66675 13.2653 4.86763 13.7503 5.2252 14.1079C5.58277 14.4654 6.06774 14.6663 6.57341 14.6663H9.42675C9.93231 14.6663 10.4172 14.4655 10.7747 14.1081C11.1323 13.7507 11.3332 13.2659 11.3334 12.7603V11.6403H8.47275C8.21275 11.6403 8.00008 11.2603 8.00008 11.0003H12.7601C13.2658 11.0003 13.7507 10.7994 14.1083 10.4419C14.4659 10.0843 14.6667 9.59934 14.6667 9.09366V6.57366C14.6667 6.06798 14.4659 5.58301 14.1083 5.22544C13.7507 4.86787 13.2658 4.66699 12.7601 4.66699H11.9727ZM5.54675 7.67566L5.54408 7.67833L5.56941 7.67566H5.54675ZM9.90675 12.5263C10.1667 12.5263 10.3801 12.7263 10.3801 13.1197C10.3801 13.1818 10.3678 13.2434 10.3441 13.3008C10.3203 13.3582 10.2854 13.4104 10.2414 13.4544C10.1975 13.4983 10.1453 13.5332 10.0879 13.557C10.0305 13.5807 9.96891 13.593 9.90675 13.593C9.64008 13.593 9.42675 13.513 9.42675 13.1197C9.42675 12.7263 9.64008 12.5263 9.90675 12.5263Z"
+      fill="#3B3C45"
+    />
+  </svg>
+);
+
+export const DocumentPythonIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentPythonIcon/DocumentPythonIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentPythonIcon/index.ts

@@ -0,0 +1 @@
+export { DocumentPythonIcon } from '@redocly/theme/icons/DocumentPythonIcon/DocumentPythonIcon';