@redocly/theme 0.66.0-next.2 → 0.66.0-next.4

package/lib/markdoc/components/Cards/CardIcon.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
 function CardIcon({ variant, src, rawContent, position }) {
-    return (react_1.default.createElement(exports.CardIconWrapper, { "$variant": variant, "$position": position },
+    return (react_1.default.createElement(exports.CardIconWrapper, { $variant: variant, $position: position },
         react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: src, rawContent: rawContent })));
 }
 exports.CardIconWrapper = styled_components_1.default.div `

package/lib/markdoc/components/Cards/CardImage.js

@@ -7,7 +7,7 @@ exports.CardImage = CardImage;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function CardImage({ src, alt, position }) {
-    return react_1.default.createElement(Image, { src: src, alt: alt, "$position": position });
+    return react_1.default.createElement(Image, { src: src, alt: alt, $position: position });
 }
 const Image = styled_components_1.default.img `
   width: 100%;

package/lib/markdoc/components/Cards/Cards.js

@@ -40,7 +40,7 @@ exports.Cards = Cards;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function Cards({ cardMinWidth = 240, columns, className, children, ariaLabel }) {
-    return (React.createElement(GridLayout, { "$cardMinWidth": cardMinWidth, "$columns": columns, className: className, "aria-label": ariaLabel }, children));
+    return (React.createElement(GridLayout, { $cardMinWidth: cardMinWidth, $columns: columns, className: className, "aria-label": ariaLabel }, children));
 }
 const GridLayout = styled_components_1.default.div `
   display: grid;

package/lib/markdoc/components/Cards/variables.d.ts

@@ -1 +1 @@
-export declare const cards: import("styled-components").FlattenSimpleInterpolation;
+export declare const cards: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/Cards/variables.dark.d.ts

@@ -1 +1 @@
-export declare const cardsDarkMode: import("styled-components").FlattenSimpleInterpolation;
+export declare const cardsDarkMode: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/CodeWalkthrough/CodeContainer.d.ts

@@ -3,4 +3,4 @@ export type CodeContainerProps = {
     highlightedCode: string;
     toolbar: JSX.Element;
 };
-export declare function CodeContainer({ highlightedCode, toolbar, }: CodeContainerProps): JSX.Element | null;
+export declare function CodeContainer({ highlightedCode, toolbar }: CodeContainerProps): JSX.Element | null;

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.d.ts

@@ -10,4 +10,4 @@ export type CodeFilterProps = {
     handleFilterSelect: (groupId: string, id: string) => void;
     filtersElementRef?: React.RefObject<HTMLDivElement | null>;
 };
-export declare function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersElementRef, }: CodeFilterProps): React.JSX.Element | null;
+export declare function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersElementRef }: CodeFilterProps): React.JSX.Element | null;

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -16,10 +16,7 @@ function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersEleme
             label && react_1.default.createElement(FilterName, null,
                 label,
                 ":"),
-            react_1.default.createElement(ButtonsWrapper, null, items === null || items === void 0 ? void 0 : items.map((item) => {
-                var _a;
-                return (react_1.default.createElement(TagButton, { size: "large", borderless: true, active: ((_a = getFilterState(id)) === null || _a === void 0 ? void 0 : _a.value) === item.value, key: item.value, onClick: () => handleFilterSelect(id, item.value) }, item.value));
-            }))));
+            react_1.default.createElement(ButtonsWrapper, null, items === null || items === void 0 ? void 0 : items.map((item) => { var _a; return (react_1.default.createElement(TagButton, { size: "large", borderless: true, active: ((_a = getFilterState(id)) === null || _a === void 0 ? void 0 : _a.value) === item.value, key: item.value, onClick: () => handleFilterSelect(id, item.value) }, item.value)); }))));
     })));
 }
 const Filter = styled_components_1.default.div `

package/lib/markdoc/components/CodeWalkthrough/CodePanel.d.ts

@@ -6,4 +6,4 @@ export type CodePanelProps = {
     downloadAssociatedFiles: CodeWalkthroughFile[];
     preview: React.ReactNode[];
 };
-export declare function CodePanel({ files, downloadAssociatedFiles, preview, }: CodePanelProps): JSX.Element | null;
+export declare function CodePanel({ files, downloadAssociatedFiles, preview }: CodePanelProps): JSX.Element | null;

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.d.ts

