@redocly/theme 0.56.0-rc.2 → 0.56.1

package/lib/core/utils/get-file-icon.js

@@ -1,37 +1,127 @@
 "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.getFileIconByExt = getFileIconByExt;
-const DocumentBlankIcon_1 = require("../../icons/DocumentBlankIcon/DocumentBlankIcon");
-const DocumentYamlIcon_1 = require("../../icons/DocumentYamlIcon/DocumentYamlIcon");
-const DocumentJsonIcon_1 = require("../../icons/DocumentJsonIcon/DocumentJsonIcon");
-const DocumentJsIcon_1 = require("../../icons/DocumentJsIcon/DocumentJsIcon");
-const DocumentTsIcon_1 = require("../../icons/DocumentTsIcon/DocumentTsIcon");
-const DocumentCssIcon_1 = require("../../icons/DocumentCssIcon/DocumentCssIcon");
-const DocumentHtmlIcon_1 = require("../../icons/DocumentHtmlIcon/DocumentHtmlIcon");
-const DocumentReactIcon_1 = require("../../icons/DocumentReactIcon/DocumentReactIcon");
-const DocumentMarkdownIcon_1 = require("../../icons/DocumentMarkdownIcon/DocumentMarkdownIcon");
-const DocumentGraphqlIcon_1 = require("../../icons/DocumentGraphqlIcon/DocumentGraphqlIcon");
-const DocumentPythonIcon_1 = require("../../icons/DocumentPythonIcon/DocumentPythonIcon");
-const DocumentShellIcon_1 = require("../../icons/DocumentShellIcon/DocumentShellIcon");
-const DocumentJavaIcon_1 = require("../../icons/DocumentJavaIcon/DocumentJavaIcon");
+exports.getFileIconByLanguage = getFileIconByLanguage;
+const React = __importStar(require("react"));
+const CDNIcon_1 = require("@redocly/theme/icons/CDNIcon/CDNIcon");
+// extension to icon name
 const fileIconMap = {
-    yaml: DocumentYamlIcon_1.DocumentYamlIcon,
-    yml: DocumentYamlIcon_1.DocumentYamlIcon,
-    json: DocumentJsonIcon_1.DocumentJsonIcon,
-    js: DocumentJsIcon_1.DocumentJsIcon,
-    ts: DocumentTsIcon_1.DocumentTsIcon,
-    css: DocumentCssIcon_1.DocumentCssIcon,
-    html: DocumentHtmlIcon_1.DocumentHtmlIcon,
-    jsx: DocumentReactIcon_1.DocumentReactIcon,
-    tsx: DocumentReactIcon_1.DocumentReactIcon,
-    md: DocumentMarkdownIcon_1.DocumentMarkdownIcon,
-    graphql: DocumentGraphqlIcon_1.DocumentGraphqlIcon,
-    gql: DocumentGraphqlIcon_1.DocumentGraphqlIcon,
-    py: DocumentPythonIcon_1.DocumentPythonIcon,
-    sh: DocumentShellIcon_1.DocumentShellIcon,
-    java: DocumentJavaIcon_1.DocumentJavaIcon,
+    yaml: 'yaml',
+    yml: 'yaml',
+    json: 'json',
+    js: 'javascript',
+    ts: 'typescript',
+    css: 'css',
+    html: 'html',
+    jsx: 'react',
+    tsx: 'react',
+    md: 'markdown',
+    graphql: 'graphql',
+    gql: 'graphql',
+    py: 'python',
+    sh: 'console',
+    xsh: 'console',
+    nu: 'console',
+    java: 'java',
+    ps: 'powershell',
+    php: 'php_elephant',
+    go: 'go',
+    ruby: 'ruby',
+    swift: 'swift',
+    kotlin: 'kotlin',
+    rust: 'rust',
+    scala: 'scala',
+    elixir: 'elixir',
+    dart: 'dart',
+    http: 'http',
+    rest: 'http',
+    c: 'c',
+    h: 'c',
+    hpp: 'c',
+    cc: 'c',
+    cpp: 'c',
+    cxx: 'c',
+    'c++': 'c',
+    sql: 'database',
+    hbs: 'handlebars',
+    cs: 'csharp',
+    csx: 'csharp',
+    csharp: 'csharp',
+    markdoc: 'markdoc',
+    mdoc: 'markdoc',
+    mdx: 'mdx',
+};
+// code block language to icon name, only for those when code extension is not available
+const languageIconMap = {
+    bash: 'console',
+    python: 'python',
+    java: 'java',
+    graphql: 'graphql',
+    javascript: 'javascript',
+    typescript: 'typescript',
+    react: 'react',
+    markdown: 'markdown',
+    php: 'php_elephant',
+    ruby: 'ruby',
+    swift: 'swift',
+    kotlin: 'kotlin',
+    rust: 'rust',
+    scala: 'scala',
+    elixir: 'elixir',
+    dart: 'dart',
+    csharp: 'csharp',
+    objectivec: 'c',
+    perl: 'perl',
+    sql: 'database',
+    xml: 'xml',
+    vim: 'vim',
+    lua: 'lua',
+    zsh: 'console',
+    fish: 'console',
+    powershell: 'console',
+    handlebars: 'handlebars',
+    markdoc: 'markdoc',
+    mdx: 'mdx',
 };
 function getFileIconByExt(ext) {
-    return fileIconMap[ext] || DocumentBlankIcon_1.DocumentBlankIcon;
+    const iconName = fileIconMap[ext] || 'document';
+    return React.createElement(CDNIcon_1.CDNIcon, { name: iconName, pack: "code", mode: "background" });
+}
+function getFileIconByLanguage(language) {
+    const iconName = fileIconMap[language] || languageIconMap[language] || 'document';
+    return React.createElement(CDNIcon_1.CDNIcon, { name: iconName, pack: "code", mode: "background" });
 }
 //# sourceMappingURL=get-file-icon.js.map

