@redocly/theme 0.68.0-next.5 → 0.68.0-next.7

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntity = CatalogEntity;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const utils_1 = require("../../../core/utils");
 const CatalogPageDescription_1 = require("../../../components/Catalog/CatalogPageDescription");
 const CatalogEntityProperties_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties");
@@ -38,7 +38,7 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     const { useTranslate, useCatalog, usePageProps } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } = usePageProps();
-    const [searchParams] = (0, react_router_dom_1.useSearchParams)();
+    const [searchParams] = (0, react_router_1.useSearchParams)();
     const revision = searchParams.get('revision') || undefined;
     const version = searchParams.get('version') || undefined;
     const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
@@ -52,9 +52,9 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
                     { label: entity.title },
                 ] }),
             react_1.default.createElement(CatalogEntityPageWrapper, null,
-                react_1.default.createElement(react_router_dom_1.Routes, null,
-                    react_1.default.createElement(react_router_dom_1.Route, { path: `${catalogConfig.slug}/entities/${entity.key}` },
-                        react_1.default.createElement(react_router_dom_1.Route, { index: true, element: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_router_1.Routes, null,
+                    react_1.default.createElement(react_router_1.Route, { path: `${catalogConfig.slug}/entities/${entity.key}` },
+                        react_1.default.createElement(react_router_1.Route, { index: true, element: react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                                 react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
                                 renderDataSchemaSection({
@@ -69,7 +69,7 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
                                     renderFirstColumnEntitySection(entity),
                                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
                                 react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: relations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })) }),
-                        react_1.default.createElement(react_router_dom_1.Route, { path: "relations-graph", element: react_1.default.createElement(CatalogEntityRelationsGraph_lazy_1.CatalogEntityRelationsGraph, { entity: entity }) })))))));
+                        react_1.default.createElement(react_router_1.Route, { path: "relations-graph", element: react_1.default.createElement(CatalogEntityRelationsGraph_lazy_1.CatalogEntityRelationsGraph, { entity: entity }) })))))));
 }
 const CatalogPageWrapper = styled_components_1.default.div `
   max-width: var(--catalog-entity-max-width);

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityHistorySidebar = CatalogEntityHistorySidebar;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const CloseIcon_1 = require("../../../../icons/CloseIcon/CloseIcon");
 const hooks_1 = require("../../../../core/hooks");
 const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
@@ -49,7 +49,7 @@ const CatalogEntityVersionItem_1 = require("../../../../components/Catalog/Catal
 const RecentlyViewedIcon_1 = require("../../../../icons/RecentlyViewedIcon/RecentlyViewedIcon");
 function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const basePath = location.pathname;
     const { useTranslate, useFetchCatalogEntityRevisions, useL10nConfig } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();

package/lib/components/Catalog/CatalogSelector.js

@@ -40,7 +40,7 @@ exports.CatalogSelect = exports.CatalogSelectWrapper = void 0;
 exports.CatalogSelector = CatalogSelector;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const Accordion_1 = require("../../components/Accordion/Accordion");
 const Select_1 = require("../../components/Select/Select");
 const utils_1 = require("../../core/utils");
@@ -50,7 +50,7 @@ function CatalogSelector({ catalogSwitcherItems, onChange, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const navigate = (0, react_router_1.useNavigate)();
     const pathPrefix = (0, utils_1.getPathPrefix)();
     const options = catalogSwitcherItems.map((item) => ({
         value: item.slug,

package/lib/components/Feedback/ReportDialog.js

@@ -15,7 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportDialog = ReportDialog;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const hooks_1 = require("../../core/hooks");
 const Comment_1 = require("../../components/Feedback/Comment");
 const Portal_1 = require("../../components/Portal/Portal");
@@ -23,7 +23,7 @@ const utils_1 = require("../../core/utils");
 function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback, lang, }) {
     const { label } = settings;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { pathname } = (0, react_router_1.useLocation)();
     const telemetry = useTelemetry();
     return (react_1.default.createElement(Portal_1.Portal, null,
         react_1.default.createElement(ReportDialogWrapper, { className: "scroll-lock", "data-component-name": "Feedback/ReportDialog" },

package/lib/components/Link/Link.js

@@ -47,7 +47,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = Link;
 const React = __importStar(require("react"));
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const ThemeDataContext_1 = require("../../core/contexts/ThemeDataContext");
 function Link(props) {
     const context = (0, react_1.useContext)(ThemeDataContext_1.ThemeDataContext);
@@ -56,6 +56,6 @@ function Link(props) {
         return React.createElement(LinkComponent, Object.assign({}, props));
     }
     const { external: _1, languageInsensitive: _2, innerRef } = props, filteredProps = __rest(props, ["external", "languageInsensitive", "innerRef"]);
-    return React.createElement(react_router_dom_1.Link, Object.assign({ ref: innerRef }, filteredProps));
+    return React.createElement(react_router_1.Link, Object.assign({ ref: innerRef }, filteredProps));
 }
 //# sourceMappingURL=Link.js.map

package/lib/components/Markdown/styles/links.d.ts

@@ -1 +1,2 @@
+export declare const linkCss: import("styled-components").RuleSet<object>;
 export declare const markdownLinksCss: import("styled-components").RuleSet<object>;

package/lib/components/Markdown/styles/links.js

@@ -1,24 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdownLinksCss = void 0;
+exports.markdownLinksCss = exports.linkCss = void 0;
 const styled_components_1 = require("styled-components");
-exports.markdownLinksCss = (0, styled_components_1.css) `
-  a:not([role='button']) {
-    text-decoration: var(--link-decoration);
-    text-underline-offset: var(--link-underline-offset);
-    color: var(--link-color-primary);
-    font-weight: var(--link-font-weight);
+exports.linkCss = (0, styled_components_1.css) `
+  text-decoration: var(--link-decoration);
+  text-underline-offset: var(--link-underline-offset);
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
 
-    &:visited {
-      color: var(--link-color-visited);
-      text-decoration: var(--link-decoration-visited);
-    }
+  &:visited {
+    color: var(--link-color-visited);
+    text-decoration: var(--link-decoration-visited);
+  }
 
-    &:hover,
-    &:focus {
-      text-decoration: var(--link-decoration-hover);
-      color: var(--link-color-primary-hover);
-    }
+  &:hover,
+  &:focus {
+    text-decoration: var(--link-decoration-hover);
+    color: var(--link-color-primary-hover);
+  }
+`;
+exports.markdownLinksCss = (0, styled_components_1.css) `
+  a:not([role='button']) {
+    ${exports.linkCss}
   }
 `;
 //# sourceMappingURL=links.js.map

package/lib/components/Menu/MenuMobile.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuMobile = MenuMobile;
 const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
@@ -52,7 +52,7 @@ const UserMenuMobile_1 = require("../../components/UserMenu/UserMenuMobile");
 const Product_1 = require("../../components/Product/Product");
 function MenuMobile({ className, hideUserProfile }) {
     var _a, _b, _c;
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const { useCurrentProduct } = (0, hooks_1.useThemeHooks)();
     const product = useCurrentProduct();
     const menuLevels = (0, hooks_1.useMobileMenuLevels)();

package/lib/components/Navbar/NavbarItem.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarItem = NavbarItem;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const utils_1 = require("../../core/utils");
@@ -16,7 +16,7 @@ const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function NavbarItem({ navItem, className }) {
-    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { pathname } = (0, react_router_1.useLocation)();
     const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { defaultLocale, currentLocale, locales } = useL10nConfig();

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthroughControls = useCodeWalkthroughControls;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const download_code_walkthrough_1 = require("../../utils/download-code-walkthrough");
 const match_code_walkthrough_conditions_1 = require("../../utils/match-code-walkthrough-conditions");
 const get_code_walkthrough_file_text_1 = require("../../utils/get-code-walkthrough-file-text");
@@ -13,8 +13,8 @@ const defaultControlsValues = {
     filter: '',
 };
 function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
-    const location = (0, react_router_dom_1.useLocation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const location = (0, react_router_1.useLocation)();
+    const navigate = (0, react_router_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
     const filtersRef = (0, react_1.useRef)(filters);
     const inputsRef = (0, react_1.useRef)(inputs);

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthroughSteps = useCodeWalkthroughSteps;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const js_utils_1 = require("../../utils/js-utils");
 const code_walkthrough_1 = require("../../constants/code-walkthrough");
 function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }) {
-    const location = (0, react_router_dom_1.useLocation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const location = (0, react_router_1.useLocation)();
+    const navigate = (0, react_router_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
     const observerRef = (0, react_1.useRef)(null);
     const filtersElementRef = (0, react_1.useRef)(null);

package/lib/core/hooks/menu/use-mobile-menu-items.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenuItems = void 0;
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
 const common_1 = require("../../constants/common");
@@ -18,7 +18,7 @@ const useMobileMenuItems = (menuType) => {
     const { translate } = useTranslate();
     const activeVersion = versions.find((version) => version.active);
     const { currentItems: sidebarItems, pushDrilldownState, popDrilldownState, backLink, } = useSidebarItems(activeVersion);
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const currentProduct = useCurrentProduct();
     const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _a === void 0 ? void 0 : _a.navbar;
     const productThemeConfig = (0, use_theme_config_1.useThemeConfig)();

package/lib/core/hooks/menu/use-mobile-menu-levels.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenuLevels = void 0;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
 const common_1 = require("../../constants/common");
@@ -15,7 +15,7 @@ const useMobileMenuLevels = () => {
     const { translate } = useTranslate();
     const currentProduct = useCurrentProduct();
     const productThemeConfig = (0, use_theme_config_1.useThemeConfig)();
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _a === void 0 ? void 0 : _a.navbar;
     const productNavItems = (hasProductNavbarOverride ? ((_b = productThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || [] : []);
     const menuLevels = (0, react_1.useMemo)(() => {

package/lib/core/hooks/menu/use-nested-menu.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNestedMenu = useNestedMenu;
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const react_1 = require("react");
 const use_menu_item_expanded_1 = require("./use-menu-item-expanded");
 const use_collapse_1 = require("./use-collapse");
@@ -20,8 +20,8 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
     const [isExpanded, setIsExpanded] = (0, use_menu_item_expanded_1.useMenuItemExpanded)(item);
     // we need to know when the item is collapsed after transition to remove children from DOM
     const [canUnmount, setCanUnmount] = (0, react_1.useState)(!isExpanded);
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const location = (0, react_router_dom_1.useLocation)();
+    const navigate = (0, react_router_1.useNavigate)();
+    const location = (0, react_router_1.useLocation)();
     const { style } = (0, use_collapse_1.useCollapse)({
         isExpanded,
         collapseElRef: nestedMenuRef || { current: null },

package/lib/core/hooks/search/use-search-dialog.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSearchDialog = useSearchDialog;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
 const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
@@ -17,7 +17,7 @@ function useSearchDialog() {
     var _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, use_theme_config_1.useThemeConfig)();
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { refreshSearchSessionId } = (0, contexts_1.useSearchSession)();

package/lib/core/hooks/use-active-heading.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveHeading = useActiveHeading;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const utils_1 = require("../utils");
 const constants_1 = require("../constants");
 function useActiveHeading(contentElement, displayedHeadings) {
@@ -11,7 +11,7 @@ function useActiveHeading(contentElement, displayedHeadings) {
     const headingElementsRef = (0, react_1.useRef)({});
     const displayedHeadingsRef = (0, react_1.useRef)(displayedHeadings);
     const lockObserver = (0, react_1.useRef)(false);
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     (0, react_1.useEffect)(() => {
         setHeading(undefined);
         headingElementsRef.current = {};

package/lib/core/hooks/use-active-section-id.d.ts

@@ -1,4 +1,4 @@
-import type { Location } from 'react-router-dom';
+import type { Location } from 'react-router';
 export type UseActiveSectionIdReturnType = string;
 /** Px below the top where the active section is read (accounts for next-section visibility). */
 export declare const SECTION_READING_LINE_OFFSET = 150;

package/lib/core/hooks/use-language-picker.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLanguagePicker = useLanguagePicker;
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const use_theme_hooks_1 = require("./use-theme-hooks");
 const urls_1 = require("../utils/urls");
 function useLanguagePicker() {
     const { useL10nConfig, useLoadAndNavigate } = (0, use_theme_hooks_1.useThemeHooks)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const navigate = (0, react_router_1.useNavigate)();
     const loadAndNavigate = useLoadAndNavigate();
     const { currentLocale, locales, defaultLocale } = useL10nConfig();
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const locale = locales.find((l) => l.code === currentLocale);
     function getLocaleUrl(value) {
         let newLangPathname = (0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, value, locales);

package/lib/core/hooks/use-mobile-menu.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenu = useMobileMenu;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const use_modal_scroll_lock_1 = require("./use-modal-scroll-lock");
 function useMobileMenu(initialState = false) {
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
     (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname, location.hash]);
     (0, use_modal_scroll_lock_1.useModalScrollLock)(isOpen);

package/lib/core/hooks/use-navbar-height.d.ts

@@ -1,3 +1,3 @@
-import type { Location } from 'react-router-dom';
+import type { Location } from 'react-router';
 export type UseNavbarHeightReturnType = number;
 export declare function useNavbarHeight(location: Location): UseNavbarHeightReturnType;

package/lib/core/hooks/use-product-picker.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProductPicker = useProductPicker;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const utils_1 = require("../../components/Product/utils");
 const use_theme_hooks_1 = require("./use-theme-hooks");
 const utils_2 = require("../utils");
@@ -11,7 +11,7 @@ function useProductPicker() {
     const currentProduct = useCurrentProduct();
     const products = useProducts();
     const telemetry = useTelemetry();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const navigate = (0, react_router_1.useNavigate)();
     const loadAndNavigate = useLoadAndNavigate();
     // An open dropdown can fire a menu item's onAction from an earlier render, so `product.link`
     // may be stale (e.g. after a locale switch); resolve the live product via a ref.

package/lib/core/hooks/use-tabs.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveTab = void 0;
 exports.useTabs = useTabs;
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const MORE_BUTTON_WIDTH = 80;
 const TABS_GAP = 8;
 function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }) {
@@ -215,8 +215,8 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }) {
     };
 }
 const useActiveTab = ({ initialTab, tabsId }) => {
-    const location = (0, react_router_dom_1.useLocation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const location = (0, react_router_1.useLocation)();
+    const navigate = (0, react_router_1.useNavigate)();
     const [activeTab, setActiveTab] = (0, react_1.useState)(undefined);
     const resolvedActiveTab = activeTab !== null && activeTab !== void 0 ? activeTab : initialTab;
     const prevActiveTabRef = (0, react_1.useRef)(resolvedActiveTab);

package/lib/core/templates/Markdown.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const React = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const DocumentationLayout_1 = require("../../layouts/DocumentationLayout");
 const Markdown_1 = require("../../components/Markdown/Markdown");
 const TableOfContent_1 = require("../../components/TableOfContent/TableOfContent");
@@ -50,7 +50,7 @@ function default_1({ pageProps, children }) {
     const { useSidebarSiblingsData } = (0, use_theme_hooks_1.useThemeHooks)();
     const { markdown } = (0, use_theme_config_1.useThemeConfig)();
     const { nextPage, prevPage } = useSidebarSiblingsData() || {};
-    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { pathname } = (0, react_router_1.useLocation)();
     const wrapperRefCb = React.useCallback((node) => {
         if (!node) {
             return;

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

@@ -3,7 +3,7 @@ import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
 import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
-import type { To, Location, NavigateFunction } from 'react-router-dom';
+import type { To, Location, NavigateFunction } from 'react-router';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
 import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults } from './catalog';

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

@@ -1,4 +1,4 @@
-import type { RelativeRoutingType } from 'react-router-dom';
+import type { RelativeRoutingType } from 'react-router';
 export type LinkProps = {
     to: string;
     target?: '_self' | '_blank';

package/lib/core/utils/load-and-navigate.d.ts

@@ -1,4 +1,4 @@
-import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
+import type { NavigateFunction, NavigateOptions } from 'react-router';
 export type HistoryOrigin = 'pm' | 'browser';
 export declare function loadAndNavigate({ navigate, to, origin, options, }: {
     navigate: NavigateFunction;

package/lib/core/utils/menu.d.ts

@@ -1,5 +1,5 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
-import type { Location } from 'react-router-dom';
+import type { Location } from 'react-router';
 import { type Locale, type TFunction } from '../types/l10n';
 import { type ItemState } from '../types/sidebar';
 import { MenuItemType } from '../constants/common';

package/lib/layouts/OIDCForbidden.js

@@ -39,12 +39,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OIDCForbidden = OIDCForbidden;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const hooks_1 = require("../core/hooks");
 function OIDCForbidden() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
+    const [searchParams, setSearchParams] = (0, react_router_1.useSearchParams)();
     const [errorDescription, setErrorDescription] = (0, react_1.useState)('');
     // use whatever you want here
     const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;

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

@@ -40,11 +40,11 @@ exports.StepWrapper = void 0;
 exports.CodeStep = CodeStep;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const Marker_1 = require("../../../components/Marker/Marker");
 const contexts_1 = require("../../../core/contexts");
 function CodeStep({ id, heading, when, unless, children, }) {
-    const location = (0, react_router_dom_1.useLocation)();
+    const location = (0, react_router_1.useLocation)();
     const compRef = (0, react_1.useRef)(null);
     const markerRef = (0, react_1.useRef)(null);
     const { areConditionsMet } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);

package/lib/markdoc/components/Heading/Heading.js

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = Heading;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const Image_1 = require("../../../markdoc/components/Image/Image");
 const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
@@ -68,7 +68,7 @@ function renderWithSpanWrapper(children) {
 }
 function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }) {
     var _a, _b;
-    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { pathname } = (0, react_router_1.useLocation)();
     const { usePageProps } = (0, hooks_1.useThemeHooks)();
     const pageProps = usePageProps();
     const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';

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

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
+const react_router_1 = require("react-router");
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabItemFragment_1 = require("../../../markdoc/components/Tabs/TabItemFragment");
@@ -51,7 +51,7 @@ var TabsSize;
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
 function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }) {
-    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    const inRouter = (0, react_router_1.useInRouterContext)();
     const childrenArray = react_1.default.Children.toArray(children).filter(isTabItemFragment);
     const containerRef = (0, react_1.useRef)(null);
     if (childrenArray.length === 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.68.0-next.5",
+  "version": "0.68.0-next.7",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -17,8 +17,13 @@
     "./config": "./lib/config.js",
     ".": "./lib/index.js",
     "./src/": "./src/",
+    "./core": "./lib/core/index.js",
     "./core/*": "./lib/core/*/index.js",
     "./core/templates/*": "./lib/core/templates/*.js",
+    "./core/contexts/*": "./lib/core/contexts/*.js",
+    "./core/hooks/*": "./lib/core/hooks/*.js",
+    "./core/hoc/*": "./lib/core/hoc/*.js",
+    "./core/constants/*": "./lib/core/constants/*.js",
     "./ext/*": "./lib/ext/*.js",
     "./components/*": "./lib/components/*.js",
     "./layouts/*": "./lib/layouts/*.js",
@@ -29,9 +34,9 @@
     "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.18.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router": "^8.3.0",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
   "devDependencies": {
@@ -51,7 +56,7 @@
     "@vitest/coverage-v8": "4.1.10",
     "@vitest/ui": "4.1.10",
     "concurrently": "7.6.0",
-    "react-router-dom": "^7.18.1",
+    "react-router": "^8.3.0",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "^6.4.2",
@@ -63,7 +68,7 @@
     "vitest": "4.1.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.14.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.14.0-next.3"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Route, Routes, useSearchParams } from 'react-router-dom';
+import { Route, Routes, useSearchParams } from 'react-router';
 
 import type { CatalogEntityConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';

package/src/components/Catalog/CatalogSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useState, JSX } from 'react';
 import styled from 'styled-components';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
 import { Select } from '@redocly/theme/components/Select/Select';

package/src/components/Feedback/ReportDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { JSX } from 'react';
 import type { SubmitFeedbackParams } from '@redocly/theme/core/types';

package/src/components/Link/Link.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext } from 'react';
-import { Link as ReactLink } from 'react-router-dom';
+import { Link as ReactLink } from 'react-router';
 
 import type { JSX } from 'react';
 import type { LinkProps } from '@redocly/theme/core/types';

package/src/components/Markdown/styles/links.ts

@@ -1,21 +1,25 @@
 import { css } from 'styled-components';
 
-export const markdownLinksCss = css`
-  a:not([role='button']) {
-    text-decoration: var(--link-decoration);
-    text-underline-offset: var(--link-underline-offset);
-    color: var(--link-color-primary);
-    font-weight: var(--link-font-weight);
+export const linkCss = css`
+  text-decoration: var(--link-decoration);
+  text-underline-offset: var(--link-underline-offset);
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+
+  &:visited {
+    color: var(--link-color-visited);
+    text-decoration: var(--link-decoration-visited);
+  }
 
-    &:visited {
-      color: var(--link-color-visited);
-      text-decoration: var(--link-decoration-visited);
-    }
+  &:hover,
+  &:focus {
+    text-decoration: var(--link-decoration-hover);
+    color: var(--link-color-primary-hover);
+  }
+`;
 
-    &:hover,
-    &:focus {
-      text-decoration: var(--link-decoration-hover);
-      color: var(--link-color-primary-hover);
-    }
+export const markdownLinksCss = css`
+  a:not([role='button']) {
+    ${linkCss}
   }
 `;

package/src/components/Menu/MenuMobile.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';

package/src/components/Navbar/NavbarItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { JSX } from 'react';
 import type { ResolvedNavItem, ResolvedNavLinkItem, ResolvedNavGroupItem } from '@redocly/config';

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 import type {
   CodeWalkthroughFile,

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 import type { CodeWalkthroughStepAttr } from '@redocly/config';
 import type { ActiveStep, WalkthroughStepsState } from '../../types/code-walkthrough';

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { ResolvedNavItem } from '@redocly/config';
 

package/src/core/hooks/menu/use-mobile-menu-levels.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { ResolvedNavItem } from '@redocly/config';
 

package/src/core/hooks/menu/use-nested-menu.ts

@@ -1,4 +1,4 @@
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router';
 import { useCallback, useEffect, useState } from 'react';
 
 import type { MenuItemProps } from '../../types/sidebar';

package/src/core/hooks/search/use-search-dialog.ts

@@ -1,5 +1,5 @@
 import { useEffect, useCallback, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import hotkeys from 'hotkeys-js';
 
 import { useThemeHooks } from '../use-theme-hooks';

package/src/core/hooks/use-active-heading.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { enhancedSmoothstep } from '../utils';
 import { HEADING_ANCHOR_CLASS } from '../constants';

package/src/core/hooks/use-active-section-id.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 
-import type { Location } from 'react-router-dom';
+import type { Location } from 'react-router';
 
 import { useNavbarHeight } from './use-navbar-height';
 import { IS_BROWSER } from '../utils/dom';

package/src/core/hooks/use-language-picker.ts

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 import type { L10nConfig } from '../types/hooks';
 

package/src/core/hooks/use-mobile-menu.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { useModalScrollLock } from './use-modal-scroll-lock';
 

package/src/core/hooks/use-navbar-height.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import type { Location } from 'react-router-dom';
+import type { Location } from 'react-router';
 
 import { getNavbarElement } from '../utils/get-navbar-element';
 

package/src/core/hooks/use-product-picker.ts

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { getProductClassName } from '@redocly/theme/components/Product/utils';
 

package/src/core/hooks/use-tabs.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 type UseTabsProps = {
   activeTab: string;

package/src/core/templates/Markdown.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { UiAccessibleConfig } from '../../config';
 import type { FeedbackProps } from '../types/feedback';

package/src/core/types/hooks.ts

@@ -3,7 +3,7 @@ import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
 import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
-import type { To, Location, NavigateFunction } from 'react-router-dom';
+import type { To, Location, NavigateFunction } from 'react-router';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { CatalogConfig, ProductUiConfig } from '@redocly/theme/config';
 import type {

package/src/core/types/link.ts

@@ -1,4 +1,4 @@
-import type { RelativeRoutingType } from 'react-router-dom';
+import type { RelativeRoutingType } from 'react-router';
 
 export type LinkProps = {
   to: string;

package/src/core/utils/load-and-navigate.ts

@@ -1,4 +1,4 @@
-import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
+import type { NavigateFunction, NavigateOptions } from 'react-router';
 
 import { getNavbarElement } from './get-navbar-element';
 import { withLoadProgress } from './with-load-progress';

package/src/core/utils/menu.ts

@@ -1,5 +1,5 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
-import type { Location } from 'react-router-dom';
+import type { Location } from 'react-router';
 
 import { type Locale, type TFunction } from '../types/l10n';
 import { type ItemState } from '../types/sidebar';

package/src/layouts/OIDCForbidden.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import type { JSX } from 'react';
 

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -8,7 +8,7 @@ import React, {
   useCallback,
 } from 'react';
 import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { WithConditions } from '@redocly/config';
 

package/src/markdoc/components/Heading/Heading.tsx

@@ -1,6 +1,6 @@
 import React, { createElement, isValidElement } from 'react';
 import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import type { JSX, PropsWithChildren, ReactElement, ReactNode } from 'react';
 

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React, { isValidElement, useEffect, useRef, useState } from 'react';
-import { useInRouterContext } from 'react-router-dom';
+import { useInRouterContext } from 'react-router';
 import styled from 'styled-components';
 
 import type { JSX, ReactElement, ReactNode } from 'react';