@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.1

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

@@ -0,0 +1,9 @@
+export * from '../../markdoc/components/Admonition/Admonition';
+export * from '../../markdoc/components/InlineSvg/InlineSvg';
+export * from '../../markdoc/components/MarkdocExample/MarkdocExample';
+export * from '../../markdoc/components/Heading/Heading';
+export * from '../../markdoc/components/Mermaid/Mermaid';
+export * from '../../markdoc/components/HtmlBlock/HtmlBlock';
+export * from '../../markdoc/components/Tabs/Tab';
+export * from '../../markdoc/components/Tabs/Tabs';
+export * from '../../markdoc/components/CodeBlock/CodeBlock';

package/lib/markdoc/components/default.js

@@ -0,0 +1,26 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../markdoc/components/Admonition/Admonition"), exports);
+__exportStar(require("../../markdoc/components/InlineSvg/InlineSvg"), exports);
+__exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"), exports);
+__exportStar(require("../../markdoc/components/Heading/Heading"), exports);
+__exportStar(require("../../markdoc/components/Mermaid/Mermaid"), exports);
+__exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
+__exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
+__exportStar(require("../../markdoc/components/Tabs/Tabs"), exports);
+__exportStar(require("../../markdoc/components/CodeBlock/CodeBlock"), exports);
+//# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -0,0 +1,9 @@
+export * from '../markdoc/attributes/code-snippet-file';
+export * from '../markdoc/attributes/img-src';
+export * from '../markdoc/attributes/img-srcset';
+export * from '../markdoc/attributes/relative-path';
+export * from '../markdoc/attributes/svg-content';
+export * as components from '../markdoc/components/default';
+export declare const tags: {
+    [x: string]: import("@markdoc/markdoc").Schema;
+};

package/lib/markdoc/default.js

@@ -0,0 +1,59 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tags = exports.components = void 0;
+/* Attributes */
+__exportStar(require("../markdoc/attributes/code-snippet-file"), exports);
+__exportStar(require("../markdoc/attributes/img-src"), exports);
+__exportStar(require("../markdoc/attributes/img-srcset"), exports);
+__exportStar(require("../markdoc/attributes/relative-path"), exports);
+__exportStar(require("../markdoc/attributes/svg-content"), exports);
+/* Components */
+exports.components = __importStar(require("../markdoc/components/default"));
+/* Tags */
+const admonition_1 = require("../markdoc/tags/admonition");
+const html_1 = require("../markdoc/tags/html");
+const markdoc_example_1 = require("../markdoc/tags/markdoc-example");
+const partial_1 = require("../markdoc/tags/partial");
+const tab_1 = require("../markdoc/tags/tab");
+const tabs_1 = require("../markdoc/tags/tabs");
+const debug_1 = require("../markdoc/tags/debug");
+const code_snippet_1 = require("../markdoc/tags/code-snippet");
+const inline_svg_1 = require("../markdoc/tags/inline-svg");
+exports.tags = {
+    [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
+    [debug_1.debug.tagName]: debug_1.debug.schema,
+    [html_1.html.tagName]: html_1.html.schema,
+    [markdoc_example_1.markdocExample.tagName]: markdoc_example_1.markdocExample.schema,
+    [partial_1.partial.tagName]: partial_1.partial.schema,
+    [tab_1.tab.tagName]: tab_1.tab.schema,
+    [tabs_1.tabs.tagName]: tabs_1.tabs.schema,
+    [code_snippet_1.codeSnippet.tagName]: code_snippet_1.codeSnippet.schema,
+    [inline_svg_1.inlineSvg.tagName]: inline_svg_1.inlineSvg.schema,
+};
+//# sourceMappingURL=default.js.map

package/lib/markdoc/tags/admonition.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const admonition: MarkdocSchemaWrapper;

package/lib/markdoc/tags/admonition.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.admonition = void 0;
+exports.admonition = {
+    schema: {
+        attributes: {
+            type: { type: String, required: true, default: 'info' },
+            name: { type: String },
+        },
+        render: 'Admonition',
+    },
+    tagName: 'admonition',
+};
+//# sourceMappingURL=admonition.js.map

package/lib/markdoc/tags/code-snippet.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const codeSnippet: MarkdocSchemaWrapper;

package/lib/markdoc/tags/code-snippet.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeSnippet = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const code_snippet_file_1 = require("../../markdoc/attributes/code-snippet-file");
+exports.codeSnippet = {
+    schema: {
+        attributes: {
+            file: { type: code_snippet_file_1.CodeSnippetFile, render: false, required: true },
+            language: { type: String, render: true },
+            title: { type: String, render: true },
+            to: { type: [String, Number], render: false },
+            from: { type: [String, Number], render: false },
+            after: { type: [String, Number], render: false },
+            before: { type: [String, Number], render: false },
+            prefix: { type: String, render: false },
+            wrap: { type: Boolean, render: false },
+            rawContent: { type: String, render: false }, // internal
+        },
+        render: 'CodeBlock',
+        selfClosing: true,
+        transform: (node, config) => {
+            const attributes = node.transformAttributes(config);
+            const rawContent = node.attributes.rawContent;
+            const header = {
+                title: node.attributes.title,
+                controls: { copy: {} },
+            };
+            if (typeof rawContent === 'string') {
+                return new markdoc_1.default.Tag('CodeBlock', Object.assign(Object.assign({}, attributes), { header, lang: attributes.language, source: rawContent, wrapContents: node.attributes.wrap }), []);
+            }
+            else {
+                return new markdoc_1.default.Tag(node.tag, attributes, []);
+            }
+        },
+        validate(node) {
+            const errors = [];
+            if (node.attributes.from && node.attributes.after) {
+                errors.push({
+                    id: 'from-and-after-attributes-are-mutually-exclusive',
+                    level: 'error',
+                    message: 'attributes "from" and "after" are mutually exclusive',
+                });
+            }
+            if (node.attributes.to && node.attributes.before) {
+                errors.push({
+                    id: 'to-and-before-attributes-are-mutually-exclusive',
+                    level: 'error',
+                    message: 'attributes "to" and "before" are mutually exclusive',
+                });
+            }
+            return errors;
+        },
+    },
+    tagName: 'code-snippet',
+};
+//# sourceMappingURL=code-snippet.js.map

package/lib/markdoc/tags/debug.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const debug: MarkdocSchemaWrapper;

package/lib/markdoc/tags/debug.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debug = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+exports.debug = {
+    schema: {
+        attributes: {
+            value: {},
+        },
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            return new markdoc_1.default.Tag('pre', {}, [JSON.stringify(attributes.value, null, 2)]);
+        },
+    },
+    tagName: 'debug',
+};
+//# sourceMappingURL=debug.js.map