package/lib/core/utils/icon-resolver.d.ts

@@ -0,0 +1,28 @@
+export type ResolvedIcon = {
+    type: 'link';
+    value: string;
+} | {
+    type: 'font-awesome';
+    name: string;
+    style: string;
+} | {
+    type: 'invalid';
+    reason: string;
+};
+/**
+ * Resolves an icon value from configuration into a structured object.
+ *
+ * Supports:
+ * - URLs (absolute or relative paths to image files)
+ * - Font Awesome icons in formats:
+ *    - "solid camera" (style + name)
+ *    - "camera" (name only, default style: 'regular')
+ *
+ * @param icon - The icon string from config.
+ * @returns A structured object describing the icon:
+ *    - type: 'url' | 'font-awesome' | 'invalid'
+ *    - value: for URLs
+ *    - name and style: for Font Awesome icons
+ *    - reason: for invalid entries
+ */
+export declare function resolveIcon(icon?: string): ResolvedIcon;

package/lib/core/utils/icon-resolver.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveIcon = resolveIcon;
+const FA_ICON_STYLES = ['solid', 'regular', 'duotone', 'brands'];
+const FA_ICON_NAME_PATTERN = /^[a-z0-9-]+$/i;
+/**
+ * Resolves an icon value from configuration into a structured object.
+ *
+ * Supports:
+ * - URLs (absolute or relative paths to image files)
+ * - Font Awesome icons in formats:
+ *    - "solid camera" (style + name)
+ *    - "camera" (name only, default style: 'regular')
+ *
+ * @param icon - The icon string from config.
+ * @returns A structured object describing the icon:
+ *    - type: 'url' | 'font-awesome' | 'invalid'
+ *    - value: for URLs
+ *    - name and style: for Font Awesome icons
+ *    - reason: for invalid entries
+ */
+function resolveIcon(icon) {
+    if (!icon || typeof icon !== 'string') {
+        return { type: 'invalid', reason: 'Icon must be a non-empty string' };
+    }
+    const trimmed = icon.trim();
+    const isLink = trimmed.match(/\.(svg|png|jpg|jpeg|gif|ico|webp)$/) || /^https?:\/\//.test(trimmed);
+    if (isLink) {
+        return { type: 'link', value: trimmed };
+    }
+    const [first, second] = trimmed.split(/\s+/);
+    if (first) {
+        if (second) {
+            // Format: "style name" (e.g., "solid camera")
+            if (FA_ICON_STYLES.includes(first) && FA_ICON_NAME_PATTERN.test(second)) {
+                return { type: 'font-awesome', style: first, name: second };
+            }
+            else {
+                return { type: 'invalid', reason: 'Unrecognized icon format' };
+            }
+        }
+        else if (!FA_ICON_STYLES.includes(first) && FA_ICON_NAME_PATTERN.test(first)) {
+            return {
+                type: 'font-awesome',
+                name: first,
+                style: 'regular',
+            };
+        }
+    }
+    return { type: 'invalid', reason: 'Unrecognized icon format' };
+}
+//# sourceMappingURL=icon-resolver.js.map

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

