@redocly/theme 0.49.1 → 0.50.1

package/lib/components/Image/Image.d.ts

@@ -7,6 +7,7 @@ export type ImageProps = {
     width?: string | number;
     height?: string | number;
     border?: string;
+    withLightbox?: boolean;
     style?: React.CSSProperties | string;
 };
 export declare function Image(props: ImageProps): JSX.Element;

package/lib/components/Image/Image.js

@@ -8,16 +8,51 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 function Image(props) {
-    const { src, srcSet, alt, className, width, height, border, style } = props;
+    const { src, srcSet, alt, className, width, height, border, style, withLightbox } = props;
+    const [lightboxImage, setLightboxImage] = react_1.default.useState(undefined);
     const parsedSourceSetMap = react_1.default.useMemo(() => {
         return srcSet ? (0, utils_1.parseSrcSet)(srcSet) : new Map();
     }, [srcSet]);
-    const combinedStyle = Object.assign(Object.assign({}, (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
-    return (react_1.default.createElement(react_1.default.Fragment, null, src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyle })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className, width: width, height: height, style: combinedStyle }))))));
+    const handleImageClick = (src) => {
+        if (!withLightbox || lightboxImage) {
+            return;
+        }
+        setLightboxImage(src);
+    };
+    const handleCloseLightbox = () => {
+        setLightboxImage(undefined);
+    };
+    const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        lightboxImage ? (react_1.default.createElement(LightboxContainer, { onClick: handleCloseLightbox },
+            react_1.default.createElement(Image, { src: lightboxImage, alt: alt }))) : null,
+        src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className, width: width, height: height, "$withLightbox": withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))))));
 }
 const ColorModeAwareImage = styled_components_1.default.img `
   html:not(.${(props) => props.colorMode}) && {
     display: none;
   }
+  ${({ $withLightbox }) => $withLightbox &&
+    `
+    cursor: pointer;
+  `}
+`;
+const LightboxContainer = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-color-modal-overlay);
+  z-index: var(--z-index-overlay);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    cursor: pointer;
+    max-width: 90%;
+    max-height: 90%;
+  }
 `;
 //# sourceMappingURL=Image.js.map

package/lib/components/Search/SearchAiResponse.d.ts

@@ -2,6 +2,7 @@ export type SearchAiResponseProps = {
     question: string;
     isGeneratingResponse: boolean;
     response?: string;
+    error: string | null;
     resources: {
         url: string;
         title: string;

package/lib/components/Search/SearchAiResponse.js

@@ -13,25 +13,46 @@ const Tag_1 = require("../../components/Tag/Tag");
 const Link_1 = require("../../components/Link/Link");
 const hooks_1 = require("../../core/hooks");
 const Markdown_1 = require("../../components/Markdown/Markdown");
+const Admonition_1 = require("../../components/Admonition/Admonition");
+const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon");
 function SearchAiResponse(props) {
     const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
-    const { question, response, isGeneratingResponse, resources } = props;
+    const { question, response, isGeneratingResponse, resources, error } = props;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const markdownResponse = useMarkdownText(response || '');
-    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/SearchAiResponse" },
-        react_1.default.createElement(ResponseHeader, null,
-            isGeneratingResponse ? (react_1.default.createElement(Spinner_1.Spinner, { size: "20px", color: "--search-ai-spinner-icon-color" })) : (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "20px", color: "--search-ai-checkmark-icon-color" })),
-            react_1.default.createElement(Question, null, question)),
-        react_1.default.createElement(ResponseBody, null,
-            response ? (react_1.default.createElement(ResponseText, Object.assign({ children: markdownResponse, as: "div" }, props))) : (react_1.default.createElement(ThinkingResponseText, { "data-translation-key": "search.ai.thinkingText" }, translate('search.ai.thinkingText', 'Thinking...'))),
-            resources.length && !isGeneratingResponse ? (react_1.default.createElement(Resources, null,
-                react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
-                    resources.length,
-                    " ",
-                    translate('search.ai.resourcesFound', 'resources found')),
-                react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
-                    react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))) : null)));
+    let responseContainer = null;
+    const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
+    if (hasPendingOrReceivedResponse) {
+        let icon;
+        switch (true) {
+            case error !== null:
+                icon = react_1.default.createElement(ErrorFilledIcon_1.ErrorFilledIcon, { size: "20px", color: "--error-bubble-content-color" });
+                break;
+            case isGeneratingResponse:
+                icon = react_1.default.createElement(Spinner_1.Spinner, { size: "20px", color: "--search-ai-spinner-icon-color" });
+                break;
+            case Boolean(response):
+                icon = react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "20px", color: "--search-ai-checkmark-icon-color" });
+                break;
+        }
+        responseContainer = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ResponseHeader, null,
+                icon,
+                react_1.default.createElement(Question, null, question)),
+            react_1.default.createElement(ResponseBody, null,
+                response && react_1.default.createElement(ResponseText, Object.assign({ children: markdownResponse, as: "div" }, props)),
+                !response && isGeneratingResponse && (react_1.default.createElement(ThinkingResponseText, { "data-translation-key": "search.ai.thinkingText" }, translate('search.ai.thinkingText', 'Thinking...'))),
+                error && (react_1.default.createElement(Admonition_1.Admonition, { type: "danger", name: translate('search.ai.error.header', 'Oops! Something went wrong.') }, translate('search.ai.error.description', 'We encountered an issue while processing your search. Please try again later or refine your query. If the problem persists, feel free to contact support.'))),
+                resources.length && !isGeneratingResponse ? (react_1.default.createElement(Resources, null,
+                    react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
+                        resources.length,
+                        " ",
+                        translate('search.ai.resourcesFound', 'resources found')),
+                    react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
+                        react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))) : null)));
+    }
+    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/SearchAiResponse" }, responseContainer));
 }
 const ResponseWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Search/SearchDialog.js

@@ -116,7 +116,10 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
                 react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: mode === 'search'
                         ? translate('search.label', 'Search docs...')
-                        : translate('search.ai.label', 'Ask AI assistant'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => setMode('search'), onSubmit: mode === 'ai-dialog'
+                        : translate('search.ai.label', 'Ask AI assistant'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => {
+                        setMode('search');
+                        aiSearch.clearAiSearchState();
+                    }, onSubmit: mode === 'ai-dialog'
                         ? () => {
                             setQuery('');
                             aiSearch.askQuestion(query);
@@ -147,7 +150,7 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
                 advancedSearch && mode === 'search' && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources, error: aiSearch.error }))),
             react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),

package/lib/core/hooks/use-color-switcher.d.ts

@@ -1,6 +1,6 @@
 export declare const useColorSwitcher: () => {
     isSwitcherHidden: boolean | undefined;
     initActiveColorMode: () => void;
-    switchColorMode: () => string;
+    switchColorMode: (mode?: string) => void;
     activeColorMode: string;
 };

package/lib/core/hooks/use-color-switcher.js

@@ -15,17 +15,20 @@ const useColorSwitcher = () => {
         const activeMode = Array.from(document.documentElement.classList).find((c) => modes.includes(c));
         setActiveColorMode(activeMode || defaultColor);
     };
-    const switchColorMode = () => {
+    const switchColorMode = (mode) => {
+        if (mode && !modes.includes(mode)) {
+            return;
+        }
         const activeIndex = modes.indexOf(activeColorMode);
-        const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
-        localStorage.setItem('colorSchema', mode);
-        document.documentElement.className = `${mode} notransition`;
+        // If specific mode is provided, use it, otherwise cycle through modes
+        const newMode = mode || (activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0]);
+        localStorage.setItem('colorSchema', newMode);
+        document.documentElement.className = `${newMode} notransition`;
         window.requestAnimationFrame(() => {
             document.documentElement.classList.remove('notransition');
         });
-        telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
-        setActiveColorMode(mode);
-        return mode;
+        telemetry.send('color_mode_switched', { from: activeColorMode, to: newMode });
+        setActiveColorMode(newMode);
     };
     return {
         isSwitcherHidden: colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide,

package/lib/core/types/api-functions.d.ts

@@ -0,0 +1,5 @@
+export type { ApiFunctionsRequest as Request } from '@redocly/config';
+export type { ApiFunctionsResponse as Response } from '@redocly/config';
+export type { ApiFunctionsContext as Context } from '@redocly/config';
+export type { PropsContext } from '@redocly/config';
+export type { PageStaticData as PropsData } from '@redocly/config';

package/lib/core/types/api-functions.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=api-functions.js.map

package/lib/core/types/hooks.d.ts

@@ -73,6 +73,8 @@ export type ThemeHooks = {
             title: string;
             url: string;
         }[];
+        error: null | string;
+        clearAiSearchState: () => void;
     };
     useMarkdownText: (text: string) => React.ReactNode;
     useFacetQuery: (field: string) => {

package/lib/core/types/index.d.ts

@@ -10,3 +10,4 @@ export * from '../../core/types/select';
 export * from '../../core/types/sidebar';
 export * from '../../core/types/filter';
 export * from '../../core/types/user-menu';
+export * from '../../core/types/api-functions';

package/lib/core/types/index.js

@@ -26,4 +26,5 @@ __exportStar(require("../../core/types/select"), exports);
 __exportStar(require("../../core/types/sidebar"), exports);
 __exportStar(require("../../core/types/filter"), exports);
 __exportStar(require("../../core/types/user-menu"), exports);
+__exportStar(require("../../core/types/api-functions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.header' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/ErrorFilledIcon/ErrorFilledIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ErrorFilledIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ErrorFilledIcon/ErrorFilledIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorFilledIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M10.0002 1.24998C8.84911 1.24285 7.70808 1.4643 6.64326 1.9015C5.57844 2.3387 4.61101 2.98295 3.79707 3.79689C2.98313 4.61083 2.33889 5.57826 1.90168 6.64308C1.46448 7.7079 1.24303 8.84892 1.25017 9.99998C1.24303 11.151 1.46448 12.2921 1.90168 13.3569C2.33889 14.4217 2.98313 15.3891 3.79707 16.2031C4.61101 17.017 5.57844 17.6613 6.64326 18.0985C7.70808 18.5357 8.84911 18.7571 10.0002 18.75C11.1512 18.7571 12.2923 18.5357 13.3571 18.0985C14.4219 17.6613 15.3893 17.017 16.2033 16.2031C17.0172 15.3891 17.6614 14.4217 18.0986 13.3569C18.5359 12.2921 18.7573 11.151 18.7502 9.99998C18.7573 8.84892 18.5359 7.7079 18.0986 6.64308C17.6614 5.57826 17.0172 4.61083 16.2033 3.79689C15.3893 2.98295 14.4219 2.3387 13.3571 1.9015C12.2923 1.4643 11.1512 1.24285 10.0002 1.24998ZM13.4032 14.375L5.62517 6.5973L6.59748 5.62498L14.3752 13.403L13.4032 14.375Z", fill: "#F9316D" })));
+exports.ErrorFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ErrorFilledIcon/ErrorFilledIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ErrorFilledIcon.js.map

package/lib/index.d.ts

@@ -212,6 +212,7 @@ export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
 export * from './icons/CertificateIcon/CertificateIcon';
+export * from './icons/ErrorFilledIcon/ErrorFilledIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -264,6 +264,7 @@ __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 __exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
+__exportStar(require("./icons/ErrorFilledIcon/ErrorFilledIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/tags/img.js

@@ -16,6 +16,10 @@ exports.img = {
             alt: {
                 type: String,
             },
+            withLightbox: {
+                type: Boolean,
+                default: false,
+            },
             className: {
                 type: String,
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.49.1",
+  "version": "0.50.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Image/Image.tsx

@@ -11,23 +11,42 @@ export type ImageProps = {
   width?: string | number;
   height?: string | number;
   border?: string;
+  withLightbox?: boolean;
   style?: React.CSSProperties | string;
 };
 
 export function Image(props: ImageProps): JSX.Element {
-  const { src, srcSet, alt, className, width, height, border, style } = props;
+  const { src, srcSet, alt, className, width, height, border, style, withLightbox } = props;
 
+  const [lightboxImage, setLightboxImage] = React.useState<string | undefined>(undefined);
   const parsedSourceSetMap = React.useMemo(() => {
     return srcSet ? parseSrcSet(srcSet) : new Map();
   }, [srcSet]);
 
-  const combinedStyle: React.CSSProperties = {
+  const handleImageClick = (src: string) => {
+    if (!withLightbox || lightboxImage) {
+      return;
+    }
+    setLightboxImage(src);
+  };
+
+  const handleCloseLightbox = () => {
+    setLightboxImage(undefined);
+  };
+
+  const combinedStyles: React.CSSProperties = {
+    ...(withLightbox && { cursor: 'pointer' }),
     ...(border && { border }),
     ...(typeof style === 'string' ? { cssText: style } : style),
   };
 
   return (
     <>
+      {lightboxImage ? (
+        <LightboxContainer onClick={handleCloseLightbox}>
+          <Image src={lightboxImage} alt={alt} />
+        </LightboxContainer>
+      ) : null}
       {src ? (
         <img
           src={src}
@@ -35,7 +54,8 @@ export function Image(props: ImageProps): JSX.Element {
           className={className}
           width={width}
           height={height}
-          style={combinedStyle}
+          style={combinedStyles}
+          onClick={() => handleImageClick(src)}
         />
       ) : (
         Array.from(parsedSourceSetMap).map(([key, value]) => (
@@ -47,7 +67,9 @@ export function Image(props: ImageProps): JSX.Element {
             className={className}
             width={width}
             height={height}
-            style={combinedStyle}
+            $withLightbox={withLightbox}
+            style={combinedStyles}
+            onClick={() => handleImageClick(value)}
           />
         ))
       )}
@@ -55,8 +77,32 @@ export function Image(props: ImageProps): JSX.Element {
   );
 }
 
-const ColorModeAwareImage = styled.img<{ colorMode: string }>`
+const ColorModeAwareImage = styled.img<{ colorMode: string; $withLightbox?: boolean }>`
   html:not(.${(props) => props.colorMode}) && {
     display: none;
   }
+  ${({ $withLightbox }) =>
+    $withLightbox &&
+    `
+    cursor: pointer;
+  `}
+`;
+
+const LightboxContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-color-modal-overlay);
+  z-index: var(--z-index-overlay);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    cursor: pointer;
+    max-width: 90%;
+    max-height: 90%;
+  }
 `;

package/src/components/Search/SearchAiResponse.tsx

@@ -8,11 +8,14 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { Admonition } from '@redocly/theme/components/Admonition/Admonition';
+import { ErrorFilledIcon } from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
 
 export type SearchAiResponseProps = {
   question: string;
   isGeneratingResponse: boolean;
   response?: string;
+  error: string | null;
   resources: {
     url: string;
     title: string;
@@ -21,50 +24,79 @@ export type SearchAiResponseProps = {
 
 export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
   const { useMarkdownText } = useThemeHooks();
-  const { question, response, isGeneratingResponse, resources } = props;
+  const { question, response, isGeneratingResponse, resources, error } = props;
 
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const markdownResponse = useMarkdownText(response || '');
 
+  let responseContainer = null;
+
+  const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
+  if (hasPendingOrReceivedResponse) {
+    let icon;
+    switch (true) {
+      case error !== null:
+        icon = <ErrorFilledIcon size="20px" color="--error-bubble-content-color" />;
+        break;
+      case isGeneratingResponse:
+        icon = <Spinner size="20px" color="--search-ai-spinner-icon-color" />;
+        break;
+      case Boolean(response):
+        icon = <CheckmarkFilledIcon size="20px" color="--search-ai-checkmark-icon-color" />;
+        break;
+    }
+    responseContainer = (
+      <>
+        <ResponseHeader>
+          {icon}
+          <Question>{question}</Question>
+        </ResponseHeader>
+        <ResponseBody>
+          {response && <ResponseText children={markdownResponse} as="div" {...props} />}
+          {!response && isGeneratingResponse && (
+            <ThinkingResponseText data-translation-key="search.ai.thinkingText">
+              {translate('search.ai.thinkingText', 'Thinking...')}
+            </ThinkingResponseText>
+          )}
+          {error && (
+            <Admonition
+              type="danger"
+              name={translate('search.ai.error.header', 'Oops! Something went wrong.')}
+            >
+              {translate(
+                'search.ai.error.description',
+                'We encountered an issue while processing your search. Please try again later or refine your query. If the problem persists, feel free to contact support.',
+              )}
+            </Admonition>
+          )}
+          {resources.length && !isGeneratingResponse ? (
+            <Resources>
+              <ResourcesTitle data-translation-key="search.ai.resourcesFound">
+                {resources.length} {translate('search.ai.resourcesFound', 'resources found')}
+              </ResourcesTitle>
+              <ResourceTags>
+                {resources.map((resource, idx) => (
+                  <Link key={idx} to={resource.url} target="_blank">
+                    <ResourceTag
+                      borderless
+                      icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
+                    >
+                      {resource.title}
+                    </ResourceTag>
+                  </Link>
+                ))}
+              </ResourceTags>
+            </Resources>
+          ) : null}
+        </ResponseBody>
+      </>
+    );
+  }
+
   return (
     <ResponseWrapper data-component-name="Search/SearchAiResponse">
-      <ResponseHeader>
-        {isGeneratingResponse ? (
-          <Spinner size="20px" color="--search-ai-spinner-icon-color" />
-        ) : (
-          <CheckmarkFilledIcon size="20px" color="--search-ai-checkmark-icon-color" />
-        )}
-        <Question>{question}</Question>
-      </ResponseHeader>
-      <ResponseBody>
-        {response ? (
-          <ResponseText children={markdownResponse} as="div" {...props} />
-        ) : (
-          <ThinkingResponseText data-translation-key="search.ai.thinkingText">
-            {translate('search.ai.thinkingText', 'Thinking...')}
-          </ThinkingResponseText>
-        )}
-        {resources.length && !isGeneratingResponse ? (
-          <Resources>
-            <ResourcesTitle data-translation-key="search.ai.resourcesFound">
-              {resources.length} {translate('search.ai.resourcesFound', 'resources found')}
-            </ResourcesTitle>
-            <ResourceTags>
-              {resources.map((resource, idx) => (
-                <Link key={idx} to={resource.url} target="_blank">
-                  <ResourceTag
-                    borderless
-                    icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
-                  >
-                    {resource.title}
-                  </ResourceTag>
-                </Link>
-              ))}
-            </ResourceTags>
-          </Resources>
-        ) : null}
-      </ResponseBody>
+      {responseContainer}
     </ResponseWrapper>
   );
 }

package/src/components/Search/SearchDialog.tsx

@@ -146,7 +146,10 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
             }
             isLoading={isSearchLoading}
             showReturnButton={mode === 'ai-dialog'}
-            onReturn={() => setMode('search')}
+            onReturn={() => {
+              setMode('search');
+              aiSearch.clearAiSearchState();
+            }}
             onSubmit={
               mode === 'ai-dialog'
                 ? () => {
@@ -250,6 +253,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               isGeneratingResponse={aiSearch.isGeneratingResponse}
               response={aiSearch.response}
               resources={aiSearch.resources}
+              error={aiSearch.error}
             />
           )}
         </SearchDialogBody>

package/src/core/hooks/use-color-switcher.ts

@@ -18,19 +18,24 @@ export const useColorSwitcher = () => {
     setActiveColorMode(activeMode || defaultColor);
   };
 
-  const switchColorMode = (): string => {
+  const switchColorMode = (mode?: string): void => {
+    if (mode && !modes.includes(mode)) {
+      return;
+    }
+
     const activeIndex = modes.indexOf(activeColorMode);
-    const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
-    localStorage.setItem('colorSchema', mode);
-    document.documentElement.className = `${mode} notransition`;
+    // If specific mode is provided, use it, otherwise cycle through modes
+    const newMode = mode || (activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0]);
+
+    localStorage.setItem('colorSchema', newMode);
+    document.documentElement.className = `${newMode} notransition`;
 
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
-    telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
+    telemetry.send('color_mode_switched', { from: activeColorMode, to: newMode });
 
-    setActiveColorMode(mode);
-    return mode;
+    setActiveColorMode(newMode);
   };
 
   return {

package/src/core/types/api-functions.ts

@@ -0,0 +1,5 @@
+export type { ApiFunctionsRequest as Request } from '@redocly/config';
+export type { ApiFunctionsResponse as Response } from '@redocly/config';
+export type { ApiFunctionsContext as Context } from '@redocly/config';
+export type { PropsContext } from '@redocly/config';
+export type { PageStaticData as PropsData } from '@redocly/config';

package/src/core/types/hooks.ts

@@ -88,6 +88,8 @@ export type ThemeHooks = {
       title: string;
       url: string;
     }[];
+    error: null | string;
+    clearAiSearchState: () => void;
   };
   useMarkdownText: (text: string) => React.ReactNode;
   useFacetQuery: (field: string) => {

package/src/core/types/index.ts

@@ -10,3 +10,4 @@ export * from '@redocly/theme/core/types/select';
 export * from '@redocly/theme/core/types/sidebar';
 export * from '@redocly/theme/core/types/filter';
 export * from '@redocly/theme/core/types/user-menu';
+export * from '@redocly/theme/core/types/api-functions';

package/src/core/types/l10n.ts

@@ -88,6 +88,8 @@ export type TranslationKey =
   | 'search.ai.button'
   | 'search.ai.label'
   | 'search.ai.disclaimer'
+  | 'search.ai.error.description'
+  | 'search.ai.error.header'
   | 'toc.header'
   | 'footer.copyrightText'
   | 'page.homeButton'

package/src/icons/ErrorFilledIcon/ErrorFilledIcon.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
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M10.0002 1.24998C8.84911 1.24285 7.70808 1.4643 6.64326 1.9015C5.57844 2.3387 4.61101 2.98295 3.79707 3.79689C2.98313 4.61083 2.33889 5.57826 1.90168 6.64308C1.46448 7.7079 1.24303 8.84892 1.25017 9.99998C1.24303 11.151 1.46448 12.2921 1.90168 13.3569C2.33889 14.4217 2.98313 15.3891 3.79707 16.2031C4.61101 17.017 5.57844 17.6613 6.64326 18.0985C7.70808 18.5357 8.84911 18.7571 10.0002 18.75C11.1512 18.7571 12.2923 18.5357 13.3571 18.0985C14.4219 17.6613 15.3893 17.017 16.2033 16.2031C17.0172 15.3891 17.6614 14.4217 18.0986 13.3569C18.5359 12.2921 18.7573 11.151 18.7502 9.99998C18.7573 8.84892 18.5359 7.7079 18.0986 6.64308C17.6614 5.57826 17.0172 4.61083 16.2033 3.79689C15.3893 2.98295 14.4219 2.3387 13.3571 1.9015C12.2923 1.4643 11.1512 1.24285 10.0002 1.24998ZM13.4032 14.375L5.62517 6.5973L6.59748 5.62498L14.3752 13.403L13.4032 14.375Z"
+      fill="#F9316D"
+    />
+  </svg>
+);
+
+export const ErrorFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ErrorFilledIcon/ErrorFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -236,6 +236,7 @@ export * from '@redocly/theme/icons/CharacterIcon/CharacterIcon';
 export * from '@redocly/theme/icons/FileIcon/FileIcon';
 export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
+export * from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/tags/img.ts

@@ -15,6 +15,10 @@ export const img: MarkdocSchemaWrapper = {
       alt: {
         type: String,
       },
+      withLightbox: {
+        type: Boolean,
+        default: false,
+      },
       className: {
         type: String,
       },