@@ -6,4 +6,4 @@ export type CodePanelHeaderProps = {
     activeTabName: string;
     onDownloadCode: () => void;
 };
-export declare function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode, }: CodePanelHeaderProps): JSX.Element;
+export declare function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode }: CodePanelHeaderProps): JSX.Element;

package/lib/markdoc/components/CodeWalkthrough/CodeStep.d.ts

@@ -4,8 +4,11 @@ export type CodeStepProps = WithConditions<{
     id: string;
     heading?: string;
 }>;
-export declare function CodeStep({ id, heading, when, unless, children, }: PropsWithChildren<CodeStepProps>): React.JSX.Element | null;
-export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare function CodeStep({ id, heading, when, unless, children }: PropsWithChildren<CodeStepProps>): React.JSX.Element | null;
+export declare const StepWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "isActive" | "scrollMarginTop"> & {
     isActive: boolean;
     scrollMarginTop: number;
-}, never>;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "isActive" | "scrollMarginTop"> & {
+    isActive: boolean;
+    scrollMarginTop: number;
+}, never>>> & string;

package/lib/markdoc/components/CodeWalkthrough/CodeToggle.d.ts

@@ -5,5 +5,5 @@ export type CodeToggleProps = React.PropsWithChildren<{
     description?: React.ReactNode[];
 }>;
 export declare function CodeToggle(props: CodeToggleProps): React.JSX.Element | null;
-export declare const ToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ToggleSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToggleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ToggleSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/markdoc/components/CodeWalkthrough/variables.d.ts

@@ -1 +1 @@
-export declare const codeWalkthrough: import("styled-components").FlattenSimpleInterpolation;
+export declare const codeWalkthrough: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/ConnectMCP/ConnectMCP.d.ts

@@ -5,4 +5,4 @@ export type ConnectMCPProps = {
     alignment?: 'start' | 'end';
     options?: MCPOption[];
 };
-export declare function ConnectMCP({ placement, alignment, options, }: ConnectMCPProps): JSX.Element | null;
+export declare function ConnectMCP({ placement, alignment, options }: ConnectMCPProps): JSX.Element | null;

package/lib/markdoc/components/Diagram/Diagram.d.ts

@@ -11,5 +11,5 @@ type DiagramProps = {
     'data-hash'?: string;
     className?: string;
 };
-export declare function Diagram({ id, diagramHtml, diagramHtmlDark, diagramError, diagramType, align, width, 'data-source': dataSource, 'data-hash': dataHash, className, }: DiagramProps): JSX.Element;
+export declare function Diagram({ id, diagramHtml, diagramHtmlDark, diagramError, diagramType, align, width, 'data-source': dataSource, 'data-hash': dataHash, className }: DiagramProps): JSX.Element;
 export {};

package/lib/markdoc/components/Diagram/Diagram.js