@@ -9,7 +9,7 @@ export * from './color';
 export * from './urls';
 export * from './js-utils';
 export * from './tags-parser';
-export * from './text-transform';
+export * from './string';
 export * from './dom';
 export * from './markdoc';
 export * from './attribute-parser';
@@ -33,3 +33,6 @@ export * from './replace-inputs-with-value';
 export * from './find-closest-common-directory';
 export * from './get-user-agent';
 export * from './parse-style-string';
+export * from './lang-to-name';
+export * from './enhanced-smoothstep';
+export * from './icon-resolver';

package/lib/core/utils/index.js

@@ -25,7 +25,7 @@ __exportStar(require("./color"), exports);
 __exportStar(require("./urls"), exports);
 __exportStar(require("./js-utils"), exports);
 __exportStar(require("./tags-parser"), exports);
-__exportStar(require("./text-transform"), exports);
+__exportStar(require("./string"), exports);
 __exportStar(require("./dom"), exports);
 __exportStar(require("./markdoc"), exports);
 __exportStar(require("./attribute-parser"), exports);
@@ -49,4 +49,7 @@ __exportStar(require("./replace-inputs-with-value"), exports);
 __exportStar(require("./find-closest-common-directory"), exports);
 __exportStar(require("./get-user-agent"), exports);
 __exportStar(require("./parse-style-string"), exports);
