@redocly/theme 0.68.0-next.0 → 0.68.0-next.1

package/lib/components/Catalog/CatalogEntities.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntities = CatalogEntities;
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
 const ArrowDownIcon_1 = require("../../icons/ArrowDownIcon/ArrowDownIcon");
 const CatalogCardView_1 = require("../../components/Catalog/CatalogCardView/CatalogCardView");
 const CatalogTableView_1 = require("../../components/Catalog/CatalogTableView/CatalogTableView");
@@ -45,9 +46,6 @@ const CatalogEntitiesEmptyState_1 = require("../../components/Catalog/CatalogEnt
 const LOAD_MORE_THRESHOLD = 10;
 function CatalogEntities(props) {
     const { catalogConfig, excludedEntities, filterQuery, entitiesTypes, sortOption, searchQuery, viewMode, setEntitiesCounter, handleSortClick, isColumnSorted, } = props;
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
-        catalogConfig,
-    });
     const { useTelemetry, useFetchCatalogEntities } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { initialFilter } = (0, hooks_1.useCatalogEntities)({
@@ -65,14 +63,7 @@ function CatalogEntities(props) {
     const onRowClick = (entity) => {
         if (searchQuery) {
             telemetry.sendCatalogEntitiesListSearchResultClickedMessage([
-                {
-                    id: entity.id,
-                    object: 'catalog_entity',
-                    uri: getEntityDetailsLink(entity),
-                    query: searchQuery,
-                    entityKey: entity.key,
-                    entityType: entity.type,
-                },
+                Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesListSearchResultId', 'catalogEntitiesListSearchResult')), { query: searchQuery, entityId: entity.id, entityKey: entity.key, entityType: entity.type }),
             ]);
         }
     };

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

@@ -9,28 +9,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogActionsRow_1 = require("../../../../components/Catalog/CatalogActionsRow");
 const CatalogEntityRelationsTableContent_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent");
 const hooks_1 = require("../../../../core/hooks");
+const utils_1 = require("../../../../core/utils");
 const constants_1 = require("../../../../core/constants");
 function CatalogEntityRelationsTable({ entity, entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
-        catalogConfig,
-        entitiesCatalogConfig,
-    });
     const onRowClick = (relatedEntity) => {
         if (searchQuery) {
-            telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage([
-                {
-                    id: relatedEntity.id,
-                    object: 'catalog_entity',
-                    uri: getEntityDetailsLink(relatedEntity),
-                    query: searchQuery,
-                    entityKey: entity.key,
-                    entityType: entity.type,
-                    relationType: constants_1.reverseRelationMap[relatedEntity.relationType],
-                    relatedEntityKey: relatedEntity.key,
-                    relatedEntityType: relatedEntity.type,
-                },
+            telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickedMessage([
+                Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesRelatedEntitiesListSearchResultId', 'catalogEntitiesRelatedEntitiesListSearchResult')), { query: searchQuery, entityKey: entity.key, entityType: entity.type, relationType: constants_1.reverseRelationMap[relatedEntity.relationType], relatedEntityId: relatedEntity.id, relatedEntityKey: relatedEntity.key, relatedEntityType: relatedEntity.type }),
             ]);
         }
     };

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.d.ts

@@ -12,4 +12,4 @@ export type CatalogEntitySchemaProps = {
         typeName: string;
     }>;
 };
-export declare function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer }: CatalogEntitySchemaProps): React.JSX.Element;
+export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer }: CatalogEntitySchemaProps): React.JSX.Element;

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

@@ -42,9 +42,10 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Sampler = __importStar(require("openapi-sampler"));
 const hooks_1 = require("../../../core/hooks");
 const hooks_2 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const CopyButton_1 = require("../../../components/Buttons/CopyButton");
