@redocly/theme 0.44.3 → 0.44.5

package/lib/components/Select/Select.js

@@ -183,7 +183,7 @@ const SelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
   width: 100%;
 
   > * {
-    width: 100%;
+    min-width: 100%;
   }
 `;
 const SelectDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `

package/lib/components/VersionPicker/VersionPicker.js

@@ -34,7 +34,6 @@ const hooks_1 = require("../../core/hooks");
 const Select_1 = require("../../components/Select/Select");
 const SelectInput_1 = require("../../components/Select/SelectInput");
 function VersionPicker(props) {
-    var _a;
     const themeConfig = (0, hooks_1.useThemeConfig)();
     const { versionPicker } = themeConfig;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
@@ -45,7 +44,7 @@ function VersionPicker(props) {
         value: version,
         active: active,
     }));
-    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
+    const value = options.find((item) => item.active);
     if (versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.hide) {
         return null;
     }

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

@@ -20,7 +20,6 @@ function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
             isFirstTab: currentIndex === 0,
             isLastTab: currentIndex === tabs.files.length - 1,
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tabs]);
     (0, react_1.useEffect)(() => {
         if (containerRef.current) {

package/lib/core/utils/args-typecheck.js

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isEmptyArray = isEmptyArray;
 exports.isPrimitive = isPrimitive;
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function isEmptyArray(items) {
     return Array.isArray(items) && !(items === null || items === void 0 ? void 0 : items.length);
 }
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function isPrimitive(arg) {
     return ['string', 'boolean', 'number', 'undefined'].includes(typeof arg);
 }

package/lib/icons/CertificateIcon/CertificateIcon.d.ts

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

package/lib/icons/CertificateIcon/CertificateIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CertificateIcon = 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 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M10.5 6.4375L11.3365 8.05756L13.125 8.31744L11.8125 9.5L12.1498 11.25L10.5 10.2656L8.85019 11.25L9.1875 9.5L7.875 8.31744L9.7125 8.05756L10.5 6.4375Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M5.25 6H2.625V6.875H5.25V6Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M7 4.25H2.625V5.125H7V4.25Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M7 2.5H2.625V3.375H7V2.5Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M7 10.375H1.75V1.625H12.25V6H13.125V1.625C13.125 1.39294 13.0328 1.17038 12.8687 1.00628C12.7046 0.842187 12.4821 0.75 12.25 0.75H1.75C1.51794 0.75 1.29538 0.842187 1.13128 1.00628C0.967187 1.17038 0.875 1.39294 0.875 1.625V10.375C0.875 10.6071 0.967187 10.8296 1.13128 10.9937C1.29538 11.1578 1.51794 11.25 1.75 11.25H7V10.375Z", fill: "#1A1C21" })));
+exports.CertificateIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CertificateIcon/CertificateIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=CertificateIcon.js.map

package/lib/icons/SettingsIcon/SettingsIcon.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { IconProps } from '../../icons/types';
-export declare const SettingsIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+export declare const SettingsIcon: import("styled-components").StyledComponent<(props: IconProps & {
+    variant?: "circle" | "default";
+}) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {
     color?: string;

package/lib/icons/SettingsIcon/SettingsIcon.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,9 +18,14 @@ exports.SettingsIcon = 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.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z", fill: "#22242B" }),
-    react_1.default.createElement("path", { d: "M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z", fill: "#22242B" })));
+const Icon = (props) => {
+    const { variant } = props, rest = __rest(props, ["variant"]);
+    return (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest), variant === 'circle' ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("path", { d: "M10.8116 7.33256C10.8116 7.22318 10.8116 7.11381 10.8116 7.00006C10.8116 6.88631 10.8116 6.77693 10.8116 6.66318L11.6516 5.92818C11.8064 5.7917 11.908 5.60488 11.9384 5.40073C11.9689 5.19658 11.9261 4.98825 11.8178 4.81256L10.7853 3.06256C10.7086 2.92967 10.5983 2.8193 10.4654 2.74251C10.3326 2.66572 10.1819 2.62521 10.0284 2.62506C9.93336 2.62433 9.83878 2.6391 9.74845 2.66881L8.68532 3.02756C8.50177 2.90558 8.31031 2.79597 8.1122 2.69943L7.88907 1.59693C7.84907 1.39551 7.73949 1.21457 7.57952 1.0858C7.41956 0.957028 7.21939 0.888621 7.01407 0.892556H4.96657C4.76125 0.888621 4.56109 0.957028 4.40112 1.0858C4.24116 1.21457 4.13158 1.39551 4.09157 1.59693L3.86845 2.69943C3.66892 2.79594 3.476 2.90556 3.29095 3.02756L2.2497 2.65131C2.15839 2.62752 2.06384 2.61865 1.9697 2.62506C1.81626 2.62521 1.66555 2.66572 1.53271 2.74251C1.39986 2.8193 1.28954 2.92967 1.21282 3.06256L0.180323 4.81256C0.0782047 4.98799 0.040258 5.19347 0.0729819 5.3938C0.105706 5.59414 0.207064 5.77686 0.359698 5.91068L1.18657 6.66756C1.18657 6.77693 1.18657 6.88631 1.18657 7.00006C1.18657 7.11381 1.18657 7.22318 1.18657 7.33693L0.359698 8.07193C0.202753 8.20668 0.0986221 8.39268 0.0657848 8.59691C0.0329474 8.80114 0.0735273 9.0104 0.180323 9.18756L1.21282 10.9376C1.28954 11.0704 1.39986 11.1808 1.53271 11.2576C1.66555 11.3344 1.81626 11.3749 1.9697 11.3751C2.06479 11.3758 2.15936 11.361 2.2497 11.3313L3.31282 10.9726C3.49637 11.0945 3.68784 11.2041 3.88595 11.3007L4.10907 12.4032C4.14908 12.6046 4.25866 12.7855 4.41862 12.9143C4.57859 13.0431 4.77875 13.1115 4.98407 13.1076H7.04907C7.25439 13.1115 7.45456 13.0431 7.61452 12.9143C7.77449 12.7855 7.88407 12.6046 7.92407 12.4032L8.1472 11.3007C8.34673 11.2042 8.53965 11.0946 8.7247 10.9726L9.78345 11.3313C9.87378 11.361 9.96836 11.3758 10.0634 11.3751C10.2169 11.3749 10.3676 11.3344 10.5004 11.2576C10.6333 11.1808 10.7436 11.0704 10.8203 10.9376L11.8178 9.18756C11.9199 9.01212 11.9579 8.80664 11.9252 8.60631C11.8924 8.40597 11.7911 8.22325 11.6384 8.08943L10.8116 7.33256ZM10.0284 10.5001L8.52782 9.99256C8.17654 10.2901 7.77506 10.5227 7.3422 10.6794L7.03157 12.2501H4.96657L4.65595 10.6969C4.22651 10.5357 3.8272 10.3036 3.4747 10.0101L1.9697 10.5001L0.937198 8.75006L2.1272 7.70006C2.0463 7.24718 2.0463 6.78356 2.1272 6.33068L0.937198 5.25006L1.9697 3.50006L3.47032 4.00756C3.82161 3.71001 4.22309 3.47742 4.65595 3.32068L4.96657 1.75006H7.03157L7.3422 3.30318C7.77164 3.46437 8.17095 3.69656 8.52345 3.99006L10.0284 3.50006L11.0609 5.25006L9.87095 6.30006C9.95184 6.75293 9.95184 7.21656 9.87095 7.66943L11.0609 8.75006L10.0284 10.5001Z", fill: "#22242B" }),
+        react_1.default.createElement("path", { d: "M5.99907 9.62506C5.4799 9.62506 4.97238 9.4711 4.5407 9.18266C4.10902 8.89422 3.77257 8.48426 3.57389 8.0046C3.37521 7.52494 3.32323 6.99714 3.42451 6.48794C3.5258 5.97874 3.7758 5.51101 4.14292 5.1439C4.51003 4.77679 4.97776 4.52678 5.48696 4.42549C5.99616 4.32421 6.52396 4.37619 7.00362 4.57487C7.48327 4.77355 7.89324 5.11 8.18168 5.54168C8.47012 5.97336 8.62407 6.48088 8.62407 7.00006C8.62758 7.34575 8.56208 7.68867 8.43141 8.00874C8.30073 8.3288 8.10751 8.61958 7.86305 8.86403C7.61859 9.10849 7.32782 9.30171 7.00776 9.43239C6.68769 9.56306 6.34477 9.62857 5.99907 9.62506ZM5.99907 5.25006C5.76779 5.24467 5.53781 5.28625 5.32305 5.37229C5.1083 5.45833 4.91323 5.58703 4.74964 5.75062C4.58605 5.91421 4.45734 6.10928 4.37131 6.32404C4.28527 6.53879 4.24369 6.76877 4.24907 7.00006C4.24369 7.23134 4.28527 7.46132 4.37131 7.67607C4.45734 7.89083 4.58605 8.0859 4.74964 8.24949C4.91323 8.41308 5.1083 8.54178 5.32305 8.62782C5.53781 8.71386 5.76779 8.75544 5.99907 8.75006C6.23036 8.75544 6.46034 8.71386 6.67509 8.62782C6.88985 8.54178 7.08492 8.41308 7.24851 8.24949C7.41209 8.0859 7.5408 7.89083 7.62684 7.67607C7.71288 7.46132 7.75446 7.23134 7.74907 7.00006C7.75446 6.76877 7.71288 6.53879 7.62684 6.32404C7.5408 6.10928 7.41209 5.91421 7.24851 5.75062C7.08492 5.58703 6.88985 5.45833 6.67509 5.37229C6.46034 5.28625 6.23036 5.24467 5.99907 5.25006Z", fill: "#22242B" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("path", { d: "M15.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z", fill: "#22242B" }),
+        react_1.default.createElement("path", { d: "M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z", fill: "#22242B" })))));
+};
 exports.SettingsIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/SettingsIcon/SettingsIcon',
 })) `

package/lib/index.d.ts

@@ -209,6 +209,7 @@ export * from './icons/PlusCustomIcon/PlusCustomIcon';
 export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
+export * from './icons/CertificateIcon/CertificateIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -261,6 +261,7 @@ __exportStar(require("./icons/PlusCustomIcon/PlusCustomIcon"), exports);
 __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
+__exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

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

@@ -7,5 +7,6 @@ export interface MarkdocExampleProps {
     withLabels?: boolean;
     codeLabel?: string;
     resultLabel?: string;
+    title?: string;
 }
 export declare function MarkdocExample(props: MarkdocExampleProps): React.JSX.Element;

package/lib/markdoc/components/MarkdocExample/MarkdocExample.js

@@ -31,11 +31,11 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../../components/CodeBlock/CodeBlock");
 function MarkdocExample(props) {
-    const { language, rawContent, renderDemo, demoContent, withLabels, codeLabel, resultLabel } = props;
+    const { language, rawContent, renderDemo, demoContent, withLabels, codeLabel, resultLabel, title, } = props;
     const renderLabels = renderDemo ? (withLabels === undefined ? true : withLabels) : false;
     return (React.createElement("div", { "data-component-name": "Markdoc/MarkdocExample/MarkdocExample" },
         renderLabels ? React.createElement(Label, null, codeLabel ? codeLabel : 'Code:') : null,
-        React.createElement(CodeBlock_1.CodeBlock, { lang: language, source: rawContent, header: { controls: { copy: {} } } }),
+        React.createElement(CodeBlock_1.CodeBlock, { lang: language, source: rawContent, header: { title, controls: { copy: {} } } }),
         renderDemo ? (React.createElement(React.Fragment, null,
             renderLabels ? React.createElement(Label, null, resultLabel ? resultLabel : 'Result:') : null,
             demoContent)) : null));

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

@@ -24,7 +24,14 @@ exports.markdocExample = {
             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 }), []);
+            const annotations = node.children[0].annotations;
+            let title = null;
+            if (annotations.length > 0) {
+                const fenceWithTitle = annotations.find((annotation) => annotation.name === 'title');
+                title = fenceWithTitle === null || fenceWithTitle === void 0 ? void 0 : fenceWithTitle.value;
+            }
+            return new markdoc_1.default.Tag('MarkdocExample', Object.assign(Object.assign({}, attributes), { title,
+                language, demoContent: node.children[0].transformChildren(config), rawContent: content }), []);
         },
     },
     tagName: 'markdoc-example',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.44.3",
+  "version": "0.44.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -62,8 +62,6 @@
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
     "@types/nprogress": "0.2.3",
-    "@typescript-eslint/eslint-plugin": "8.6.0",
-    "@typescript-eslint/parser": "8.6.0",
     "chromatic": "6.17.2",
     "concurrently": "7.6.0",
     "jest": "29.5.0",

package/src/components/Select/Select.tsx

@@ -263,7 +263,7 @@ const SelectDropdown = styled(Dropdown)`
   width: 100%;
 
   > * {
-    width: 100%;
+    min-width: 100%;
   }
 `;
 

package/src/components/VersionPicker/VersionPicker.tsx

@@ -21,7 +21,7 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
     value: version,
     active: active,
   }));
-  const value = options.find((item) => item.active)?.value;
+  const value = options.find((item) => item.active);
 
   if (versionPicker?.hide) {
     return null;

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

@@ -27,7 +27,6 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       isFirstTab: currentIndex === 0,
       isLastTab: currentIndex === tabs.files.length - 1,
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tabs]);
 
   useEffect(() => {

package/src/core/utils/args-typecheck.ts

@@ -1,9 +1,7 @@
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function isEmptyArray(items: any): boolean {
   return Array.isArray(items) && !items?.length;
 }
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function isPrimitive(arg: any): boolean {
   return ['string', 'boolean', 'number', 'undefined'].includes(typeof arg);
 }

package/src/icons/CertificateIcon/CertificateIcon.tsx

@@ -0,0 +1,33 @@
+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 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M10.5 6.4375L11.3365 8.05756L13.125 8.31744L11.8125 9.5L12.1498 11.25L10.5 10.2656L8.85019 11.25L9.1875 9.5L7.875 8.31744L9.7125 8.05756L10.5 6.4375Z"
+      fill="#1A1C21"
+    />
+    <path d="M5.25 6H2.625V6.875H5.25V6Z" fill="#1A1C21" />
+    <path d="M7 4.25H2.625V5.125H7V4.25Z" fill="#1A1C21" />
+    <path d="M7 2.5H2.625V3.375H7V2.5Z" fill="#1A1C21" />
+    <path
+      d="M7 10.375H1.75V1.625H12.25V6H13.125V1.625C13.125 1.39294 13.0328 1.17038 12.8687 1.00628C12.7046 0.842187 12.4821 0.75 12.25 0.75H1.75C1.51794 0.75 1.29538 0.842187 1.13128 1.00628C0.967187 1.17038 0.875 1.39294 0.875 1.625V10.375C0.875 10.6071 0.967187 10.8296 1.13128 10.9937C1.29538 11.1578 1.51794 11.25 1.75 11.25H7V10.375Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const CertificateIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CertificateIcon/CertificateIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SettingsIcon/SettingsIcon.tsx

@@ -5,18 +5,36 @@ 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.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z"
-      fill="#22242B"
-    />
-    <path
-      d="M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z"
-      fill="#22242B"
-    />
-  </svg>
-);
+const Icon = (props: IconProps & { variant?: 'circle' | 'default' }) => {
+  const { variant, ...rest } = props;
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      {variant === 'circle' ? (
+        <>
+          <path
+            d="M10.8116 7.33256C10.8116 7.22318 10.8116 7.11381 10.8116 7.00006C10.8116 6.88631 10.8116 6.77693 10.8116 6.66318L11.6516 5.92818C11.8064 5.7917 11.908 5.60488 11.9384 5.40073C11.9689 5.19658 11.9261 4.98825 11.8178 4.81256L10.7853 3.06256C10.7086 2.92967 10.5983 2.8193 10.4654 2.74251C10.3326 2.66572 10.1819 2.62521 10.0284 2.62506C9.93336 2.62433 9.83878 2.6391 9.74845 2.66881L8.68532 3.02756C8.50177 2.90558 8.31031 2.79597 8.1122 2.69943L7.88907 1.59693C7.84907 1.39551 7.73949 1.21457 7.57952 1.0858C7.41956 0.957028 7.21939 0.888621 7.01407 0.892556H4.96657C4.76125 0.888621 4.56109 0.957028 4.40112 1.0858C4.24116 1.21457 4.13158 1.39551 4.09157 1.59693L3.86845 2.69943C3.66892 2.79594 3.476 2.90556 3.29095 3.02756L2.2497 2.65131C2.15839 2.62752 2.06384 2.61865 1.9697 2.62506C1.81626 2.62521 1.66555 2.66572 1.53271 2.74251C1.39986 2.8193 1.28954 2.92967 1.21282 3.06256L0.180323 4.81256C0.0782047 4.98799 0.040258 5.19347 0.0729819 5.3938C0.105706 5.59414 0.207064 5.77686 0.359698 5.91068L1.18657 6.66756C1.18657 6.77693 1.18657 6.88631 1.18657 7.00006C1.18657 7.11381 1.18657 7.22318 1.18657 7.33693L0.359698 8.07193C0.202753 8.20668 0.0986221 8.39268 0.0657848 8.59691C0.0329474 8.80114 0.0735273 9.0104 0.180323 9.18756L1.21282 10.9376C1.28954 11.0704 1.39986 11.1808 1.53271 11.2576C1.66555 11.3344 1.81626 11.3749 1.9697 11.3751C2.06479 11.3758 2.15936 11.361 2.2497 11.3313L3.31282 10.9726C3.49637 11.0945 3.68784 11.2041 3.88595 11.3007L4.10907 12.4032C4.14908 12.6046 4.25866 12.7855 4.41862 12.9143C4.57859 13.0431 4.77875 13.1115 4.98407 13.1076H7.04907C7.25439 13.1115 7.45456 13.0431 7.61452 12.9143C7.77449 12.7855 7.88407 12.6046 7.92407 12.4032L8.1472 11.3007C8.34673 11.2042 8.53965 11.0946 8.7247 10.9726L9.78345 11.3313C9.87378 11.361 9.96836 11.3758 10.0634 11.3751C10.2169 11.3749 10.3676 11.3344 10.5004 11.2576C10.6333 11.1808 10.7436 11.0704 10.8203 10.9376L11.8178 9.18756C11.9199 9.01212 11.9579 8.80664 11.9252 8.60631C11.8924 8.40597 11.7911 8.22325 11.6384 8.08943L10.8116 7.33256ZM10.0284 10.5001L8.52782 9.99256C8.17654 10.2901 7.77506 10.5227 7.3422 10.6794L7.03157 12.2501H4.96657L4.65595 10.6969C4.22651 10.5357 3.8272 10.3036 3.4747 10.0101L1.9697 10.5001L0.937198 8.75006L2.1272 7.70006C2.0463 7.24718 2.0463 6.78356 2.1272 6.33068L0.937198 5.25006L1.9697 3.50006L3.47032 4.00756C3.82161 3.71001 4.22309 3.47742 4.65595 3.32068L4.96657 1.75006H7.03157L7.3422 3.30318C7.77164 3.46437 8.17095 3.69656 8.52345 3.99006L10.0284 3.50006L11.0609 5.25006L9.87095 6.30006C9.95184 6.75293 9.95184 7.21656 9.87095 7.66943L11.0609 8.75006L10.0284 10.5001Z"
+            fill="#22242B"
+          />
+          <path
+            d="M5.99907 9.62506C5.4799 9.62506 4.97238 9.4711 4.5407 9.18266C4.10902 8.89422 3.77257 8.48426 3.57389 8.0046C3.37521 7.52494 3.32323 6.99714 3.42451 6.48794C3.5258 5.97874 3.7758 5.51101 4.14292 5.1439C4.51003 4.77679 4.97776 4.52678 5.48696 4.42549C5.99616 4.32421 6.52396 4.37619 7.00362 4.57487C7.48327 4.77355 7.89324 5.11 8.18168 5.54168C8.47012 5.97336 8.62407 6.48088 8.62407 7.00006C8.62758 7.34575 8.56208 7.68867 8.43141 8.00874C8.30073 8.3288 8.10751 8.61958 7.86305 8.86403C7.61859 9.10849 7.32782 9.30171 7.00776 9.43239C6.68769 9.56306 6.34477 9.62857 5.99907 9.62506ZM5.99907 5.25006C5.76779 5.24467 5.53781 5.28625 5.32305 5.37229C5.1083 5.45833 4.91323 5.58703 4.74964 5.75062C4.58605 5.91421 4.45734 6.10928 4.37131 6.32404C4.28527 6.53879 4.24369 6.76877 4.24907 7.00006C4.24369 7.23134 4.28527 7.46132 4.37131 7.67607C4.45734 7.89083 4.58605 8.0859 4.74964 8.24949C4.91323 8.41308 5.1083 8.54178 5.32305 8.62782C5.53781 8.71386 5.76779 8.75544 5.99907 8.75006C6.23036 8.75544 6.46034 8.71386 6.67509 8.62782C6.88985 8.54178 7.08492 8.41308 7.24851 8.24949C7.41209 8.0859 7.5408 7.89083 7.62684 7.67607C7.71288 7.46132 7.75446 7.23134 7.74907 7.00006C7.75446 6.76877 7.71288 6.53879 7.62684 6.32404C7.5408 6.10928 7.41209 5.91421 7.24851 5.75062C7.08492 5.58703 6.88985 5.45833 6.67509 5.37229C6.46034 5.28625 6.23036 5.24467 5.99907 5.25006Z"
+            fill="#22242B"
+          />
+        </>
+      ) : (
+        <>
+          <path
+            d="M15.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z"
+            fill="#22242B"
+          />
+          <path
+            d="M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z"
+            fill="#22242B"
+          />
+        </>
+      )}
+    </svg>
+  );
+};
 
 export const SettingsIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/SettingsIcon/SettingsIcon',

package/src/index.ts

@@ -233,6 +233,7 @@ 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';
+export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/MarkdocExample/MarkdocExample.tsx

@@ -11,16 +11,25 @@ export interface MarkdocExampleProps {
   withLabels?: boolean;
   codeLabel?: string;
   resultLabel?: string;
+  title?: string;
 }
 export function MarkdocExample(props: MarkdocExampleProps) {
-  const { language, rawContent, renderDemo, demoContent, withLabels, codeLabel, resultLabel } =
-    props;
+  const {
+    language,
+    rawContent,
+    renderDemo,
+    demoContent,
+    withLabels,
+    codeLabel,
+    resultLabel,
+    title,
+  } = props;
 
   const renderLabels = renderDemo ? (withLabels === undefined ? true : withLabels) : false;
   return (
     <div data-component-name="Markdoc/MarkdocExample/MarkdocExample">
       {renderLabels ? <Label>{codeLabel ? codeLabel : 'Code:'}</Label> : null}
-      <CodeBlock lang={language} source={rawContent} header={{ controls: { copy: {} } }} />
+      <CodeBlock lang={language} source={rawContent} header={{ title, controls: { copy: {} } }} />
       {renderDemo ? (
         <>
           {renderLabels ? <Label>{resultLabel ? resultLabel : 'Result:'}</Label> : null}

package/src/markdoc/tags/markdoc-example.ts

@@ -22,10 +22,18 @@ export const markdocExample: MarkdocSchemaWrapper = {
 
       const language = 'markdoc';
 
+      const annotations = node.children[0].annotations;
+      let title = null;
+      if (annotations.length > 0) {
+        const fenceWithTitle = annotations.find((annotation) => annotation.name === 'title');
+        title = fenceWithTitle?.value;
+      }
+
       return new markdoc.Tag(
         'MarkdocExample',
         {
           ...attributes,
+          title,
           language,
           demoContent: node.children[0].transformChildren(config),
           rawContent: content,