@@ -61,9 +61,9 @@ function Diagram({ id, diagramHtml, diagramHtmlDark, diagramError, diagramType,
         return (react_1.default.createElement(ErrorWrapper, { id: id, className: (0, utils_1.concatClassNames)('diagram-error', className) }, diagramError));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Wrapper, { id: id, "$width": width, className: (0, utils_1.concatClassNames)(`diagram-wrapper diagram-${diagramType}`, className), "data-component-name": "Markdoc/Diagram/Diagram", "data-diagram-type": diagramType, "data-source": dataSource, "data-hash": dataHash, onClick: open, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": translate('diagram.openFullscreen', 'Click to open diagram in fullscreen') },
-            react_1.default.createElement(DiagramVariant, { "$align": align, "$colorMode": "light", className: `diagram-variant diagram-variant-light diagram-${diagramType}`, dangerouslySetInnerHTML: { __html: diagramHtml } }),
-            diagramHtmlDark ? (react_1.default.createElement(DiagramVariant, { "$align": align, "$colorMode": "dark", className: `diagram-variant diagram-variant-dark diagram-${diagramType}`, dangerouslySetInnerHTML: { __html: diagramHtmlDark } })) : null),
+        react_1.default.createElement(Wrapper, { id: id, $width: width, className: (0, utils_1.concatClassNames)(`diagram-wrapper diagram-${diagramType}`, className), "data-component-name": "Markdoc/Diagram/Diagram", "data-diagram-type": diagramType, "data-source": dataSource, "data-hash": dataHash, onClick: open, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": translate('diagram.openFullscreen', 'Click to open diagram in fullscreen') },
+            react_1.default.createElement(DiagramVariant, { $align: align, $colorMode: "light", className: `diagram-variant diagram-variant-light diagram-${diagramType}`, dangerouslySetInnerHTML: { __html: diagramHtml } }),
+            diagramHtmlDark ? (react_1.default.createElement(DiagramVariant, { $align: align, $colorMode: "dark", className: `diagram-variant diagram-variant-dark diagram-${diagramType}`, dangerouslySetInnerHTML: { __html: diagramHtmlDark } })) : null),
         react_1.default.createElement(SvgViewer_1.SvgViewer, { isOpen: isOpen, onClose: close, labels: {
                 zoomIn: translate('diagram.zoomIn', 'Zoom in'),
                 zoomOut: translate('diagram.zoomOut', 'Zoom out'),

package/lib/markdoc/components/Diagram/variables.d.ts

@@ -1 +1 @@
-export declare const diagram: import("styled-components").FlattenSimpleInterpolation;
+export declare const diagram: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
 import type { JSX, PropsWithChildren } from 'react';
-export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }: PropsWithChildren<{
+export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx }: PropsWithChildren<{
     level: number;
     id: string;
     'data-source'?: string;

package/lib/markdoc/components/InlineSvg/InlineSvg.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function InlineSvg({ fileRawContent, className, }: {
+export declare function InlineSvg({ fileRawContent, className }: {
     fileRawContent: string;
     className?: string;
 }): React.JSX.Element;

package/lib/markdoc/components/LoginButton/LoginButton.d.ts

@@ -6,4 +6,4 @@ export type MarkdocLoginButtonProps = {
     label?: string;
     labelTranslationKey?: string;
 };
-export declare function LoginButton({ variant, size, label, labelTranslationKey, }: MarkdocLoginButtonProps): React.JSX.Element | null;
+export declare function LoginButton({ variant, size, label, labelTranslationKey }: MarkdocLoginButtonProps): React.JSX.Element | null;

package/lib/markdoc/components/Tabs/Tab.d.ts

@@ -12,5 +12,5 @@ export type TabProps = {
     icon?: React.ReactNode;
     iconRawContent?: string;
 };
-export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }: TabProps): JSX.Element;
-export declare const Tab: import("styled-components").StyledComponent<typeof TabComponent, any, {}, never>;
+export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent }: TabProps): JSX.Element;
+export declare const Tab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TabProps, never> & Partial<Pick<TabProps, never>>> & string & Omit<typeof TabComponent, keyof React.Component<any, {}, any>>;

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -9,12 +9,22 @@ type TabListProps = {
     containerRef: React.RefObject<HTMLUListElement | null>;
     onReadyChange?: (isReady: boolean) => void;
 };
-export declare function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange, }: TabListProps): JSX.Element;
-export declare const TabListContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const TabItem: import("styled-components").StyledComponent<"li", any, {
+export declare function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange }: TabListProps): JSX.Element;
+export declare const TabListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
+export declare const TabItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "active" | "size" | "tabIndex"> & {
     active?: boolean;
     size: TabsSize;
     tabIndex?: number;
-}, never>;
-export declare const TabButtonLink: import("styled-components").StyledComponent<React.FC<import("../../../components/Button/Button").ButtonProps>, any, import("../../../components/Button/Button").ButtonProps, never>;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "active" | "size" | "tabIndex"> & {
+    active?: boolean;
+    size: TabsSize;
+    tabIndex?: number;
+}, never>>> & string;
+export declare const TabButtonLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("../../../index.js").ButtonProps, keyof import("../../../index.js").ButtonProps> & import("../../../index.js").ButtonProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../../../index.js").ButtonProps, keyof import("../../../index.js").ButtonProps> & import("../../../index.js").ButtonProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("../../../index.js").ButtonProps, keyof import("../../../index.js").ButtonProps> & import("../../../index.js").ButtonProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../../../index.js").ButtonProps, keyof import("../../../index.js").ButtonProps> & import("../../../index.js").ButtonProps, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never>>> & string;
 export {};

package/lib/markdoc/components/Tabs/TabList.js

@@ -163,7 +163,7 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
             return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
         }),
         hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: "dropdown-tab" },