-function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
+function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     var _a, _b;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
@@ -52,18 +53,11 @@ function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema
     const { definition, parsedSchema, rawSchema } = (0, hooks_2.useCatalogEntitySchema)({ entity, relatedEntity });
     const isGraphql = ((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType) === 'graphql';
     const graphqlSDL = (_b = entity === null || entity === void 0 ? void 0 : entity.metadata) === null || _b === void 0 ? void 0 : _b.sdl;
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
-        catalogConfig,
-    });
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntitySchema" },
         react_1.default.createElement(HeaderWrapper, null,
             react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
             !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium", onCopyClick: () => telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
-                    {
-                        id: entity.id,
-                        object: 'catalog_entity',
-                        uri: getEntityDetailsLink(entity),
-                    },
+                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesCopyDataSchemaId', 'button')), { entityId: entity.id, entityKey: entity.key, entityType: entity.type }),
                 ]) }))),
         react_1.default.createElement(SplitViewWrapper, null,
             react_1.default.createElement(SchemaContentWrapper, null, isGraphql && graphqlSDL && GraphqlTypeRenderer ? (react_1.default.createElement(GraphqlTypeRenderer, { sdl: graphqlSDL, typeName: entity.title })) : (react_1.default.createElement(StoreProvider, { definition: definition },

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -104,13 +104,7 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                         filter.toggleOption(value);
                         telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                            {
-                                id: filter.property + '--' + value,
-                                object: 'checkbox',
-                                uri: window.location.href,
-                                category: filter.property,
-                                value: value,
-                            },
+                            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
                         ]);
                     } },
                     react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set

package/lib/components/Feedback/Feedback.js

@@ -47,6 +47,7 @@ const Comment_1 = require("../../components/Feedback/Comment");
 const Mood_1 = require("../../components/Feedback/Mood");
 const Scale_1 = require("../../components/Feedback/Scale");
 const constants_1 = require("../../core/constants");
+const utils_1 = require("../../core/utils");
 const feedbackComponents = {
     rating: Rating_1.Rating,
     sentiment: Sentiment_1.Sentiment,
@@ -74,7 +75,9 @@ function Feedback(props) {
         return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
             React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
                     submitFeedback({ type, values, path });
-                    telemetry.sendFeedbackMessage({ feedbackType: type });
+                    telemetry.sendFeedbackMessage([
+                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('feedbackFormId', 'feedbackForm')), { feedbackType: type }),
+                    ]);
                 } })));
     };
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());

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