+__exportStar(require("./lang-to-name"), exports);
+__exportStar(require("./enhanced-smoothstep"), exports);
+__exportStar(require("./icon-resolver"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/lang-to-name.d.ts

@@ -0,0 +1 @@
+export declare function langToName(lang: string): string;

package/lib/core/utils/lang-to-name.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.langToName = langToName;
+const string_1 = require("./string");
+const languages = {
+    js: 'JavaScript',
+    ts: 'TypeScript',
+    jsx: 'React',
+    tsx: 'React',
+    html: 'HTML',
+    css: 'CSS',
+    sh: 'Shell',
+    java: 'Java',
+    py: 'Python',
+    graphql: 'GraphQL',
+    gql: 'GraphQL',
+    yaml: 'YAML',
+    yml: 'YAML',
+    json: 'JSON',
+    md: 'Markdown',
+    markdown: 'Markdown',
+    mermaid: 'Mermaid',
+    php: 'PHP',
+    javascript: 'JavaScript',
+    typescript: 'TypeScript',
+    react: 'React',
+    mdoc: 'Markdoc',
+    'objective-c': 'Objective-C',
+    objectivec: 'Objective-C',
+    sql: 'SQL',
+    xml: 'XML',
+    csharp: 'C#',
+};
+function langToName(lang) {
+    return languages[lang] || (0, string_1.capitalize)(lang);
+}
+//# sourceMappingURL=lang-to-name.js.map

package/lib/core/utils/{text-transform.js → string.js}

@@ -4,4 +4,4 @@ exports.capitalize = capitalize;
 function capitalize(input) {
     return input.charAt(0).toUpperCase() + input.slice(1);
 }
-//# sourceMappingURL=text-transform.js.map
+//# sourceMappingURL=string.js.map

package/lib/ext/configure.d.ts

@@ -1,4 +1,4 @@
-import { UserClaims, OpenAPIServer } from '../index.js';
+import { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
 export type SecurityDetails = {
     password?: string;
     username?: string;

package/lib/icons/AddIcon/AddIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const AddIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/AddIcon/AddIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/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: "M8.5 7.5V4H7.5V7.5H4V8.5H7.5V12H8.5V8.5H12V7.5H8.5Z" })));
 exports.AddIcon = (0, styled_components_1.default)(Icon).attrs(() => ({

package/lib/icons/AiStarsGradientIcon/AiStarsGradientIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export interface AiStarsGradientIconProps extends IconProps {
     background?: string;
     borderRadius?: string;

package/lib/icons/AiStarsGradientIcon/AiStarsGradientIcon.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AiStarsGradientIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/core/utils");
 const Icon = (props) => {
     const { color = '', background, borderRadius, padding, margin } = props, restProps = __rest(props, ["color", "background", "borderRadius", "padding", "margin"]);
     const resolvedColor = color.startsWith('var(')

package/lib/icons/AiStarsIcon/AiStarsIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export interface AiStarsIconProps extends IconProps {
     background?: string;
     borderRadius?: string;

package/lib/icons/AiStarsIcon/AiStarsIcon.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AiStarsIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/core/utils");
 const Icon = (props) => {
     const { color, background, borderRadius, padding, margin } = props, restProps = __rest(props, ["color", "background", "borderRadius", "padding", "margin"]);
     return (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),

package/lib/icons/ArrowDownIcon/ArrowDownIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const ArrowDownIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/ArrowDownIcon/ArrowDownIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowDownIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/core/utils");
 const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     react_1.default.createElement("path", { d: "M12.295 8.295L8.5 12.085V2H7.5V12.085L3.705 8.295L3 9L8 14L13 9L12.295 8.295Z", fill: "#1A1C21" })));
 exports.ArrowDownIcon = (0, styled_components_1.default)(Icon).attrs(() => ({

package/lib/icons/ArrowLeftIcon/ArrowLeftIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const ArrowLeftIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/ArrowLeftIcon/ArrowLeftIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowLeftIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/core/utils");
 const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     react_1.default.createElement("path", { d: "M7 13L7.705 12.295L3.915 8.5H14V7.5H3.915L7.705 3.705L7 3L2 8L7 13Z" })));
 exports.ArrowLeftIcon = (0, styled_components_1.default)(Icon).attrs(() => ({

package/lib/icons/ArrowRightIcon/ArrowRightIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const ArrowRightIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/ArrowRightIcon/ArrowRightIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowRightIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/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: "M9 3L8.285 3.6965L12.075 7.5H2V8.5H12.075L8.285 12.2865L9 13L14 8L9 3Z" })));
 exports.ArrowRightIcon = (0, styled_components_1.default)(Icon).attrs(() => ({

package/lib/icons/ArrowUpRightIcon/ArrowUpRightIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const ArrowUpRightIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/ArrowUpRightIcon/ArrowUpRightIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowUpRightIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/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: "M5 3V4H11.295L3 12.295L3.705 13L12 4.705V11H13V3H5Z" })));
 exports.ArrowUpRightIcon = (0, styled_components_1.default)(Icon).attrs(() => ({

package/lib/icons/AscSortIcon/AscSortIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const AscSortIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/AscSortIcon/AscSortIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AscSortIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/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: "M9 11L9.707 10.293L11.5 12.086V2H12.5V12.086L14.293 10.293L15 11L12 14L9 11Z", fill: "#22242B" }),
     react_1.default.createElement("path", { d: "M8 9H1V10H8V9Z", fill: "#22242B" }),

package/lib/icons/BareMetalServerIcon/BareMetalServerIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const BareMetalServerIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/BareMetalServerIcon/BareMetalServerIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BareMetalServerIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/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: "M4.5 3.5C4.77614 3.5 5 3.27614 5 3C5 2.72386 4.77614 2.5 4.5 2.5C4.22386 2.5 4 2.72386 4 3C4 3.27614 4.22386 3.5 4.5 3.5Z" }),
     react_1.default.createElement("path", { d: "M13 5H3C2.73487 4.99972 2.48068 4.89428 2.2932 4.7068C2.10572 4.51932 2.00028 4.26513 2 4V2C2.00028 1.73487 2.10572 1.48068 2.2932 1.2932C2.48068 1.10572 2.73487 1.00028 3 1H13C13.2651 1.00028 13.5193 1.10572 13.7068 1.2932C13.8943 1.48068 13.9997 1.73487 14 2V4C13.9997 4.26513 13.8943 4.51932 13.7068 4.7068C13.5193 4.89428 13.2651 4.99972 13 5ZM3 2V4H13V2H3Z" }),

package/lib/icons/BookmarkAddIcon/BookmarkAddIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const BookmarkAddIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/BookmarkAddIcon/BookmarkAddIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BookmarkAddIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/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: "M12 8V13.3757L8 11.3525L4 13.374V2H9V1H4C3.73478 1 3.48043 1.10536 3.29289 1.29289C3.10536 1.48043 3 1.73478 3 2V15L8 12.4732L13 15V8H12Z" }),
     react_1.default.createElement("path", { d: "M13 3V1H12V3H10V4H12V6H13V4H15V3H13Z" })));