package/lib/markdoc/tags/html.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const html: MarkdocSchemaWrapper;

package/lib/markdoc/tags/html.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.html = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const mapHtmlTags = {
+    script: 'HtmlScript',
+};
+exports.html = {
+    schema: {
+        attributes: {
+            name: { type: String, required: true },
+            attrs: { type: Object },
+        },
+        transform(node, config) {
+            const { name, attrs } = node.attributes;
+            const children = node.transformChildren(config);
+            return new markdoc_1.default.Tag(mapHtmlTags[name] || name, attrs, children);
+        },
+    },
+    tagName: 'html',
+};
+//# sourceMappingURL=html.js.map

package/lib/markdoc/tags/inline-svg.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const inlineSvg: MarkdocSchemaWrapper;

package/lib/markdoc/tags/inline-svg.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineSvg = void 0;
+const svg_content_1 = require("../../markdoc/attributes/svg-content");
+exports.inlineSvg = {
+    schema: {
+        attributes: {
+            file: { type: svg_content_1.SvgContent, required: true },
+            fileRawContent: { type: String, render: true }, // inserted by RawContent
+        },
+        render: 'InlineSvg',
+        selfClosing: true,
+    },
+    tagName: 'inline-svg',
+};
+//# sourceMappingURL=inline-svg.js.map

package/lib/markdoc/tags/markdoc-example.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const markdocExample: MarkdocSchemaWrapper;

package/lib/markdoc/tags/markdoc-example.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdocExample = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+// This custom tag prevents evaluating any children markdoc tags (no children) so we can
+// have markdoc examples in code fences
+// approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
+exports.markdocExample = {
+    schema: {
+        attributes: {
+            renderDemo: { type: Boolean, default: false },
+            withLabels: { type: Boolean, required: false },
+            codeLabel: { type: String, required: false },
+            resultLabel: { type: String, required: false },
+        },
+        children: ['fence'],
+        transform(node, config) {
+            var _a;
+            const attributes = node.transformAttributes(config);
+            const { content } = ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.attributes) || {};
+            if (!content)
+                return null;
+            const language = 'markdoc';
+            return new markdoc_1.default.Tag('MarkdocExample', Object.assign(Object.assign({}, attributes), { language, demoContent: node.children[0].transformChildren(config), rawContent: content }), []);
+        },
+    },
+    tagName: 'markdoc-example',
+};
+//# sourceMappingURL=markdoc-example.js.map