@@ -46,8 +46,11 @@ function useActiveHeading(contentElement, displayedHeadings) {
         const allHeaders = allContent.querySelectorAll(`.${constants_1.HEADING_ANCHOR_CLASS}`);
         const headers = Array.from(allHeaders);
         if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {
-            const displayedIds = displayedHeadingsRef.current.map((h) => h === null || h === void 0 ? void 0 : h.id).filter(Boolean);
-            return headers.filter((header) => displayedIds.includes(header.id));
+            // Resolve targets by id so anchors that are not headings (e.g. numbered
+            // list items with a lifted headline) can be scrolled to and tracked.
+            return displayedHeadingsRef.current
+                .map((heading) => (heading === null || heading === void 0 ? void 0 : heading.id) ? allContent.querySelector(`[id="${heading.id}"]`) : null)
+                .filter((element) => element !== null);
         }
         return headers;
     };

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -6,7 +6,7 @@ export declare const useTelemetryFallback: () => {
     sendCatalogEntitiesCopyDataSchemaClickedMessage: () => void;
     sendCatalogEntitiesViewModeChangedMessage: () => void;
     sendCatalogEntitiesRelatedEntitiesListSearchQueryMessage: () => void;
-    sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage: () => void;
+    sendCatalogEntitiesRelatedEntitiesListSearchResultClickedMessage: () => void;
     sendCatalogEntitiesListSearchQueryMessage: () => void;
     sendCatalogEntitiesListSearchResultClickedMessage: () => void;
     sendRedirectMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -11,7 +11,7 @@ const useTelemetryFallback = () => ({
     sendCatalogEntitiesCopyDataSchemaClickedMessage: () => { },
     sendCatalogEntitiesViewModeChangedMessage: () => { },
     sendCatalogEntitiesRelatedEntitiesListSearchQueryMessage: () => { },
-    sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage: () => { },
+    sendCatalogEntitiesRelatedEntitiesListSearchResultClickedMessage: () => { },
     sendCatalogEntitiesListSearchQueryMessage: () => { },
     sendCatalogEntitiesListSearchResultClickedMessage: () => { },
     sendRedirectMessage: () => { },

package/lib/core/styles/dark.js

@@ -58,6 +58,16 @@ const badgesDarkMode = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+const numberedListDarkMode = (0, styled_components_1.css) `
+  /**
+    * @tokens Markdown Numbered List
+    */
+
+  --md-numbered-list-marker-bg-color: var(--color-warm-grey-3); // @presenter Color
+  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-4); // @presenter Color
+
+  // @tokens End
+`;
 exports.darkMode = (0, styled_components_1.css) `
   /* === Dark Theme Colors  === */
 
@@ -349,6 +359,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_14.bannerDarkMode}
   ${variables_dark_15.admonitionDarkMode}
   ${badgesDarkMode}
+  ${numberedListDarkMode}
   ${palette_dark_1.activeBrandPaletteDark}
   ${variables_dark_16.codeBlockDarkMode}
   /**

package/lib/core/styles/global.js

@@ -31,23 +31,24 @@ const variables_26 = require("../../components/Product/variables");
 const variables_27 = require("../../components/Markdown/variables");
 const variables_28 = require("../../components/Banner/variables");
 const variables_29 = require("../../markdoc/components/Tabs/variables");
-const variables_30 = require("../../markdoc/components/Diagram/variables");
-const variables_31 = require("../../components/LastUpdated/variables");
-const variables_32 = require("../../components/Logo/variables");
-const variables_33 = require("../../components/StatusCode/variables");
-const variables_34 = require("../../components/Segmented/variables");
-const variables_35 = require("../../components/UserMenu/variables");
-const variables_36 = require("../../components/Tags/variables");
-const variables_37 = require("../../components/VersionPicker/variables");
-const variables_38 = require("../../components/DatePicker/variables");
-const variables_39 = require("../../components/Switch/variables");
-const variables_40 = require("../../markdoc/components/Cards/variables");
-const variables_41 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_42 = require("../../components/SkipContent/variables");
-const variables_43 = require("../../components/PageActions/variables");
-const variables_44 = require("../../components/SvgViewer/variables");
-const variables_45 = require("../../components/Toast/variables");
-const variables_46 = require("../../components/PageNavigation/variables");
+const variables_30 = require("../../markdoc/components/NumberedList/variables");
+const variables_31 = require("../../markdoc/components/Diagram/variables");
+const variables_32 = require("../../components/LastUpdated/variables");
+const variables_33 = require("../../components/Logo/variables");
+const variables_34 = require("../../components/StatusCode/variables");
+const variables_35 = require("../../components/Segmented/variables");
+const variables_36 = require("../../components/UserMenu/variables");
+const variables_37 = require("../../components/Tags/variables");
+const variables_38 = require("../../components/VersionPicker/variables");
+const variables_39 = require("../../components/DatePicker/variables");
+const variables_40 = require("../../components/Switch/variables");
+const variables_41 = require("../../markdoc/components/Cards/variables");
+const variables_42 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_43 = require("../../components/SkipContent/variables");
+const variables_44 = require("../../components/PageActions/variables");
+const variables_45 = require("../../components/SvgViewer/variables");
+const variables_46 = require("../../components/Toast/variables");
+const variables_47 = require("../../components/PageNavigation/variables");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -1300,28 +1301,29 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_20.button}
     ${variables_21.aiAssistantButton}
     ${variables_21.connectMCPButton}
-    ${variables_40.cards}
+    ${variables_41.cards}
     ${variables_8.catalog}
     ${variables_11.catalogClassic}
     ${variables_25.code}
-    ${variables_41.codeWalkthrough}
+    ${variables_42.codeWalkthrough}
     ${docsDropdown}
     ${variables_15.dropdown}
     ${error}
     ${variables_10.filter}
     ${variables_19.footer}
     ${headingsTypography}
-    ${variables_36.httpTag}
+    ${variables_37.httpTag}
     ${variables_9.image}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_31.lastUpdated}
+    ${variables_32.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_32.logo}
+    ${variables_33.logo}
     ${variables_27.markdown}
     ${variables_29.markdownTabs}
-    ${variables_30.diagram}
+    ${variables_30.markdownNumberedList}
+    ${variables_31.diagram}
     ${variables_24.menu}
     ${variables_24.mobileMenu}
     ${modal}
@@ -1340,26 +1342,26 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_16.tooltip}
     ${typography}
-    ${variables_35.userMenu}
-    ${variables_37.versionPicker}
+    ${variables_36.userMenu}
+    ${variables_38.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_33.statusCode}
+    ${variables_34.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_34.segmented}
-    ${variables_39.switcher}
+    ${variables_35.segmented}
+    ${variables_40.switcher}
     ${variables_17.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_38.datePicker}
+    ${variables_39.datePicker}
     ${replay}
-    ${variables_42.skipContent}
-    ${variables_43.pageActions}
-    ${variables_44.svgViewer}
-    ${variables_45.toast}
-    ${variables_46.pageNavigation}
+    ${variables_43.skipContent}
+    ${variables_44.pageActions}
+    ${variables_45.svgViewer}
+    ${variables_46.toast}
+    ${variables_47.pageNavigation}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/lib/markdoc/components/NumberedList/NumberedItem.d.ts

@@ -0,0 +1,25 @@
+import type { JSX, PropsWithChildren, ReactNode } from 'react';
+export declare const NumberedListType: {
+    readonly ICON: 'icon';
+    readonly NUMBER: 'number';
+    readonly DOT: 'dot';
+};
+export type NumberedListType = (typeof NumberedListType)[keyof typeof NumberedListType];
+export declare const NumberedListSize: {
+    readonly SMALL: 'small';
+    readonly MEDIUM: 'medium';
+};
+export type NumberedListSize = (typeof NumberedListSize)[keyof typeof NumberedListSize];
+export type NumberedItemProps = PropsWithChildren<{
+    headline?: ReactNode;
+    anchorId?: string;
+    headlineLevel?: number;
+    icon?: string | ReactNode;
+    iconRawContent?: string;
+    className?: string;
+    type?: NumberedListType;
+    size?: NumberedListSize;
+    index?: number;
+    isLast?: boolean;
+}>;
+export declare function NumberedItem({ headline, anchorId, headlineLevel, icon, iconRawContent, className, type, size, index, isLast, children }: NumberedItemProps): JSX.Element;

package/lib/markdoc/components/NumberedList/NumberedItem.js

@@ -0,0 +1,217 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberedListSize = exports.NumberedListType = void 0;
+exports.NumberedItem = NumberedItem;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
+const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
+exports.NumberedListType = {
+    ICON: 'icon',
+    NUMBER: 'number',
+    DOT: 'dot',
+};
+exports.NumberedListSize = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+};
+function NumberedItem({ headline, anchorId, headlineLevel, icon, iconRawContent, className, type = exports.NumberedListType.NUMBER, size = exports.NumberedListSize.MEDIUM, index = 1, isLast = true, children, }) {
+    const isDot = type === exports.NumberedListType.DOT;
+    const headlineTextId = anchorId ? `${anchorId}-heading-text` : undefined;
+    const marker = (react_1.default.createElement(Marker, { $type: type, $size: size, "data-dot": isDot || undefined },
+        type === exports.NumberedListType.ICON && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" },
+            react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }))),
+        type === exports.NumberedListType.NUMBER && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" }, index)),
+        anchorId && (react_1.default.createElement(MarkerLink, { className: "numbered-item-marker-link", $isDot: isDot },
+            react_1.default.createElement(MarkerLinkIcon, { "aria-hidden": "true", focusable: "false", color: "--md-numbered-list-marker-text-color" })))));
+    return (react_1.default.createElement(NumberedItemWrapper, { "data-component-name": "Markdoc/NumberedList/NumberedItem", className: className, id: anchorId, $size: size, $isDot: isDot },
+        react_1.default.createElement(MarkerRail, null,
+            anchorId ? (react_1.default.createElement("a", Object.assign({ href: `#${anchorId}` }, (headline
+                ? { 'aria-labelledby': headlineTextId }
+                : { 'aria-label': 'Link to this item' })), marker)) : (marker),
+            react_1.default.createElement(Tail, { "data-testid": "numbered-item-tail", $isLast: isLast })),
+        react_1.default.createElement(NumberedItemContent, null,
+            headline &&
+                (0, react_1.createElement)(NumberedItemHeadline, { as: `h${headlineLevel !== null && headlineLevel !== void 0 ? headlineLevel : 3}`, id: headlineTextId }, headline),
+            react_1.default.createElement(NumberedItemBody, null, children))));
+}
+const markerSize = (0, styled_components_1.css) `
+  ${({ $size }) => $size === exports.NumberedListSize.SMALL
+    ? (0, styled_components_1.css) `
+          width: var(--md-numbered-list-marker-small-size);
+          height: var(--md-numbered-list-marker-small-size);
+          --icon-width: var(--md-numbered-list-icon-small-size);
+          --icon-height: var(--md-numbered-list-icon-small-size);
+        `
+    : (0, styled_components_1.css) `
+          width: var(--md-numbered-list-marker-medium-size);
+          height: var(--md-numbered-list-marker-medium-size);
+          --icon-width: var(--md-numbered-list-icon-medium-size);
+          --icon-height: var(--md-numbered-list-icon-medium-size);
+        `}
+`;
+const Marker = styled_components_1.default.span `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  color: var(--md-numbered-list-marker-text-color);
+  font-size: var(--md-numbered-list-marker-font-size);
+
+  ${({ $type }) => $type === exports.NumberedListType.DOT
+    ? (0, styled_components_1.css) `
+          width: var(--md-numbered-list-dot-size);
+          height: var(--md-numbered-list-dot-size);
+          background-color: var(--text-color-primary);
+        `
+    : (0, styled_components_1.css) `
+          ${markerSize}
+          background-color: var(--md-numbered-list-marker-bg-color);
+        `}
+`;
+const MarkerContent = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const MarkerLink = styled_components_1.default.span `
+  display: none;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: var(--icon-width, 16px);
+    height: var(--icon-height, 16px);
+  }
+
+  ${({ $isDot }) => $isDot &&
+    (0, styled_components_1.css) `
+      position: absolute;
+      inset-inline-end: calc(100% + var(--md-numbered-list-dot-link-gap));
+    `}
+`;
+const MarkerLinkIcon = (0, styled_components_1.default)(LinkIcon_1.LinkIcon) `
+  path:first-of-type {
+    fill: var(--md-numbered-list-marker-icon-bg-color);
+  }
+`;
+const MarkerRail = styled_components_1.default.span `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+
+  a {
+    display: flex;
+    border-radius: 50%;
+    /* Overrides the global markdown link rule a:not([role='button']), which is more specific. */
+    text-decoration: none !important;
+
+    &:hover,
+    &:focus {
+      text-decoration: none !important;
+    }
+  }
+`;
+const Tail = styled_components_1.default.span `
+  flex: 1 0 0;
+  min-height: var(--spacing-xs);
+  width: var(--md-numbered-list-tail-width);
+  background: ${({ $isLast }) => $isLast
+    ? 'var(--md-numbered-list-tail-fade-gradient)'
+    : 'var(--md-numbered-list-tail-bg-color)'};
+`;
+const NumberedItemHeadline = styled_components_1.default.h3 `
+  margin: 0;
+  color: var(--md-numbered-list-headline-text-color);
+  font-size: var(--md-numbered-list-headline-font-size);
+  font-weight: var(--md-numbered-list-headline-font-weight);
+  line-height: var(--md-numbered-list-headline-line-height);
+`;
+const NumberedItemBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-numbered-list-body-gap);
+  color: var(--md-numbered-list-body-text-color);
+  font-size: var(--md-numbered-list-body-font-size);
+
+  > p {
+    margin: 0;
+  }
+`;
+const NumberedItemContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+  flex: 1;
+  min-width: 0;
+  padding-bottom: var(--spacing-sm);
+`;
+const NumberedItemWrapper = styled_components_1.default.li `
+  display: flex;
+  gap: var(--md-numbered-list-gap);
+  align-items: stretch;
+
+  ${({ $isDot }) => $isDot &&
+    (0, styled_components_1.css) `
+      ${MarkerRail} {
+        padding-top: var(--md-numbered-list-dot-rail-padding-top);
+      }
+    `}
+
+  &:last-child ${NumberedItemContent} {
+    padding-bottom: 0;
+  }
+
+  &:hover,
+  &:focus-within {
+    ${Marker} {
+      background-color: ${({ $isDot }) => $isDot ? 'var(--text-color-primary)' : 'var(--md-numbered-list-marker-bg-color-hover)'};
+    }
+
+    a ${Marker}:not([data-dot]) .numbered-item-marker-content {
+      display: none;
+    }
+
+    a ${Marker} .numbered-item-marker-link {
+      display: flex;
+    }
+  }
+`;
+//# sourceMappingURL=NumberedItem.js.map

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