-            react_1.default.createElement(DropdownWrapper, { "$top": dropdownPosition.top, "$left": dropdownPosition.left, onClickCapture: () => {
+            react_1.default.createElement(DropdownWrapper, { $top: dropdownPosition.top, $left: dropdownPosition.left, onClickCapture: () => {
                     setIsDropdownOpen(true);
                 } },
                 react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onClose: () => {

package/lib/markdoc/components/Tabs/Tabs.d.ts

@@ -19,6 +19,6 @@ type TabsProps = {
     initialTab?: string;
     activeTab?: string;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }: TabsProps): JSX.Element;
-export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab }: TabsProps): JSX.Element;
+export declare const TabContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/lib/markdoc/components/Tabs/Tabs.js

@@ -50,7 +50,8 @@ var TabsSize;
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
 function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }) {
-    var _a, _b;
+    var _a;
+    var _b;
     const childrenArray = react_1.default.Children.toArray(children);
     const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';

package/lib/markdoc/components/Tabs/variables.d.ts

@@ -1 +1 @@
-export declare const markdownTabs: import("styled-components").FlattenSimpleInterpolation;
+export declare const markdownTabs: import("styled-components").RuleSet<object>;

package/lib/markdoc/default.d.ts

@@ -5,47 +5,6 @@ export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
 export * from '../markdoc/attributes/svg-content';
 export * as components from '../markdoc/components/default';
-import { admonition } from '../markdoc/tags/admonition';
-import { html } from '../markdoc/tags/html';
-import { markdocExample } from '../markdoc/tags/markdoc-example';
-import { partial } from '../markdoc/tags/partial';
-import { tab } from '../markdoc/tags/tab';
-import { tabs } from '../markdoc/tags/tabs';
-import { debug } from '../markdoc/tags/debug';
-import { codeSnippet } from '../markdoc/tags/code-snippet';
-import { inlineSvg } from '../markdoc/tags/inline-svg';
-import { cards } from '../markdoc/tags/cards';
-import { card } from '../markdoc/tags/card';
-import { img } from '../markdoc/tags/img';
-import { codeWalkthrough } from '../markdoc/tags/code-walkthrough';
-import { codeStep } from '../markdoc/tags/code-step';
-import { input } from '../markdoc/tags/input';
-import { toggle } from '../markdoc/tags/code-toggle';
-import { codeGroup } from '../markdoc/tags/code-group';
-import { icon } from '../markdoc/tags/icon';
-import { connectMcp } from '../markdoc/tags/connect-mcp';
-import { loginButton } from '../markdoc/tags/login-button';
-import { diagram } from '../markdoc/tags/diagram';
 export declare const tags: {
-    [admonition.tagName]: import("./tags/types").MarkdocTagSchema;
-    [debug.tagName]: import("./tags/types").MarkdocTagSchema;
-    [html.tagName]: import("./tags/types").MarkdocTagSchema;
-    [markdocExample.tagName]: import("./tags/types").MarkdocTagSchema;
-    [partial.tagName]: import("./tags/types").MarkdocTagSchema;
-    [tab.tagName]: import("./tags/types").MarkdocTagSchema;
-    [tabs.tagName]: import("./tags/types").MarkdocTagSchema;
-    [codeSnippet.tagName]: import("./tags/types").MarkdocTagSchema;
-    [inlineSvg.tagName]: import("./tags/types").MarkdocTagSchema;
-    [cards.tagName]: import("./tags/types").MarkdocTagSchema;
-    [card.tagName]: import("./tags/types").MarkdocTagSchema;
-    [img.tagName]: import("./tags/types").MarkdocTagSchema;
-    [codeWalkthrough.tagName]: import("./tags/types").MarkdocTagSchema;
-    [codeStep.tagName]: import("./tags/types").MarkdocTagSchema;
-    [toggle.tagName]: import("./tags/types").MarkdocTagSchema;
-    [input.tagName]: import("./tags/types").MarkdocTagSchema;
-    [codeGroup.tagName]: import("./tags/types").MarkdocTagSchema;
-    [icon.tagName]: import("./tags/types").MarkdocTagSchema;
-    [connectMcp.tagName]: import("./tags/types").MarkdocTagSchema;
-    [loginButton.tagName]: import("./tags/types").MarkdocTagSchema;
-    [diagram.tagName]: import("./tags/types").MarkdocTagSchema;
+    [x: string]: import("./tags/types").MarkdocTagSchema;
 };

package/lib/plugin.d.ts

@@ -1,4 +1,4 @@
-declare function _exports(): {
+declare const _default: () => {
     id: string;
 };
-export = _exports;
+export = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.66.0-next.2",
+  "version": "0.66.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -35,6 +35,7 @@
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
   "devDependencies": {
+    "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
@@ -47,14 +48,13 @@
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@types/styled-components": "5.1.34",
     "@vitest/coverage-v8": "4.0.10",
     "@vitest/ui": "4.0.10",
     "concurrently": "7.6.0",
     "react-router-dom": "^6.30.3",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
-    "styled-components": "5.3.11",
+    "styled-components": "^6.4.2",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
@@ -63,9 +63,10 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.12.0-next.2"
+    "@redocly/realm-asyncapi-sdk": "0.12.0-next.3"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.3.1",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "^12.8.2",
@@ -84,10 +85,10 @@
     "@redocly/config": "0.49.0"
   },
   "scripts": {
-    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
-    "ts:check": "tsc --noEmit --skipLibCheck",
+    "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsgo --noEmit --skipLibCheck",
     "clean": "rimraf lib",
-    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "compile": "tsgo -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "test": "nx run vitest:test",
     "build": "pnpm run clean && pnpm run compile"
   }

package/src/components/Catalog/CatalogFilter/CatalogFilterSelect.tsx

@@ -129,7 +129,7 @@ const StyledSelect = styled(Select)<SelectProps>`
   --select-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
-  :hover {
+  &:hover {
     border-color: var(--filter-select-border-color-hover);
   }
   --filter-option-margin: var(--filter-select-option-margin);

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -97,7 +97,7 @@ const ShadowWrapper = styled.div`
   position: relative;
   overflow: hidden;
 
-  :after {
+  &:after {
     position: absolute;
     content: '';
     width: 16px;

package/src/components/Feedback/Stars.tsx

@@ -45,9 +45,9 @@ const StarsWrapper = styled.div`
   align-items: center;
 `;
 
-const Star = styled.button.attrs(() => ({
+const Star = styled.button.attrs({
   type: 'button',
-}))`
+})`
   cursor: pointer;
   padding: 0;
   border: none;

package/src/components/Filter/FilterPopover.tsx

@@ -81,7 +81,7 @@ const FilterPopoverHeaderLabel = styled.div`
   font-weight: var(--filter-popover-header-label-font-weight);
 `;
 
-const FilterPopoverHeaderButton = styled.div.attrs({
+const FilterPopoverHeaderButton = styled.div.attrs<{ 'data-testid': string }>({
   'data-testid': 'FilterPopover/DoneButton',
 })`
   color: var(--filter-popover-header-button-color);

package/src/components/Filter/FilterSelect.tsx

@@ -79,7 +79,7 @@ const StyledSelect = styled(Select)<SelectProps>`
   --select-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
-  :hover {
+  &:hover {
     border-color: var(--filter-select-border-color-hover);
   }
   --filter-option-margin: var(--filter-select-option-margin);

package/src/components/Link/Link.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { useContext } from 'react';
 import { Link as ReactLink } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
 
 import type { JSX } from 'react';
+import type { RelativeRoutingType } from 'react-router-dom';
 
 import { ThemeDataContext } from '@redocly/theme/core/contexts/ThemeDataContext';
 
@@ -15,6 +17,12 @@ export type LinkProps = {
   innerRef?: React.Ref<HTMLAnchorElement>;
   languageInsensitive?: boolean;
   onClick?: () => void;
+  reloadDocument?: boolean;
+  replace?: boolean;
+  state?: unknown;
+  preventScrollReset?: boolean;
+  relative?: RelativeRoutingType;
+  viewTransition?: boolean;
   [key: string]: unknown;
   rel?: string;
 };
@@ -27,18 +35,34 @@ export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {
     return <LinkComponent {...props} />;
   } else {
     const {
-      active: _,
-      httpVerb: _1,
-      hasActiveSubItem: _2,
-      routeSlug: _3,
-      external: _4,
-      languageInsensitive: _5,
-      iconPosition: _6,
       innerRef,
-      ...filteredProps
+      to,
+      external: _external,
+      languageInsensitive: _languageInsensitive,
+      reloadDocument,
+      replace,
+      state,
+      preventScrollReset,
+      relative,
+      viewTransition,
+      ...restProps
     } = props;
+    const linkProps = Object.fromEntries(
+      Object.entries(restProps).filter(([key, value]) => value !== undefined && isPropValid(key)),
+    );
 
-    // We omit properties to avoid "Warning: Received value for a non-boolean attribute"
-    return <ReactLink ref={innerRef} {...filteredProps} />;
+    return (
+      <ReactLink
+        ref={innerRef}
+        to={to}
+        reloadDocument={reloadDocument}
+        replace={replace}
+        state={state}
+        preventScrollReset={preventScrollReset}
+        relative={relative}
+        viewTransition={viewTransition}
+        {...linkProps}
+      />
+    );
   }
 }

package/src/components/Markdown/Markdown.tsx

@@ -172,20 +172,19 @@ export const Markdown = styled.main.attrs<{
     summary {
       color: var(--text-color-secondary);
       font-weight: var(--font-weight-regular);
-      outline: 0;
       padding: 0;
       cursor: pointer;
     }
 
-    > :not(summary):first-of-type {
+    & > :not(summary):first-of-type {
       margin-top: 1.25em;
     }
 
-    > *:last-child {
+    & > *:last-child {
       margin-bottom: 1.25em;
     }
 
-    > :not(summary) {
+    & > :not(summary) {
       margin-left: 2em;
     }
   }

package/src/components/Markdown/styles/heading-anchor.ts

@@ -1,8 +1,8 @@
 import { css } from 'styled-components';
 
-import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { RuleSet } from 'styled-components';
 
-export function headingAnchorCss(className: string): FlattenSimpleInterpolation {
+export function headingAnchorCss(className: string): RuleSet<object> {
   return css`
     .${className}.before {
       position: absolute;
@@ -26,7 +26,7 @@ export function headingAnchorCss(className: string): FlattenSimpleInterpolation
       background-position: center;
     }
 
-    :hover .${className} svg,
+    &:hover .${className} svg,
     .${className}:focus svg {
       visibility: visible;
     }

package/src/components/PageNavigation/NextButton.tsx

@@ -26,7 +26,7 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
     navigation?.nextButton?.text || translate(translationKey, { defaultValue: 'Next page' });
 
   if (navigation?.nextButton?.hide || !link || !label) {
-    return <div>&nbsp;</div>;
+    return <div>{'\u00A0'}</div>;
   }
 
   return (

package/src/components/PageNavigation/PreviousButton.tsx

@@ -27,7 +27,7 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
     translate(translationKey, { defaultValue: 'Previous page' });
 
   if (navigation?.previousButton?.hide || !link || !label) {
-    return <div>&nbsp;</div>;
+    return <div>{'\u00A0'}</div>;
   }
 
   return (

package/src/components/Product/ProductPicker.tsx

@@ -48,11 +48,11 @@ export function ProductPicker(): JSX.Element | null {
   ) : null;
 }
 
-const ProductDropdown = styled(Dropdown).attrs(() => ({
+const ProductDropdown = styled(Dropdown).attrs({
   dataAttributes: {
     'data-component-name': 'Product/ProductPicker',
   },
-}))`
+})`
   display: none;
   @media screen and (min-width: ${breakpoints.medium}) {
     display: block;

package/src/components/Search/SearchDialog.tsx

@@ -33,6 +33,8 @@ import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon'
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
 import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+import { ResetIcon } from '@redocly/theme/icons/ResetIcon/ResetIcon';
+import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 
 export type SearchDialogProps = {
   onClose: () => void;
@@ -66,6 +68,8 @@ export function SearchDialog({
     advancedSearch,
     askAi,
     groupField,
+    searchError,
+    retrySearch,
   } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
@@ -440,6 +444,19 @@ export function SearchDialog({
                         <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
                         {translate('search.loading', 'Loading...')}
                       </SearchMessage>
+                    ) : searchError ? (
+                      <SearchMessage data-translation-key="search.error">
+                        <CloseFilledIcon size="21px" color="var(--color-error-base)" />
+                        {translate('search.error.title', 'Oops! Something went wrong.')}
+                        <Button
+                          variant="secondary"
+                          size="small"
+                          onClick={retrySearch}
+                          icon={<ResetIcon />}
+                        >
+                          {translate('search.error.button', 'Try again')}
+                        </Button>
+                      </SearchMessage>
                     ) : (
                       <SearchMessage data-translation-key="search.noResults">
                         <b>{translate('search.noResults.title', 'No results')}</b>