package/lib/markdoc/tags/partial.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const partial: MarkdocSchemaWrapper;

package/lib/markdoc/tags/partial.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.partial = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const utils_1 = require("../../core/utils");
+const relative_path_1 = require("../../markdoc/attributes/relative-path");
+exports.partial = {
+    schema: Object.assign(Object.assign({}, markdoc_1.default.tags.partial), { attributes: Object.assign(Object.assign({}, markdoc_1.default.tags.partial.attributes), { file: { type: relative_path_1.RelativePath } }), validate(node, config) {
+            var _a, _b;
+            const folders = (((_a = config.themeConfig) === null || _a === void 0 ? void 0 : _a.partialsFolders) || []).map(utils_1.addTrailingSlash);
+            if (!folders.length) {
+                return [
+                    {
+                        id: '',
+                        message: `Could not resolve partial ${node.attributes.file}. theme.markdown.partialsFolders is empty.`,
+                        level: 'error',
+                    },
+                ];
+            }
+            if (!((_b = config.partials) === null || _b === void 0 ? void 0 : _b[node.attributes.file])) {
+                return [
+                    {
+                        id: '',
+                        message: `Could not resolve partial ${node.attributes.file}. Starting with 0.73.0 version all partials should be placed in partials folders: \n\n  - ${folders.join('\n  - ')}`,
+                        level: 'error',
+                    },
+                ];
+            }
+            return [];
+        } }),
+    tagName: 'partial',
+};
+//# sourceMappingURL=partial.js.map

package/lib/markdoc/tags/tab.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const tab: MarkdocSchemaWrapper;

package/lib/markdoc/tags/tab.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tab = void 0;
+exports.tab = {
+    schema: {
+        attributes: {
+            label: { type: String, required: true },
+        },
+        render: 'div',
+    },
+    tagName: 'tab',
+};
+//# sourceMappingURL=tab.js.map

package/lib/markdoc/tags/tabs.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const tabs: MarkdocSchemaWrapper;

package/lib/markdoc/tags/tabs.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabs = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const utils_1 = require("../../core/utils");
+exports.tabs = {
+    schema: {
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            const children = node.transformChildren(config);
+            const tabsContent = children.map((child) => {
+                if ((0, utils_1.isTag)(child) && (child === null || child === void 0 ? void 0 : child.name) === 'CodeBlock') {
+                    const key = child.attributes['data-language'] || 'default';
+                    const label = child.attributes['data-label'] || key;
+                    return new markdoc_1.default.Tag('div', { label, key }, [child]);
+                }
+                return child;
+            });
+            return new markdoc_1.default.Tag('Tabs', attributes, tabsContent);
+        },
+    },
+    tagName: 'tabs',
+};
+//# sourceMappingURL=tabs.js.map

package/lib/markdoc/tags/types.d.ts