package/lib/icons/CDNIcon/CDNIcon.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CDNIconProps } from '@redocly/theme/icons/types';
+export declare const CDNIcon: import("styled-components").StyledComponent<(props: CDNIconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement> & {
+    name: string;
+    type?: string;
+    pack?: "font-awesome" | "code";
+    mode?: "mask" | "background";
+}, "data-component-name">;

package/lib/icons/CDNIcon/CDNIcon.js

@@ -0,0 +1,48 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CDNIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("@redocly/theme/core/utils");
+const constants_1 = require("@redocly/theme/core/constants");
+const Icon = (props) => {
+    const { name, type, pack, mode, color } = props, rest = __rest(props, ["name", "type", "pack", "mode", "color"]);
+    const cdnUrl = constants_1.ICONS_CDN_URL[pack || 'font-awesome'];
+    const typeSegment = pack === 'code' ? '' : type ? type + '/' : 'regular/';
+    const styleProps = mode === 'background'
+        ? {
+            backgroundImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundSize: 'contain',
+        }
+        : {
+            backgroundColor: color ? (0, utils_1.getCssColorVariable)(color) : 'currentColor',
+            maskImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
+            maskRepeat: 'no-repeat',
+            maskPosition: 'center',
+            maskSize: 'contain',
+        };
+    return (react_1.default.createElement("svg", Object.assign({}, rest, { style: Object.assign(Object.assign({}, styleProps), { display: 'inline-block', verticalAlign: 'middle' }) })));
+};
+exports.CDNIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CDNIcon/CDNIcon',
+})) `
+  height: ${({ size }) => size || 'var(--icon-height, 1em)'};
+  width: ${({ size }) => size || 'var(--icon-width, 1em)'};
+`;
+//# sourceMappingURL=CDNIcon.js.map

package/lib/icons/CardsIcon/CardsIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const CardsIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/CardsIcon/CardsIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardsIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/core/utils");
 const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     react_1.default.createElement("path", { d: "M4 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V4C0 4.26522 0.105357 4.51957 0.292893 4.70711C0.48043 4.89464 0.734784 5 1 5H4C4.26522 5 4.51957 4.89464 4.70711 4.70711C4.89464 4.51957 5 4.26522 5 4V1C5 0.734784 4.89464 0.48043 4.70711 0.292893C4.51957 0.105357 4.26522 0 4 0ZM4 4H1V1H4V4Z", fill: "#22242B" }),
     react_1.default.createElement("path", { d: "M11 0H8C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V4C7 4.26522 7.10536 4.51957 7.29289 4.70711C7.48043 4.89464 7.73478 5 8 5H11C11.2652 5 11.5196 4.89464 11.7071 4.70711C11.8946 4.51957 12 4.26522 12 4V1C12 0.734784 11.8946 0.48043 11.7071 0.292893C11.5196 0.105357 11.2652 0 11 0ZM11 4H8V1H11V4Z", fill: "#22242B" }),

package/lib/icons/CaretDownIcon/CaretDownIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const CaretDownIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {

package/lib/icons/CaretDownIcon/CaretDownIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CaretDownIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
+const utils_1 = require("@redocly/theme/core/utils");
 const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     react_1.default.createElement("path", { d: "M6.77566 0C7.04293 0 7.17678 0.323143 6.98779 0.512132L4.21205 3.28787C4.0949 3.40503 3.90495 3.40503 3.78779 3.28787L1.01205 0.512132C0.823064 0.323142 0.956914 0 1.22419 0H6.77566Z", fill: "#6E6F7A" })));
 exports.CaretDownIcon = (0, styled_components_1.default)(Icon).attrs(() => ({

package/lib/icons/CaretUpIcon/CaretUpIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import type { IconProps } from '@redocly/theme/icons/types';
 export declare const CaretUpIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 } & {