@redocly/theme 0.40.0 → 0.40.2

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -9,14 +9,14 @@ const hooks_1 = require("../../core/hooks");
 const ColorModeIcon_1 = require("../../components/ColorModeSwitcher/ColorModeIcon");
 const Button_1 = require("../../components/Button/Button");
 function ColorModeSwitcher({ className }) {
-    const { isSwitcherHidden, setActiveColorMode, switchColorMode, activeColorMode } = (0, hooks_1.useColorSwitcher)();
+    const { isSwitcherHidden, initActiveColorMode, switchColorMode, activeColorMode } = (0, hooks_1.useColorSwitcher)();
     (0, hooks_1.useMount)(() => {
-        setActiveColorMode(document.documentElement.className);
+        initActiveColorMode();
     });
     if (isSwitcherHidden) {
         return null;
     }
-    return (react_1.default.createElement(Button_1.Button, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", "data-testid": "color-mode-switcher", onClick: () => setActiveColorMode(switchColorMode()), extraClass: className, variant: "secondary", size: "medium", icon: react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode }) }));
+    return (react_1.default.createElement(Button_1.Button, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", "data-testid": "color-mode-switcher", onClick: () => switchColorMode(), extraClass: className, variant: "secondary", size: "medium", icon: react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode }) }));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
 //# sourceMappingURL=ColorModeSwitcher.js.map

package/lib/components/Dropdown/Dropdown.js

@@ -59,7 +59,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), { tabIndex: 0 }), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
-        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleChildClick : undefined }, children))));
+        react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));
 }
 exports.Dropdown = Dropdown;
 const DropdownWrapper = styled_components_1.default.div `
@@ -84,6 +84,7 @@ const ChildrenWrapper = styled_components_1.default.div `
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
   z-index: var(--z-index-raised);
 `;

package/lib/components/Filter/FilterContent.d.ts

@@ -1,9 +1,9 @@
 import type { ResolvedFilter } from '../../core/types';
-import type { ThemeConfig } from '../../config';
+import type { RedoclyConfig } from '../../config';
 export type FilterContentProps = {
     setFilterTerm: (value: string) => void;
     filters: ResolvedFilter[];
     filterTerm: string;
-    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
 };
 export declare function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }: FilterContentProps): JSX.Element;

package/lib/components/Filter/FilterPopover.d.ts

@@ -1,9 +1,9 @@
 import type { ResolvedFilter } from '../../core/types';
-import type { ThemeConfig } from '../../config';
+import type { RedoclyConfig } from '../../config';
 export type FilterPopoverProps = {
     onClose: () => void;
     filters: ResolvedFilter[];
-    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
     filterTerm: string;
     setFilterTerm: (term: string) => void;
 };

package/lib/config.d.ts

@@ -1,2 +1,2 @@
-import type { ThemeConfig, ProductConfig, CatalogFilterConfig, CatalogConfig, AmplitudeAnalyticsConfig, GoogleAnalyticsConfig, SegmentAnalyticsConfig, RudderstackAnalyticsConfig, GtmAnalyticsConfig, ScorecardConfig, ProductGoogleAnalyticsConfig, ProductThemeOverrideConfig, ThemeUIConfig, ProductUiConfig } from '@redocly/config';
-export type { ThemeConfig, ProductConfig, CatalogFilterConfig, CatalogConfig, AmplitudeAnalyticsConfig, GoogleAnalyticsConfig, SegmentAnalyticsConfig, RudderstackAnalyticsConfig, GtmAnalyticsConfig, ScorecardConfig, ProductGoogleAnalyticsConfig, ProductThemeOverrideConfig, ThemeUIConfig, ProductUiConfig, };
+import type { ProductConfig, CatalogFilterConfig, CatalogConfig, AmplitudeAnalyticsConfig, GoogleAnalyticsConfig, SegmentAnalyticsConfig, RudderstackAnalyticsConfig, GtmAnalyticsConfig, ScorecardConfig, ProductGoogleAnalyticsConfig, ProductThemeOverrideConfig, ProductUiConfig, RedoclyConfig, UiAccessibleConfig, ThemeConfig, ThemeUIConfig } from '@redocly/config';
+export type { ProductConfig, CatalogFilterConfig, CatalogConfig, AmplitudeAnalyticsConfig, GoogleAnalyticsConfig, SegmentAnalyticsConfig, RudderstackAnalyticsConfig, GtmAnalyticsConfig, ScorecardConfig, ProductGoogleAnalyticsConfig, ProductThemeOverrideConfig, ProductUiConfig, RedoclyConfig, UiAccessibleConfig, ThemeConfig, ThemeUIConfig, };

package/lib/core/contexts/ThemeDataContext.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import type { ThemeHooks } from '../../core/types';
 import type { LinkProps } from '../../components/Link/Link';
-import type { ThemeUIConfig } from '../../config';
+import type { UiAccessibleConfig } from '../../config';
 export interface ThemeDataTransferObject {
     hooks: ThemeHooks;
     components: {
         LinkComponent: (props: React.PropsWithChildren<LinkProps>) => JSX.Element;
     };
-    themeConfig: ThemeUIConfig;
+    config: UiAccessibleConfig;
 }
 export declare const ThemeDataContext: import("react").Context<ThemeDataTransferObject | null>;

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

@@ -19,7 +19,7 @@ const useMobileMenuItems = (menuType) => {
     const { currentItems: sidebarItems, pushDrilldownState, popDrilldownState, backLink, } = useSidebarItems(activeVersion);
     const location = (0, react_router_dom_1.useLocation)();
     const currentProduct = useCurrentProduct();
-    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride) === null || _a === void 0 ? void 0 : _a.navbar;
     const productThemeConfig = (0, hooks_1.useThemeConfig)();
     const baseThemeConfig = (0, hooks_1.useThemeConfig)(false);
     const baseNavItems = (((_b = baseThemeConfig.navbar) === null || _b === void 0 ? void 0 : _b.items) || []);

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

@@ -15,7 +15,7 @@ const useMobileMenuLevels = () => {
     const currentProduct = useCurrentProduct();
     const productThemeConfig = (0, hooks_1.useThemeConfig)();
     const location = (0, react_router_dom_1.useLocation)();
-    const hasProductNavbarOverride = (_a = currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride) === null || _a === void 0 ? void 0 : _a.navbar;
+    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)(() => {
         const menuLevels = [

package/lib/core/hooks/search/use-suggested-pages.d.ts

@@ -3,4 +3,4 @@ export declare const useSuggestedPages: () => {
     label?: string | undefined;
     labelTranslationKey?: string | undefined;
     page: string;
-}[] & any[];
+}[];

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export declare const useColorSwitcher: () => {
     isSwitcherHidden: boolean | undefined;
-    setActiveColorMode: import("react").Dispatch<import("react").SetStateAction<string>>;
+    initActiveColorMode: () => void;
     switchColorMode: () => string;
     activeColorMode: string;
 };

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

@@ -11,6 +11,10 @@ const useColorSwitcher = () => {
     const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
     const defaultColor = modes[0] || 'light';
     const [activeColorMode, setActiveColorMode] = (0, react_1.useState)(defaultColor);
+    const initActiveColorMode = () => {
+        const activeMode = Array.from(document.documentElement.classList).find((c) => modes.includes(c));
+        setActiveColorMode(activeMode || defaultColor);
+    };
     const switchColorMode = () => {
         const activeIndex = modes.indexOf(activeColorMode);
         const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
@@ -20,11 +24,12 @@ const useColorSwitcher = () => {
             document.documentElement.classList.remove('notransition');
         });
         telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
+        setActiveColorMode(mode);
         return mode;
     };
     return {
         isSwitcherHidden: colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide,
-        setActiveColorMode,
+        initActiveColorMode,
         switchColorMode,
         activeColorMode,
     };

package/lib/core/hooks/use-theme-config.d.ts

@@ -1,2 +1,2 @@
-import type { ThemeUIConfig } from '../../config';
-export declare function useThemeConfig<T extends Record<string, unknown>>(useProductConfig?: boolean): T & NonNullable<ThemeUIConfig>;
+import type { UiAccessibleConfig } from '../../config';
+export declare function useThemeConfig<T extends Record<string, unknown>>(useProductConfig?: boolean): T & NonNullable<UiAccessibleConfig>;

package/lib/core/hooks/use-theme-config.js

@@ -3,20 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThemeConfig = void 0;
 const react_1 = require("react");
 const contexts_1 = require("../../core/contexts");
+// TODO: rename and additionally export as alias for backward compatibility
 function useThemeConfig(useProductConfig = true) {
     const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);
     if (!context) {
         return {};
     }
-    const { themeConfig, hooks } = context;
+    const { config, hooks } = context;
     const { useCurrentProduct } = hooks;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const currentProduct = useCurrentProduct();
-    const mergedTheme = useProductConfig && (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride)
-        ? Object.assign(Object.assign(Object.assign({}, themeConfig), currentProduct.themeOverride), { 
+    const mergedConfig = useProductConfig && (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.configOverride)
+        ? Object.assign(Object.assign(Object.assign({}, config), currentProduct.configOverride), { 
             // Do not override analytics config from product
-            analytics: themeConfig.analytics }) : themeConfig;
-    return mergedTheme;
+            analytics: config.analytics }) : config;
+    return mergedConfig;
 }
 exports.useThemeConfig = useThemeConfig;
 //# sourceMappingURL=use-theme-config.js.map

package/lib/core/templates/Markdown.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import type { ThemeUIConfig } from '../../config';
+import type { UiAccessibleConfig } from '../../config';
 import type { MdHeading } from '../../core/types';
 type MarkdownTemplateProps = {
     pageProps: {
-        frontmatter?: {
-            theme?: ThemeUIConfig;
-        };
+        frontmatter?: UiAccessibleConfig;
         headings?: (MdHeading | null)[];
         editPage?: {
             to: string;

package/lib/core/templates/Markdown.js

@@ -32,7 +32,7 @@ const TableOfContent_1 = require("../../components/TableOfContent/TableOfContent
 const Feedback_1 = require("../../components/Feedback/Feedback");
 const utils_1 = require("../../core/utils");
 function default_1({ pageProps, children }) {
-    var _a, _b;
+    var _a;
     const [wrapperElement, setWrapperElement] = React.useState(null);
     const { useSidebarSiblingsData } = (0, hooks_1.useThemeHooks)();
     const { markdown } = (0, hooks_1.useThemeConfig)();
@@ -48,7 +48,7 @@ function default_1({ pageProps, children }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [pageProps.headings]);
     const tableOfContent = (React.createElement(TableOfContent_1.TableOfContent, { headings: pageProps.headings, contentWrapper: wrapperElement }));
-    const { type, settings, hide } = ((_b = (_a = pageProps.frontmatter) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.feedback) || {};
+    const { type, settings, hide } = ((_a = pageProps.frontmatter) === null || _a === void 0 ? void 0 : _a.feedback) || {};
     const feedback = React.createElement(Feedback_1.Feedback, { type: type, hide: hide, settings: settings, path: pathname });
     const documentationLayoutProps = {
         tableOfContent,

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

@@ -1,9 +1,9 @@
 import type { ResolvedFilter } from '../../core/types';
-import type { ThemeConfig } from '../../config';
+import type { RedoclyConfig } from '@redocly/config';
 export type FilterProps = {
     filter: ResolvedFilter & {
         selectedOptions: any;
     };
-    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
 };
 export type FilterTypes = NonNullable<FilterProps['filter']['type']>;

package/lib/icons/CloseOutlineIcon/CloseOutlineIcon.d.ts

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

package/lib/icons/CloseOutlineIcon/CloseOutlineIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseOutlineIcon = 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: "14", height: "14", fill: "none" }, props),
+    react_1.default.createElement("g", null,
+        react_1.default.createElement("path", { d: "M7 0.875C3.5875 0.875 0.875 3.5875 0.875 7C0.875 10.4125 3.5875 13.125 7 13.125C10.4125 13.125 13.125 10.4125 13.125 7C13.125 3.5875 10.4125 0.875 7 0.875ZM7 12.25C4.1125 12.25 1.75 9.8875 1.75 7C1.75 4.1125 4.1125 1.75 7 1.75C9.8875 1.75 12.25 4.1125 12.25 7C12.25 9.8875 9.8875 12.25 7 12.25Z" }),
+        react_1.default.createElement("path", { d: "M9.3625 10.0625L7 7.7L4.6375 10.0625L3.9375 9.3625L6.3 7L3.9375 4.6375L4.6375 3.9375L7 6.3L9.3625 3.9375L10.0625 4.6375L7.7 7L10.0625 9.3625L9.3625 10.0625Z" }))));
+exports.CloseOutlineIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CloseOutlineIcon/CloseOutlineIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;
+//# sourceMappingURL=CloseOutlineIcon.js.map

package/lib/icons/DocumentAddIcon/DocumentAddIcon.d.ts

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

package/lib/icons/DocumentAddIcon/DocumentAddIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentAddIcon = 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({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M15 11.9999H13V9.99993H12V11.9999H10V12.9999H12V14.9999H13V12.9999H15V11.9999Z" }),
+    react_1.default.createElement("path", { d: "M8 13.9999H4V1.99993H8V4.99993C8.00077 5.26491 8.10637 5.51882 8.29374 5.70619C8.48111 5.89356 8.73502 5.99916 9 5.99993H12V7.99993H13V4.99993C13.0018 4.93421 12.9893 4.86889 12.9634 4.80847C12.9375 4.74804 12.8988 4.69395 12.85 4.64993L9.35 1.14993C9.30599 1.10109 9.2519 1.06239 9.19147 1.03649C9.13104 1.01059 9.06572 0.99812 9 0.999928H4C3.73502 1.00069 3.48111 1.1063 3.29374 1.29367C3.10637 1.48104 3.00077 1.73495 3 1.99993V13.9999C3.00077 14.2649 3.10637 14.5188 3.29374 14.7062C3.48111 14.8936 3.73502 14.9992 4 14.9999H8V13.9999ZM9 2.19993L11.8 4.99993H9V2.19993Z" })));
+exports.DocumentAddIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DocumentAddIcon/DocumentAddIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DocumentAddIcon.js.map

package/lib/icons/ExportIcon/ExportIcon.d.ts

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

package/lib/icons/ExportIcon/ExportIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExportIcon = 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({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M13 12V14H3V12H2V14L2.0038 13.9976C2.00333 14.1288 2.02873 14.2589 2.07854 14.3803C2.12836 14.5017 2.20163 14.6121 2.29414 14.7052C2.38666 14.7983 2.49662 14.8723 2.61774 14.9229C2.73885 14.9734 2.86875 14.9997 3 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V12H13Z" }),
+    react_1.default.createElement("path", { d: "M3 6L3.7055 6.7025L7.5 2.9125V12H8.5V2.9125L12.2955 6.7025L13 6L8 1L3 6Z" })));
+exports.ExportIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ExportIcon/ExportIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ExportIcon.js.map

package/lib/icons/FolderIcon/FolderIcon.d.ts

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

package/lib/icons/FolderIcon/FolderIcon.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.FolderIcon = 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", viewBox: "0 0 14 14", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M4.88688 2.625L6.38313 4.11688L6.63688 4.375H12.25V11.375H1.75V2.625H4.88688ZM4.88688 1.75H1.75C1.51794 1.75 1.29538 1.84219 1.13128 2.00628C0.967187 2.17038 0.875 2.39294 0.875 2.625V11.375C0.875 11.6071 0.967187 11.8296 1.13128 11.9937C1.29538 12.1578 1.51794 12.25 1.75 12.25H12.25C12.4821 12.25 12.7046 12.1578 12.8687 11.9937C13.0328 11.8296 13.125 11.6071 13.125 11.375V4.375C13.125 4.14294 13.0328 3.92038 12.8687 3.75628C12.7046 3.59219 12.4821 3.5 12.25 3.5H7L5.50813 2.00813C5.42672 1.92624 5.32992 1.86127 5.2233 1.81697C5.11667 1.77267 5.00234 1.74991 4.88688 1.75Z" })));
+exports.FolderIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/FolderIcon/FolderIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=FolderIcon.js.map

package/lib/index.d.ts

@@ -123,9 +123,11 @@ export * from './icons/CleanIcon/CleanIcon';
 export * from './icons/DeselectIcon/DeselectIcon';
 export * from './icons/FileStorageIcon/FileStorageIcon';
 export * from './icons/FolderAddIcon/FolderAddIcon';
+export * from './icons/FolderIcon/FolderIcon';
 export * from './icons/FolderMoveToIcon/FolderMoveToIcon';
 export * from './icons/SelectIcon/SelectIcon';
 export * from './icons/CloseIcon/CloseIcon';
+export * from './icons/CloseOutlineIcon/CloseOutlineIcon';
 export * from './icons/CloseFilledIcon/CloseFilledIcon';
 export * from './icons/LogoutIcon/LogoutIcon';
 export * from './icons/CheckboxIcon/CheckboxIcon';
@@ -136,6 +138,7 @@ export * from './icons/DataFormatIcon/DataFormatIcon';
 export * from './icons/Spinner/Spinner';
 export * from './icons/CheckmarkIcon/CheckmarkIcon';
 export * from './icons/DownloadIcon/DownloadIcon';
+export * from './icons/DocumentAddIcon/DocumentAddIcon';
 export * from './icons/EmailIcon/EmailIcon';
 export * from './icons/SaveIcon/SaveIcon';
 export * from './icons/CloudUploadIcon/CloudUploadIcon';
@@ -198,6 +201,7 @@ export * from './icons/SubtractIcon/SubtractIcon';
 export * from './icons/PlusCustomIcon/PlusCustomIcon';
 export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
+export * from './icons/ExportIcon/ExportIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -175,9 +175,11 @@ __exportStar(require("./icons/CleanIcon/CleanIcon"), exports);
 __exportStar(require("./icons/DeselectIcon/DeselectIcon"), exports);
 __exportStar(require("./icons/FileStorageIcon/FileStorageIcon"), exports);
 __exportStar(require("./icons/FolderAddIcon/FolderAddIcon"), exports);
+__exportStar(require("./icons/FolderIcon/FolderIcon"), exports);
 __exportStar(require("./icons/FolderMoveToIcon/FolderMoveToIcon"), exports);
 __exportStar(require("./icons/SelectIcon/SelectIcon"), exports);
 __exportStar(require("./icons/CloseIcon/CloseIcon"), exports);
+__exportStar(require("./icons/CloseOutlineIcon/CloseOutlineIcon"), exports);
 __exportStar(require("./icons/CloseFilledIcon/CloseFilledIcon"), exports);
 __exportStar(require("./icons/LogoutIcon/LogoutIcon"), exports);
 __exportStar(require("./icons/CheckboxIcon/CheckboxIcon"), exports);
@@ -188,6 +190,7 @@ __exportStar(require("./icons/DataFormatIcon/DataFormatIcon"), exports);
 __exportStar(require("./icons/Spinner/Spinner"), exports);
 __exportStar(require("./icons/CheckmarkIcon/CheckmarkIcon"), exports);
 __exportStar(require("./icons/DownloadIcon/DownloadIcon"), exports);
+__exportStar(require("./icons/DocumentAddIcon/DocumentAddIcon"), exports);
 __exportStar(require("./icons/EmailIcon/EmailIcon"), exports);
 __exportStar(require("./icons/SaveIcon/SaveIcon"), exports);
 __exportStar(require("./icons/CloudUploadIcon/CloudUploadIcon"), exports);
@@ -250,6 +253,7 @@ __exportStar(require("./icons/SubtractIcon/SubtractIcon"), exports);
 __exportStar(require("./icons/PlusCustomIcon/PlusCustomIcon"), exports);
 __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
+__exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/plugin.d.ts

@@ -0,0 +1,3 @@
+export default function plugin(): {
+    id: string;
+};

package/lib/plugin.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function plugin() {
+    return { id: 'default-theme' };
+}
+exports.default = plugin;
+//# sourceMappingURL=plugin.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.40.0",
+  "version": "0.40.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -13,6 +13,7 @@
   "exports": {
     "./package.json": "./package.json",
     "./config.js": "./lib/config.js",
+    "./plugin.js": "./lib/plugin.js",
     "./config": "./lib/config.js",
     ".": "./lib/index.js",
     "./src/": "./src/",
@@ -98,7 +99,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.9.0"
+    "@redocly/config": "0.10.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -9,11 +9,11 @@ export type ColorModeSwitcherProps = {
 };
 
 export function ColorModeSwitcher({ className }: ColorModeSwitcherProps): JSX.Element | null {
-  const { isSwitcherHidden, setActiveColorMode, switchColorMode, activeColorMode } =
+  const { isSwitcherHidden, initActiveColorMode, switchColorMode, activeColorMode } =
     useColorSwitcher();
 
   useMount(() => {
-    setActiveColorMode(document.documentElement.className);
+    initActiveColorMode();
   });
 
   if (isSwitcherHidden) {
@@ -24,7 +24,7 @@ export function ColorModeSwitcher({ className }: ColorModeSwitcherProps): JSX.El
     <Button
       data-component-name="ColorModeSwitcher/ColorModeSwitcher"
       data-testid="color-mode-switcher"
-      onClick={() => setActiveColorMode(switchColorMode())}
+      onClick={() => switchColorMode()}
       extraClass={className}
       variant="secondary"
       size="medium"

package/src/components/Dropdown/Dropdown.tsx

@@ -89,15 +89,14 @@ export function Dropdown({
     >
       {dropdownTrigger}
 
-      {isOpen && (
-        <ChildrenWrapper
-          placement={placement}
-          alignment={alignment}
-          onClick={closeOnClick ? handleChildClick : undefined}
-        >
-          {children}
-        </ChildrenWrapper>
-      )}
+      <ChildrenWrapper
+        placement={placement}
+        alignment={alignment}
+        isOpen={isOpen}
+        onClick={closeOnClick ? handleChildClick : undefined}
+      >
+        {children}
+      </ChildrenWrapper>
     </DropdownWrapper>
   );
 }
@@ -119,12 +118,13 @@ const DropdownWrapper = styled.div`
   text-decoration: none;
 `;
 
-const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string }>`
+const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isOpen?: boolean }>`
   position: absolute;
   top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
   z-index: var(--z-index-raised);
 `;