@@ -0,0 +1,5 @@
+import type { Schema } from '@markdoc/markdoc';
+export type MarkdocSchemaWrapper = {
+    schema: Schema;
+    tagName: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.74.2-pingfed.3",
+  "version": "0.81.2-rc.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -15,10 +15,16 @@
     "./config.js": "./lib/config.js",
     "./config": "./lib/config.js",
     ".": "./lib/index.js",
-    "./Sidebar/*": "./lib/Sidebar/*.js",
-    "./src/": "./src/"
+    "./src/": "./src/",
+    "./core/*": "./lib/core/*/index.js",
+    "./core/templates/*": "./lib/core/templates/*.js",
+    "./components/*": "./lib/components/*.js",
+    "./layouts/*": "./lib/layouts/*.js",
+    "./icons/*": "./lib/icons/*.js",
+    "./markdoc/*": "./lib/markdoc/*.js"
   },
   "peerDependencies": {
+    "@markdoc/markdoc": "0.4.0",
     "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
     "react": "^17.0.0 || ^18.0.0",
@@ -28,6 +34,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
+    "@markdoc/markdoc": "0.4.0",
     "@storybook/addon-actions": "7.6.4",
     "@storybook/addon-essentials": "7.6.4",
     "@storybook/addon-interactions": "7.6.4",
@@ -53,6 +60,7 @@
     "@types/react-dom": "18.2.17",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
+    "@types/nprogress": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "5.55.0",
     "@typescript-eslint/parser": "5.55.0",
     "chromatic": "6.17.2",
@@ -63,38 +71,40 @@
     "jest-when": "3.6.0",
     "json-schema-to-ts": "2.7.2",
     "lodash.throttle": "4.1.1",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "5.0.2",
     "react-refresh": "0.14.0",
     "react-router-dom": "6.21.1",
+    "rimraf": "5.0.5",
     "storybook": "7.6.4",
     "storybook-addon-pseudo-states": "2.1.2",
     "storybook-design-token": "3.0.0-beta.6",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
-    "ts-jest": "29.1.1",
+    "ts-jest": "29.1.2",
     "ts-node": "10.9.1",
     "ts-node-dev": "2.0.0",
     "tsc-alias": "1.8.3",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.2.2",
-    "webpack": "5.88.2",
-    "@redocly/portal-types": "1.2.1"
+    "webpack": "5.88.2"
   },
   "dependencies": {
-    "@redocly/ajv": "^8.11.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
     "hotkeys-js": "^3.10.1",
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
-    "timeago.js": "^4.0.2"
+    "timeago.js": "^4.0.2",
+    "i18next": "^22.4.12",
+    "nprogress": "^0.2.0",
+    "@redocly/config": "0.4.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
     "ts:check": "tsc --noEmit --skipLibCheck",
-    "clean": "rm -rf lib",
+    "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build": "npm run clean && npm run compile",
     "test": "jest",

package/src/components/Admonition/Admonition.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import type { FC } from 'react';
+
+import { WarningFilledIcon } from '@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon';
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
+import { InformationFilledIcon } from '@redocly/theme/icons/InformationFilledIcon/InformationFilledIcon';
+
+type AdmonitionTypeProps = {
+  type: 'warning' | 'success' | 'danger' | 'info';
+};
+
+export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
+  name?: string;
+  className?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+};
+
+const IconsMap: Record<AdmonitionTypeProps['type'], FC<{ color?: string }>> = {
+  warning: WarningFilledIcon,
+  success: CheckmarkFilledIcon,
+  danger: CloseFilledIcon,
+  info: InformationFilledIcon,
+};
+
+export function Admonition({
+  type = 'info',
+  name,
+  children,
+  className,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
+  const Icon = IconsMap[type] || IconsMap['info'];
+  return (
+    <AdmonitionWrapper
+      type={type}
+      className={className}
+      data-component-name="Admonition/Admonition"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
+      <Icon color={`--admonition-${type}-icon-color`} />
+      <TextContainer>
+        {name ? <Heading type={type}>{name}</Heading> : null}
+        {children ? <Content>{children}</Content> : null}
+      </TextContainer>
+    </AdmonitionWrapper>
+  );
+}
+
+const Content = styled.div`
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;
+
+const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
+  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
+  padding: var(--admonition-padding-vertical-xs) var(--admonition-padding-horizontal);
+  border-radius: var(--admonition-border-radius);
+  font-size: var(--admonition-font-size);
+  font-weight: var(--admonition-font-weight);
+  line-height: var(--admonition-line-height);
+
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
+  ${({ type }) => css`
+    background-color: var(--admonition-${type}-bg-color);
+    color: var(--admonition-${type}-text-color);
+    border-left: var(--admonition-${type}-border);
+  `};
+
+  &:has(${Content}) {
+    padding: var(--admonition-padding-vertical-md) var(--admonition-padding-horizontal);
+  }
+
+  &:not(:has(${Content})) {
+    --admonition-heading-font-size: var(--admonition-font-size);
+    --admonition-heading-line-height: var(--admonition-line-height);
+    --admonition-icon-size: 16px;
+
+    align-items: center;
+    gap: calc(var(--spacing-xxs) * 1.5);
+  }
+
+  svg {
+    width: var(--admonition-icon-size);
+    height: var(--admonition-icon-size);
+    flex-shrink: 0;
+
+    fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
+
+    background-image: ${({ type }) => `var(--admonition-${type}-icon)`};
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+  width: 100%;
+`;
+
+const Heading = styled.div<AdmonitionTypeProps>`
+  letter-spacing: var(--admonition-heading-letter-spacing);
+  color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
+
+  && {
+    font-size: var(--admonition-heading-font-size);
+    font-weight: var(--admonition-heading-font-weight);
+    line-height: var(--admonition-heading-line-height);
+    text-transform: var(--admonition-heading-transform);
+  }
+`;