@redocly/theme 0.55.0-rc.1 → 0.55.0

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthroughSteps = useCodeWalkthroughSteps;
+exports.getGroupMarkers = getGroupMarkers;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../../../core/utils");
 const constants_1 = require("../../../core/constants");
-function useCodeWalkthroughSteps(steps, enableDeepLink) {
+function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }) {
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
@@ -15,56 +16,122 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
     // Track observed elements in case new observer needs to be created
     const observedElementsRef = (0, react_1.useRef)(new Set());
     const [activeStep, setActiveStep] = (0, react_1.useState)(enableDeepLink ? searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM) : null);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const _steps = (0, react_1.useMemo)(() => steps, [JSON.stringify(steps)]);
-    const register = (0, react_1.useCallback)((element) => {
-        // for some reason, the observer is not ready immediately
-        setTimeout(() => {
-            if (observerRef.current) {
-                const stepKey = Number(element.dataset.stepKey);
-                if (Number.isInteger(stepKey) && stepKey >= 0 && _steps[stepKey]) {
-                    _steps[stepKey].compRef = element;
-                }
-                observerRef.current.observe(element);
-                observedElementsRef.current.add(element);
+    const stepsMap = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        steps.forEach((step, index) => {
+            map.set(step.id, Object.assign(Object.assign({}, step), { index }));
+        });
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(steps)]);
+    const options = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!(0, utils_1.isBrowser)()) {
+            return null;
+        }
+        const filtersElementHeight = ((_a = filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+        const navbarHeight = ((_b = document.querySelector('nav')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height) || 0;
+        return {
+            filtersElementHeight,
+            navbarHeight,
+        };
+    }, []);
+    const [visibleSteps, setVisibleSteps] = (0, react_1.useState)([]);
+    const [markers, setMarkers] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d, _e;
+        if (!root.current || !visibleSteps.length || !options) {
+            return;
+        }
+        const markersMinTopOffset = options.filtersElementHeight + options.navbarHeight;
+        const rootHeight = (_b = (_a = root.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0;
+        const lastStepOffset = (_e = (_d = (_c = visibleSteps[visibleSteps.length - 1]) === null || _c === void 0 ? void 0 : _c.compRef) === null || _d === void 0 ? void 0 : _d.offsetTop) !== null && _e !== void 0 ? _e : 0;
+        const deficit = Math.max(lastStepOffset - (rootHeight - window.innerHeight), 0);
+        const groups = getGroups(visibleSteps);
+        let markers = groups.flatMap((group) => getGroupMarkers(group));
+        if (deficit) {
+            const startOffset = markersMinTopOffset;
+            const endOffset = Math.max(rootHeight - window.innerHeight, 0);
+            markers = distributeMarkers({
+                endOffset,
+                markers,
+                startOffset: markersMinTopOffset < endOffset ? startOffset : 0,
+            });
+        }
+        setMarkers(markers.reduce((acc, marker, index) => {
+            var _a;
+            const step = visibleSteps[index];
+            acc[step.id] = {
+                offset: marker,
+                height: markers[index + 1] || !step.compRef
+                    ? ((_a = markers[index + 1]) !== null && _a !== void 0 ? _a : rootHeight) - marker
+                    : step.compRef.clientHeight,
+            };
+            return acc;
+        }, {}));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visibleSteps, root.current, options]);
+    const registerMarker = (0, react_1.useCallback)((stepId, element) => {
+        if (observerRef.current) {
+            const step = stepsMap.get(stepId);
+            if (step) {
+                step.markerRef = element;
             }
-        }, 10);
-    }, [_steps]);
-    const unregister = (0, react_1.useCallback)((element) => {
+            observerRef.current.observe(element);
+            observedElementsRef.current.add(element);
+        }
+    }, [stepsMap]);
+    const removeMarker = (0, react_1.useCallback)((stepId, element) => {
         if (observerRef.current) {
-            const stepKey = Number(element.dataset.stepKey);
-            if (Number.isInteger(stepKey) && stepKey >= 0 && _steps[stepKey]) {
-                _steps[stepKey].compRef = undefined;
+            const step = stepsMap.get(stepId);
+            if (step) {
+                step.markerRef = undefined;
             }
             observerRef.current.unobserve(element);
             observedElementsRef.current.delete(element);
         }
-    }, [_steps]);
+    }, [stepsMap]);
+    const registerStep = (0, react_1.useCallback)((stepId, element) => {
+        const step = stepsMap.get(stepId);
+        if (!step) {
+            return;
+        }
+        step.compRef = element;
+        setVisibleSteps((prevSteps) => (0, utils_1.insertAt)(prevSteps, step.index, step));
+    }, [stepsMap]);
+    const removeStep = (0, react_1.useCallback)((stepId) => {
+        const step = stepsMap.get(stepId);
+        if (!step) {
+            return;
+        }
+        step.compRef = undefined;
+        setVisibleSteps((prevSteps) => (0, utils_1.removeElement)(prevSteps, step));
+        setActiveStep((prevStep) => (prevStep === stepId ? null : prevStep));
+    }, [stepsMap]);
     const observerCallback = (0, react_1.useCallback)((entries) => {
         var _a, _b, _c;
-        if (lockObserver.current) {
+        if (lockObserver.current || !visibleSteps.length) {
             return;
         }
-        const renderedSteps = _steps.filter((step) => Boolean(step.compRef));
-        if (renderedSteps.length < 2) {
-            setActiveStep(((_a = renderedSteps[0]) === null || _a === void 0 ? void 0 : _a.id) || null);
+        if (visibleSteps.length < 2) {
+            setActiveStep(((_a = visibleSteps[0]) === null || _a === void 0 ? void 0 : _a.id) || null);
             return;
         }
         for (const entry of entries) {
-            const stepKey = Number((_c = (_b = entry.target) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.stepKey);
-            if (!Number.isInteger(stepKey) || stepKey < 0) {
+            const stepId = (_c = (_b = entry.target) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.stepId;
+            if (!stepId) {
                 continue;
             }
             const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
-            const step = _steps[stepKey];
-            const stepIndex = renderedSteps.findIndex((renderedStep) => renderedStep.stepKey === step.stepKey);
-            const { next } = (0, utils_1.getAdjacentValues)(renderedSteps, stepIndex);
+            const step = stepsMap.get(stepId);
+            if (!step) {
+                continue;
+            }
+            const stepIndex = visibleSteps.findIndex((renderedStep) => renderedStep.id === stepId);
+            const { next } = (0, utils_1.getAdjacentValues)(visibleSteps, stepIndex);
             const intersectionAtTop = (rootBounds === null || rootBounds === void 0 ? void 0 : rootBounds.bottom) !== undefined && boundingClientRect.top < rootBounds.top;
             const stepGoesIn = isIntersecting;
-            if (intersectionRatio > 0.8 &&
-                intersectionRatio < 1 &&
-                intersectionAtTop &&
-                activeStep === null) {
+            if (intersectionRatio > 0.8 && intersectionRatio < 1 && intersectionAtTop) {
                 setActiveStep(step.id);
                 break;
             }
@@ -76,28 +143,37 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
                 else if (next) {
                     newStep = next.id;
                 }
-                if (newStep !== activeStep) {
-                    setActiveStep(newStep);
-                }
+                setActiveStep((prevStep) => newStep || prevStep);
                 break;
             }
         }
-    }, [_steps, activeStep]);
+    }, [stepsMap, visibleSteps]);
     (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        const filtersElementHeight = ((_a = filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
-        const navbarHeight = ((_b = document.querySelector('nav')) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
+        var _a;
+        if (!options) {
+            return;
+        }
         const newObserver = new IntersectionObserver(observerCallback, {
-            threshold: [0.8, 0.85, 0.9, 0.95],
-            rootMargin: `-${filtersElementHeight + navbarHeight}px 0px 0px 0px`,
+            threshold: [0.3, 0.8, 0.9, 0.95],
+            rootMargin: `-${options.filtersElementHeight + options.navbarHeight}px 0px 0px 0px`,
         });
-        for (const observedElement of observedElementsRef.current) {
+        for (const observedElement of observedElementsRef.current.values()) {
             newObserver.observe(observedElement);
         }
-        // Unobserve all from the old observer
-        (_c = observerRef.current) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
         observerRef.current = newObserver;
-    }, [observerCallback]);
+    }, [observerCallback, markers, options]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        if (!options) {
+            return;
+        }
+        const rootTopOffset = (_b = (_a = root.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0;
+        if (!activeStep && rootTopOffset <= options.navbarHeight) {
+            setActiveStep(((_c = visibleSteps[0]) === null || _c === void 0 ? void 0 : _c.id) || null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeStep, root.current, options, visibleSteps]);
     /**
      * Update the URL search params with the current state of the filters and inputs
      */
@@ -118,6 +194,125 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
         navigate({ search: newSearch }, { replace: true });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeStep]);
-    return { register, unregister, lockObserver, filtersElementRef, activeStep, setActiveStep };
+    return {
+        registerStep,
+        removeStep,
+        markers,
+        registerMarker,
+        removeMarker,
+        lockObserver,
+        filtersElementRef,
+        activeStep,
+        setActiveStep,
+    };
+}
+/**
+ * This function analyzes the offset and height of each step to determine
+ * when a new group should be created. A new group is started when there is a free space
+ * between the two steps, treating it as the content of the next group header.
+ *
+ * @param steps - An array of `CodeWalkthroughStep` objects
+ *
+ * @returns An array of `StepsGroup` objects, each containing the offset from the top of the relative
+ *          block, the free space at the top of the group, the total space used by the steps within the group
+ *          and the steps themselves with relative offset and height.
+ */
+function getGroups(steps) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    if (!steps.length) {
+        return [];
+    }
+    const firstStepOffset = (_c = (_b = (_a = steps[0]) === null || _a === void 0 ? void 0 : _a.compRef) === null || _b === void 0 ? void 0 : _b.offsetTop) !== null && _c !== void 0 ? _c : 0;
+    const firstStepHeight = (_f = (_e = (_d = steps[0]) === null || _d === void 0 ? void 0 : _d.compRef) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 0;
+    const secondStepOffset = (_j = (_h = (_g = steps[1]) === null || _g === void 0 ? void 0 : _g.compRef) === null || _h === void 0 ? void 0 : _h.offsetTop) !== null && _j !== void 0 ? _j : 0;
+    const margin = Math.max(secondStepOffset - firstStepOffset - firstStepHeight, 0);
+    let groupIndex = 0;
+    const groups = [
+        {
+            offset: 0,
+            freeSpace: firstStepOffset,
+            usedSpace: 0,
+            steps: [],
+        },
+    ];
+    for (let i = 0; i < steps.length; i++) {
+        let currentGroup = groups[groupIndex];
+        const step = steps[i];
+        const stepHeight = (_l = (_k = step.compRef) === null || _k === void 0 ? void 0 : _k.clientHeight) !== null && _l !== void 0 ? _l : 0;
+        const stepOffset = (_o = (_m = step.compRef) === null || _m === void 0 ? void 0 : _m.offsetTop) !== null && _o !== void 0 ? _o : 0;
+        const prevStepOffset = currentGroup.freeSpace + currentGroup.usedSpace;
+        if (prevStepOffset !== Math.max(stepOffset - currentGroup.offset, 0)) {
+            const offset = currentGroup.offset + currentGroup.freeSpace + currentGroup.usedSpace;
+            groupIndex++;
+            groups[groupIndex] = {
+                offset,
+                freeSpace: Math.max(stepOffset - offset, 0),
+                usedSpace: 0,
+                steps: [],
+            };
+            currentGroup = groups[groupIndex];
+        }
+        currentGroup.steps.push({
+            offset: stepOffset - currentGroup.offset,
+            height: stepHeight,
+            ref: step.compRef,
+        });
+        currentGroup.usedSpace += stepHeight + margin;
+    }
+    return groups;
+}
+function getGroupMarkers(group) {
+    if (!group.steps.length) {
+        return [];
+    }
+    if (group.steps.length === 1) {
+        return [group.offset + group.steps[0].offset - group.freeSpace];
+    }
+    const availableFreeSpace = group.freeSpace > 0.3 * window.innerHeight ? 0.3 * window.innerHeight : group.freeSpace;
+    const unusedFreeSpace = group.freeSpace - availableFreeSpace;
+    const lastStepOffset = group.steps[group.steps.length - 1].offset;
+    // distribute group free space between steps
+    return distributeMarkers({
+        startOffset: 0,
+        endOffset: lastStepOffset - unusedFreeSpace,
+        markers: group.steps.map((step) => step.offset),
+        additionalSteps: [(marker) => group.offset + unusedFreeSpace + marker],
+    });
+}
+/**
+ * Distribute markers preserving the relationship throughout the available space
+ * @param startOffset - the starting point of the available space
+ * @param endOffset - the end point of the available space
+ * @param markers - the markers to distribute
+ * @param additionalSteps - additional steps to apply to the markers
+ *
+ * @returns array of markers positions
+ */
+function distributeMarkers({ endOffset, markers, startOffset, additionalSteps = [], }) {
+    return markers.map((marker) => {
+        const normalizedOffset = getNormalizedNumber({
+            min: markers[0],
+            max: markers[markers.length - 1],
+            value: marker,
+        });
+        const availableSpace = endOffset - startOffset;
+        let result = startOffset + normalizedOffset * availableSpace;
+        for (const additionalStep of additionalSteps) {
+            result = additionalStep(result);
+        }
+        return result;
+    });
+}
+/**
+ * Normalize a number between a min and max value
+ * @param min - the minimum value of the distribution
+ * @param max - the maximum value of the distribution
+ * @param value - the value to normalize
+ *
+ * @returns normalized number between 0 and 1
+ */
+function getNormalizedNumber(options) {
+    const { min, max, value } = options;
+    return (value - min) / (max - min);
 }
 //# sourceMappingURL=use-code-walkthrough-steps.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough.d.ts

@@ -1,9 +1,16 @@
 import type { CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughAttr } from '@redocly/config';
-import { type WalkthroughControlsState, type WalkthroughStepsState } from '../../../core/hooks';
+import type { WalkthroughStepsState } from '../../../core/types';
+import { type WalkthroughControlsState } from '../../../core/hooks';
 export type WalkthroughState = {
     stepsState: WalkthroughStepsState;
     controlsState: WalkthroughControlsState;
     downloadAssociatedFiles: CodeWalkthroughFile[];
     files: CodeWalkthroughFile[];
 };
-export declare function useCodeWalkthrough(steps: CodeWalkthroughStepAttr[], attributes: Omit<CodeWalkthroughAttr, 'steps' | 'preview'>): WalkthroughState;
+type Params = {
+    steps: CodeWalkthroughStepAttr[];
+    attributes: Omit<CodeWalkthroughAttr, 'steps' | 'preview'>;
+    root: React.RefObject<HTMLDivElement | null>;
+};
+export declare function useCodeWalkthrough({ steps, attributes, root }: Params): WalkthroughState;
+export {};

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthrough = useCodeWalkthrough;
 const hooks_1 = require("../../../core/hooks");
-function useCodeWalkthrough(steps, attributes) {
+function useCodeWalkthrough({ steps, attributes, root }) {
     const { filters, filesets, inputs, toggles, __idx } = attributes;
     /*
       We only enable deep linking for the first CodeWalkthrough,
@@ -11,7 +11,7 @@ function useCodeWalkthrough(steps, attributes) {
       collisions/conflicts in the URL.
     */
     const enableDeepLink = __idx === 1;
-    const stepsState = (0, hooks_1.useCodeWalkthroughSteps)(steps, enableDeepLink);
+    const stepsState = (0, hooks_1.useCodeWalkthroughSteps)({ steps, enableDeepLink, root });
     const controlsState = (0, hooks_1.useCodeWalkthroughControls)(filters, inputs, toggles, enableDeepLink);
     const files = filesets
         .filter((fileset) => controlsState.areConditionsMet(fileset))

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

@@ -36,5 +36,7 @@ export * from '../../core/hooks/code-walkthrough/use-renderable-files';
 export * from '../../core/hooks/use-element-size';
 export * from '../../core/hooks/use-time-ago';
 export * from '../../core/hooks/use-input-key-commands';
-export * from '../../core/hooks/use-page-active-version';
+export * from '../../core/hooks/catalog/useCatalogEntities';
+export * from '../../core/hooks/use-active-page-version';
 export * from '../../core/hooks/use-page-versions';
+export * from '../../core/hooks/use-user-teams';

package/lib/core/hooks/index.js

@@ -52,6 +52,8 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"),
 __exportStar(require("../../core/hooks/use-element-size"), exports);
 __exportStar(require("../../core/hooks/use-time-ago"), exports);
 __exportStar(require("../../core/hooks/use-input-key-commands"), exports);
-__exportStar(require("../../core/hooks/use-page-active-version"), exports);
+__exportStar(require("../../core/hooks/catalog/useCatalogEntities"), exports);
+__exportStar(require("../../core/hooks/use-active-page-version"), exports);
 __exportStar(require("../../core/hooks/use-page-versions"), exports);
+__exportStar(require("../../core/hooks/use-user-teams"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-active-page-version.d.ts

@@ -0,0 +1 @@
+export declare function useActivePageVersion(): string | undefined;

package/lib/core/hooks/{use-page-active-version.js → use-active-page-version.js}

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePageActiveVersion = usePageActiveVersion;
+exports.useActivePageVersion = useActivePageVersion;
 const hooks_1 = require("../../core/hooks");
-function usePageActiveVersion() {
+function useActivePageVersion() {
     const { usePageVersions } = (0, hooks_1.useThemeHooks)();
     const { versions } = usePageVersions();
     const activeVersion = versions.find((version) => version.active);
     return activeVersion === null || activeVersion === void 0 ? void 0 : activeVersion.version;
 }
-//# sourceMappingURL=use-page-active-version.js.map
+//# sourceMappingURL=use-active-page-version.js.map

package/lib/core/hooks/use-user-teams.d.ts

@@ -0,0 +1 @@
+export declare function useUserTeams(): string[];

package/lib/core/hooks/use-user-teams.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUserTeams = useUserTeams;
+const hooks_1 = require("../../core/hooks");
+function useUserTeams() {
+    const { useUserTeams } = (0, hooks_1.useThemeHooks)();
+    const userTeams = useUserTeams();
+    return userTeams;
+}
+//# sourceMappingURL=use-user-teams.js.map

package/lib/core/styles/dark.js

@@ -12,6 +12,7 @@ const variables_dark_7 = require("../../components/Tag/variables.dark");
 const variables_dark_8 = require("../../components/StatusCode/variables.dark");
 const variables_dark_9 = require("../../components/Switch/variables.dark");
 const variables_dark_10 = require("../../markdoc/components/Cards/variables.dark");
+const variables_dark_11 = require("../../components/Catalog/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -314,6 +315,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${replayDarkMode}
   ${variables_dark_9.switcherDarkMode}
   ${variables_dark_10.cardsDarkMode}
+  ${variables_dark_11.catalogDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -10,35 +10,37 @@ const variables_4 = require("../../components/Sidebar/variables");
 const variables_5 = require("../../components/Breadcrumbs/variables");
 const variables_6 = require("../../components/Tag/variables");
 const variables_7 = require("../../components/TableOfContent/variables");
-const variables_8 = require("../../components/Filter/variables");
-const variables_9 = require("../../components/CatalogClassic/variables");
-const variables_10 = require("../../components/Panel/variables");
-const variables_11 = require("../../components/Select/variables");
-const variables_12 = require("../../components/Dropdown/variables");
-const variables_13 = require("../../components/Tooltip/variables");
-const variables_14 = require("../../icons/CheckboxIcon/variables");
-const variables_15 = require("../../components/Admonition/variables");
-const variables_16 = require("../../components/Footer/variables");
-const variables_17 = require("../../components/Button/variables");
-const variables_18 = require("../../components/Navbar/variables");
-const variables_19 = require("../../components/Search/variables");
-const variables_20 = require("../../components/Menu/variables");
-const variables_21 = require("../../components/CodeBlock/variables");
-const variables_22 = require("../../components/Product/variables");
-const variables_23 = require("../../components/Markdown/variables");
-const variables_24 = require("../../markdoc/components/Tabs/variables");
-const variables_25 = require("../../markdoc/components/Mermaid/variables");
-const variables_26 = require("../../components/LastUpdated/variables");
-const variables_27 = require("../../components/Logo/variables");
-const variables_28 = require("../../components/StatusCode/variables");
-const variables_29 = require("../../components/Segmented/variables");
-const variables_30 = require("../../components/UserMenu/variables");
-const variables_31 = require("../../components/Tags/variables");
-const variables_32 = require("../../components/VersionPicker/variables");
-const variables_33 = require("../../components/DatePicker/variables");
-const variables_34 = require("../../components/Switch/variables");
-const variables_35 = require("../../markdoc/components/Cards/variables");
-const variables_36 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_8 = require("../../components/Catalog/variables");
+const variables_9 = require("../../components/Filter/variables");
+const variables_10 = require("../../components/CatalogClassic/variables");
+const variables_11 = require("../../components/Panel/variables");
+const variables_12 = require("../../components/Select/variables");
+const variables_13 = require("../../components/Dropdown/variables");
+const variables_14 = require("../../components/Tooltip/variables");
+const variables_15 = require("../../icons/CheckboxIcon/variables");
+const variables_16 = require("../../components/Admonition/variables");
+const variables_17 = require("../../components/Footer/variables");
+const variables_18 = require("../../components/Button/variables");
+const variables_19 = require("../../components/Navbar/variables");
+const variables_20 = require("../../components/Search/variables");
+const variables_21 = require("../../components/Menu/variables");
+const variables_22 = require("../../components/CodeBlock/variables");
+const variables_23 = require("../../components/Product/variables");
+const variables_24 = require("../../components/Markdown/variables");
+const variables_25 = require("../../markdoc/components/Tabs/variables");
+const variables_26 = require("../../markdoc/components/Mermaid/variables");
+const variables_27 = require("../../components/LastUpdated/variables");
+const variables_28 = require("../../components/Logo/variables");
+const variables_29 = require("../../components/StatusCode/variables");
+const variables_30 = require("../../components/Segmented/variables");
+const variables_31 = require("../../components/UserMenu/variables");
+const variables_32 = require("../../components/Tags/variables");
+const variables_33 = require("../../components/VersionPicker/variables");
+const variables_34 = require("../../components/DatePicker/variables");
+const variables_35 = require("../../components/Switch/variables");
+const variables_36 = require("../../markdoc/components/Cards/variables");
+const variables_37 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_38 = require("../../components/SkipContent/variables");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
   /**
@@ -367,6 +369,7 @@ const typography = (0, styled_components_1.css) `
   --font-size-base: 14px; // Base font size of the entire system.
   --font-size-sm: 12px;
   --font-size-lg: 16px;
+  --font-size-md: 18px;
   --font-size-xl: 20px;
 
   /**
@@ -1181,65 +1184,67 @@ const replay = (0, styled_components_1.css) `
 `;
 exports.styles = (0, styled_components_1.css) `
   :root {
-    ${variables_15.admonition}
+    ${variables_16.admonition}
     ${apiReferenceDocs}
-    ${variables_10.apiReferencePanels}
+    ${variables_11.apiReferencePanels}
     ${badges}
     ${borders}
     ${variables_5.breadcrumbs}
-    ${variables_17.button}
-    ${variables_35.cards}
-    ${variables_9.catalogClassic}
-    ${variables_21.code}
-    ${variables_36.codeWalkthrough}
+    ${variables_18.button}
+    ${variables_36.cards}
+    ${variables_8.catalog}
+    ${variables_10.catalogClassic}
+    ${variables_22.code}
+    ${variables_37.codeWalkthrough}
     ${docsDropdown}
-    ${variables_12.dropdown}
+    ${variables_13.dropdown}
     ${error}
-    ${variables_8.filter}
-    ${variables_16.footer}
+    ${variables_9.filter}
+    ${variables_17.footer}
     ${headingsTypography}
-    ${variables_31.httpTag}
+    ${variables_32.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_26.lastUpdated}
+    ${variables_27.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_27.logo}
-    ${variables_23.markdown}
-    ${variables_24.markdownTabs}
-    ${variables_25.mermaid}
-    ${variables_20.menu}
-    ${variables_20.mobileMenu}
+    ${variables_28.logo}
+    ${variables_24.markdown}
+    ${variables_25.markdownTabs}
+    ${variables_26.mermaid}
+    ${variables_21.menu}
+    ${variables_21.mobileMenu}
     ${modal}
-    ${variables_18.navbar}
+    ${variables_19.navbar}
     ${pages}
-    ${variables_22.productPicker}
-    ${variables_10.responsePanelColors}
-    ${variables_19.search}
-    ${variables_11.select}
+    ${variables_23.productPicker}
+    ${variables_11.responsePanelColors}
+    ${variables_20.search}
+    ${variables_12.select}
     ${variables_4.sidebar}
     ${sizeAndSpace}
     ${variables_6.tag}
     ${themeColors}
     ${tile}
     ${variables_7.toc}
-    ${variables_13.tooltip}
+    ${variables_14.tooltip}
     ${typography}
-    ${variables_30.userMenu}
-    ${variables_32.versionPicker}
+    ${variables_31.userMenu}
+    ${variables_33.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_28.statusCode}
+    ${variables_29.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_29.segmented}
-    ${variables_34.switcher}
-    ${variables_14.checkbox}
+    ${variables_30.segmented}
+    ${variables_35.switcher}
+    ${variables_15.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_33.datePicker}
+    ${variables_34.datePicker}
     ${replay}
+    ${variables_38.skipContent}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);