package/src/components/Filter/FilterContent.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedFilter } from '@redocly/theme/core/types';
-import type { ThemeConfig } from '@redocly/theme/config';
+import type { RedoclyConfig } from '@redocly/theme/config';
 
 import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -13,7 +13,7 @@ export type FilterContentProps = {
   setFilterTerm: (value: string) => void;
   filters: ResolvedFilter[];
   filterTerm: string;
-  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+  filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
 };
 
 export function FilterContent({

package/src/components/Filter/FilterPopover.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedFilter } from '@redocly/theme/core/types';
-import type { ThemeConfig } from '@redocly/theme/config';
+import type { RedoclyConfig } from '@redocly/theme/config';
 
 import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -11,7 +11,7 @@ import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 export type FilterPopoverProps = {
   onClose: () => void;
   filters: ResolvedFilter[];
-  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+  filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
   filterTerm: string;
   setFilterTerm: (term: string) => void;
 };

package/src/config.ts

@@ -1,5 +1,4 @@
 import type {
-  ThemeConfig,
   ProductConfig,
   CatalogFilterConfig,
   CatalogConfig,
@@ -11,12 +10,14 @@ import type {
   ScorecardConfig,
   ProductGoogleAnalyticsConfig,
   ProductThemeOverrideConfig,
-  ThemeUIConfig,
   ProductUiConfig,
+  RedoclyConfig,
+  UiAccessibleConfig,
+  ThemeConfig,
+  ThemeUIConfig,
 } from '@redocly/config';
 
 export type {
-  ThemeConfig,
   ProductConfig,
   CatalogFilterConfig,
   CatalogConfig,
@@ -28,6 +29,9 @@ export type {
   ScorecardConfig,
   ProductGoogleAnalyticsConfig,
   ProductThemeOverrideConfig,
-  ThemeUIConfig,
   ProductUiConfig,
+  RedoclyConfig,
+  UiAccessibleConfig,
+  ThemeConfig,
+  ThemeUIConfig,
 };

package/src/core/contexts/ThemeDataContext.tsx

@@ -2,14 +2,14 @@ import { createContext } from 'react';
 
 import type { ThemeHooks } from '@redocly/theme/core/types';
 import type { LinkProps } from '@redocly/theme/components/Link/Link';
-import type { ThemeUIConfig } from '@redocly/theme/config';
+import type { UiAccessibleConfig } from '@redocly/theme/config';
 
 export interface ThemeDataTransferObject {
   hooks: ThemeHooks;
   components: {
     LinkComponent: (props: React.PropsWithChildren<LinkProps>) => JSX.Element;
   };
-  themeConfig: ThemeUIConfig;
+  config: UiAccessibleConfig;
 }
 
 export const ThemeDataContext = createContext<ThemeDataTransferObject | null>(null);

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

@@ -31,7 +31,7 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
   const location = useLocation();
 
   const currentProduct = useCurrentProduct();
-  const hasProductNavbarOverride = currentProduct?.themeOverride?.navbar;
+  const hasProductNavbarOverride = currentProduct?.configOverride?.navbar;
 
   const productThemeConfig = useThemeConfig();
   const baseThemeConfig = useThemeConfig(false);

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

@@ -16,7 +16,7 @@ export const useMobileMenuLevels = () => {
   const productThemeConfig = useThemeConfig();
   const location = useLocation();
 
-  const hasProductNavbarOverride = currentProduct?.themeOverride?.navbar;
+  const hasProductNavbarOverride = currentProduct?.configOverride?.navbar;
   const productNavItems = (
     hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
   ) as ResolvedNavItem[];

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

@@ -11,6 +11,13 @@ export const useColorSwitcher = () => {
   const defaultColor = modes[0] || 'light';
   const [activeColorMode, setActiveColorMode] = useState(defaultColor);
 
+  const initActiveColorMode = (): void => {
+    const activeMode = Array.from(document.documentElement.classList).find((c) =>
+      modes.includes(c),
+    );
+    setActiveColorMode(activeMode || defaultColor);
+  };
+
   const switchColorMode = (): string => {
     const activeIndex = modes.indexOf(activeColorMode);
     const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
@@ -22,12 +29,13 @@ export const useColorSwitcher = () => {
     });
     telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
 
+    setActiveColorMode(mode);
     return mode;
   };
 
   return {
     isSwitcherHidden: colorMode?.hide,
-    setActiveColorMode,
+    initActiveColorMode,
     switchColorMode,
     activeColorMode,
   };

package/src/core/hooks/use-theme-config.ts

@@ -1,31 +1,32 @@
 import { useContext } from 'react';
 
-import type { ThemeUIConfig } from '@redocly/theme/config';
+import type { UiAccessibleConfig } from '@redocly/theme/config';
 
 import { ThemeDataContext } from '@redocly/theme/core/contexts';
 
+// TODO: rename and additionally export as alias for backward compatibility
 export function useThemeConfig<T extends Record<string, unknown>>(
   useProductConfig: boolean = true,
-): T & NonNullable<ThemeUIConfig> {
+): T & NonNullable<UiAccessibleConfig> {
   const context = useContext(ThemeDataContext);
 
   if (!context) {
     return {} as T;
   }
-  const { themeConfig, hooks } = context;
+  const { config, hooks } = context;
   const { useCurrentProduct } = hooks;
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const currentProduct = useCurrentProduct();
 
-  const mergedTheme =
-    useProductConfig && currentProduct?.themeOverride
+  const mergedConfig =
+    useProductConfig && currentProduct?.configOverride
       ? {
-          ...themeConfig,
-          ...currentProduct.themeOverride,
+          ...config,
+          ...currentProduct.configOverride,
           // Do not override analytics config from product
-          analytics: themeConfig.analytics,
+          analytics: config.analytics,
         }
-      : themeConfig;
+      : config;
 
-  return mergedTheme as T;
+  return mergedConfig as T;
 }

package/src/core/templates/Markdown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
-import type { ThemeUIConfig } from '@redocly/theme/config';
+import type { UiAccessibleConfig } from '@redocly/theme/config';
 import type { MdHeading, FeedbackProps } from '@redocly/theme/core/types';
 
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
@@ -13,7 +13,7 @@ import { IS_BROWSER, onDocumentReady, extendDetailsBehaviour } from '@redocly/th
 
 type MarkdownTemplateProps = {
   pageProps: {
-    frontmatter?: { theme?: ThemeUIConfig };
+    frontmatter?: UiAccessibleConfig;
     headings?: (MdHeading | null)[];
     editPage?: { to: string };
     lastModified?: string | null;
@@ -43,7 +43,7 @@ export default function ({ pageProps, children }: React.PropsWithChildren<Markdo
     <TableOfContent headings={pageProps.headings} contentWrapper={wrapperElement} />
   );
 
-  const { type, settings, hide } = (pageProps.frontmatter?.theme?.feedback as FeedbackProps) || {};
+  const { type, settings, hide } = (pageProps.frontmatter?.feedback as FeedbackProps) || {};
   const feedback = <Feedback type={type} hide={hide} settings={settings} path={pathname} />;
 
   const documentationLayoutProps = {

package/src/core/types/filter.ts

@@ -1,9 +1,9 @@
 import type { ResolvedFilter } from '@redocly/theme/core/types';
-import type { ThemeConfig } from '@redocly/theme/config';
+import type { RedoclyConfig } from '@redocly/config';
 
 export type FilterProps = {
   filter: ResolvedFilter & { selectedOptions: any };
-  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+  filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
 };
 
 export type FilterTypes = NonNullable<FilterProps['filter']['type']>;

package/src/icons/CloseOutlineIcon/CloseOutlineIcon.tsx

@@ -0,0 +1,26 @@
+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="14" height="14" fill="none" {...props}>
+    <g>
+      <path d="M7 0.875C3.5875 0.875 0.875 3.5875 0.875 7C0.875 10.4125 3.5875 13.125 7 13.125C10.4125 13.125 13.125 10.4125 13.125 7C13.125 3.5875 10.4125 0.875 7 0.875ZM7 12.25C4.1125 12.25 1.75 9.8875 1.75 7C1.75 4.1125 4.1125 1.75 7 1.75C9.8875 1.75 12.25 4.1125 12.25 7C12.25 9.8875 9.8875 12.25 7 12.25Z" />
+      <path d="M9.3625 10.0625L7 7.7L4.6375 10.0625L3.9375 9.3625L6.3 7L3.9375 4.6375L4.6375 3.9375L7 6.3L9.3625 3.9375L10.0625 4.6375L7.7 7L10.0625 9.3625L9.3625 10.0625Z" />
+    </g>
+  </svg>
+);
+
+export const CloseOutlineIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CloseOutlineIcon/CloseOutlineIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;

package/src/icons/DocumentAddIcon/DocumentAddIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15 11.9999H13V9.99993H12V11.9999H10V12.9999H12V14.9999H13V12.9999H15V11.9999Z" />
+    <path d="M8 13.9999H4V1.99993H8V4.99993C8.00077 5.26491 8.10637 5.51882 8.29374 5.70619C8.48111 5.89356 8.73502 5.99916 9 5.99993H12V7.99993H13V4.99993C13.0018 4.93421 12.9893 4.86889 12.9634 4.80847C12.9375 4.74804 12.8988 4.69395 12.85 4.64993L9.35 1.14993C9.30599 1.10109 9.2519 1.06239 9.19147 1.03649C9.13104 1.01059 9.06572 0.99812 9 0.999928H4C3.73502 1.00069 3.48111 1.1063 3.29374 1.29367C3.10637 1.48104 3.00077 1.73495 3 1.99993V13.9999C3.00077 14.2649 3.10637 14.5188 3.29374 14.7062C3.48111 14.8936 3.73502 14.9992 4 14.9999H8V13.9999ZM9 2.19993L11.8 4.99993H9V2.19993Z" />
+  </svg>
+);
+
+export const DocumentAddIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentAddIcon/DocumentAddIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ExportIcon/ExportIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13 12V14H3V12H2V14L2.0038 13.9976C2.00333 14.1288 2.02873 14.2589 2.07854 14.3803C2.12836 14.5017 2.20163 14.6121 2.29414 14.7052C2.38666 14.7983 2.49662 14.8723 2.61774 14.9229C2.73885 14.9734 2.86875 14.9997 3 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V12H13Z" />
+    <path d="M3 6L3.7055 6.7025L7.5 2.9125V12H8.5V2.9125L12.2955 6.7025L13 6L8 1L3 6Z" />
+  </svg>
+);
+
+export const ExportIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ExportIcon/ExportIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FolderIcon/FolderIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" {...props}>
+    <path d="M4.88688 2.625L6.38313 4.11688L6.63688 4.375H12.25V11.375H1.75V2.625H4.88688ZM4.88688 1.75H1.75C1.51794 1.75 1.29538 1.84219 1.13128 2.00628C0.967187 2.17038 0.875 2.39294 0.875 2.625V11.375C0.875 11.6071 0.967187 11.8296 1.13128 11.9937C1.29538 12.1578 1.51794 12.25 1.75 12.25H12.25C12.4821 12.25 12.7046 12.1578 12.8687 11.9937C13.0328 11.8296 13.125 11.6071 13.125 11.375V4.375C13.125 4.14294 13.0328 3.92038 12.8687 3.75628C12.7046 3.59219 12.4821 3.5 12.25 3.5H7L5.50813 2.00813C5.42672 1.92624 5.32992 1.86127 5.2233 1.81697C5.11667 1.77267 5.00234 1.74991 4.88688 1.75Z" />
+  </svg>
+);
+
+export const FolderIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FolderIcon/FolderIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -147,9 +147,11 @@ export * from '@redocly/theme/icons/CleanIcon/CleanIcon';
 export * from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 export * from '@redocly/theme/icons/FileStorageIcon/FileStorageIcon';
 export * from '@redocly/theme/icons/FolderAddIcon/FolderAddIcon';
+export * from '@redocly/theme/icons/FolderIcon/FolderIcon';
 export * from '@redocly/theme/icons/FolderMoveToIcon/FolderMoveToIcon';
 export * from '@redocly/theme/icons/SelectIcon/SelectIcon';
 export * from '@redocly/theme/icons/CloseIcon/CloseIcon';
+export * from '@redocly/theme/icons/CloseOutlineIcon/CloseOutlineIcon';
 export * from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 export * from '@redocly/theme/icons/LogoutIcon/LogoutIcon';
 export * from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
@@ -160,6 +162,7 @@ export * from '@redocly/theme/icons/DataFormatIcon/DataFormatIcon';
 export * from '@redocly/theme/icons/Spinner/Spinner';
 export * from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
 export * from '@redocly/theme/icons/DownloadIcon/DownloadIcon';
+export * from '@redocly/theme/icons/DocumentAddIcon/DocumentAddIcon';
 export * from '@redocly/theme/icons/EmailIcon/EmailIcon';
 export * from '@redocly/theme/icons/SaveIcon/SaveIcon';
 export * from '@redocly/theme/icons/CloudUploadIcon/CloudUploadIcon';
@@ -222,6 +225,7 @@ export * from '@redocly/theme/icons/SubtractIcon/SubtractIcon';
 export * from '@redocly/theme/icons/PlusCustomIcon/PlusCustomIcon';
 export * from '@redocly/theme/icons/CharacterIcon/CharacterIcon';
 export * from '@redocly/theme/icons/FileIcon/FileIcon';
+export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/tags/partial.ts

@@ -1,6 +1,6 @@
 import markdoc from '@markdoc/markdoc';
 
-import type { ThemeConfig } from '@redocly/theme';
+import type { RedoclyConfig } from '@redocly/theme/config';
 import type { Config } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 
@@ -14,7 +14,7 @@ export const partial: MarkdocSchemaWrapper = {
       ...markdoc.tags.partial.attributes,
       file: { type: RelativePath },
     },
-    validate(node, config: Config & { themeConfig: ThemeConfig['markdown'] }) {
+    validate(node, config: Config & { themeConfig: RedoclyConfig['markdown'] }) {
       const folders = (config.themeConfig?.partialsFolders || []).map(addTrailingSlash);
       if (!folders.length) {
         return [

package/src/plugin.ts

@@ -0,0 +1,3 @@
+export default function plugin() {
+  return { id: 'default-theme' };
+}