@@ -0,0 +1,5 @@
+import type { JSX, PropsWithChildren } from 'react';
+export type NumberedListProps = PropsWithChildren<{
+    className?: string;
+}>;
+export declare function NumberedList({ className, children }: NumberedListProps): JSX.Element | null;

package/lib/markdoc/components/NumberedList/NumberedList.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberedList = NumberedList;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function NumberedList({ className, children }) {
+    if (react_1.default.Children.count(children) === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(NumberedListWrapper, { "data-component-name": "Markdoc/NumberedList/NumberedList", className: className }, children));
+}
+const NumberedListWrapper = styled_components_1.default.ol `
+  display: flex;
+  flex-direction: column;
+  margin: var(--md-numbered-list-margin);
+  padding: 0;
+  list-style: none;
+
+  && {
+    & > li:not(:last-child) {
+      margin-bottom: 0;
+    }
+  }
+`;
+//# sourceMappingURL=NumberedList.js.map

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

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

package/lib/markdoc/components/NumberedList/variables.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownNumberedList = void 0;
+const styled_components_1 = require("styled-components");
+exports.markdownNumberedList = (0, styled_components_1.css) `
+  /**
+  *  @tokens Markdown Numbered List
+  */
+
+  --md-numbered-list-margin: var(--spacing-sm) 0; // @presenter Spacing
+  --md-numbered-list-gap: var(--spacing-base); // @presenter Spacing
+
+  --md-numbered-list-marker-bg-color: var(--color-warm-grey-2); // @presenter Color
+  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
+  --md-numbered-list-marker-icon-bg-color: transparent; // @presenter Color
+  --md-numbered-list-marker-text-color: var(--text-color-primary); // @presenter Color
+  --md-numbered-list-marker-font-size: var(--font-size-base); // @presenter FontSize
+
+  --md-numbered-list-marker-medium-size: 28px; // @presenter Spacing
+  --md-numbered-list-icon-medium-size: 16px; // @presenter Spacing
+  --md-numbered-list-tail-width: 1px; // @presenter Spacing
+  --md-numbered-list-marker-small-size: 24px; // @presenter Spacing
+  --md-numbered-list-icon-small-size: 12px; // @presenter Spacing
+  --md-numbered-list-dot-size: 10px; // @presenter Spacing
+  --md-numbered-list-dot-rail-padding-top: 7px; // @presenter Spacing
+  --md-numbered-list-dot-link-gap: 6px; // @presenter Spacing
+
+  --md-numbered-list-tail-bg-color: var(--md-numbered-list-marker-bg-color); // @presenter Color
+  --md-numbered-list-tail-fade-gradient: linear-gradient(to bottom, var(--md-numbered-list-tail-bg-color), transparent); // @presenter Color
+
+  --md-numbered-list-headline-text-color: var(--text-color-primary); // @presenter Color
+  --md-numbered-list-headline-font-size: var(--font-size-base); // @presenter FontSize
+  --md-numbered-list-headline-font-weight: var(--font-weight-medium); // @presenter FontWeight
+  --md-numbered-list-headline-line-height: var(--line-height-base); // @presenter LineHeight
+
+  --md-numbered-list-body-text-color: var(--text-color-secondary); // @presenter Color
+  --md-numbered-list-body-gap: var(--spacing-xs); // @presenter Spacing
+  --md-numbered-list-body-font-size: var(--font-size-base); // @presenter FontSize
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map