@redocly/theme 0.58.0-next.4 → 0.58.0-next.5

package/lib/components/Catalog/Catalog.js

@@ -27,7 +27,7 @@ const customCatalogOptionsCasing = (str) => {
         if (index === 0 && word.toLowerCase() === 'api') {
             return 'API';
         }
-        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+        return word[0].toUpperCase() + word.slice(1);
     })
         .join(' ');
 };

package/lib/components/Catalog/CatalogEntityIcon.d.ts

@@ -1,7 +1,9 @@
 import { JSX } from 'react';
+import { UiAccessibleConfig } from '@redocly/config';
 export type CatalogEntityIconProps = {
     entityType: string;
     defaultColor?: boolean;
     forceColor?: string;
+    entitiesCatalogConfig?: UiAccessibleConfig['entitiesCatalog'];
 };
 export declare function CatalogEntityIcon({ entityType, defaultColor, forceColor, }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -11,22 +11,39 @@ const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
 const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
 const NetworkIcon_1 = require("../../icons/NetworkIcon/NetworkIcon");
 const MoleculesIcon_1 = require("../../icons/MoleculesIcon/MoleculesIcon");
+const Image_1 = require("../../components/Image/Image");
+const core_1 = require("../../core");
+const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
-const getEntityIcon = ({ entityType, defaultColor, forceColor }) => {
-    const iconColor = forceColor !== null && forceColor !== void 0 ? forceColor : (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType));
-    const entityIconMap = {
-        service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-        domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
-        team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
-        user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
-        'api-description': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-        'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
-        'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
-    };
-    return entityIconMap[entityType];
+const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogConfig, }) => {
+    var _a, _b;
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        const iconColor = forceColor !== null && forceColor !== void 0 ? forceColor : (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType));
+        const entityIconMap = {
+            service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+            domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
+            team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
+            user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
+            'api-description': react_1.default.createElement(NoteIcon_1.NoteIcon, { color: iconColor }),
+            'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
+            'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
+        };
+        return entityIconMap[entityType];
+    }
+    const iconConfig = (_b = (_a = entitiesCatalogConfig === null || entitiesCatalogConfig === void 0 ? void 0 : entitiesCatalogConfig.entityTypes) === null || _a === void 0 ? void 0 : _a[entityType]) === null || _b === void 0 ? void 0 : _b.icon;
+    if ((iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src) || (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet)) {
+        return (react_1.default.createElement(Image_1.Image, { src: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src, srcSet: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet, alt: `${entityType} icon`, width: "16", height: "16" }));
+    }
+    return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: "var(--catalog-entity-icon-color)" }); // @TODO: add default icon
 };
 function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
-    const icon = getEntityIcon({ entityType, defaultColor, forceColor });
+    const themeConfig = (0, core_1.useThemeConfig)();
+    const icon = getEntityIcon({
+        entityType,
+        defaultColor,
+        forceColor,
+        entitiesCatalogConfig: themeConfig.entitiesCatalog,
+    });
     if (!icon) {
         throw new Error(`Unhandled entity type: ${entityType}`);
     }

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -7,6 +7,7 @@ exports.CatalogEntityTypeIcon = CatalogEntityTypeIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogEntityIcon_1 = require("../../components/Catalog/CatalogEntityIcon");
+const core_1 = require("../../core");
 function CatalogEntityTypeIcon({ entityType, defaultColor = false, }) {
     return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColor: defaultColor },
         react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: defaultColor })));
@@ -18,13 +19,25 @@ const IconContainer = styled_components_1.default.div `
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-bg-color)'
-    : `var(--catalog-entity-bg-color-${entityType})`};
+  background-color: ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+        return 'var(--catalog-entity-bg-color)';
+    }
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-bg-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-bg-color-custom)';
+}};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-border-color)'
-    : `var(--catalog-entity-border-color-${entityType})`};
+    ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+        return 'var(--catalog-entity-border-color)';
+    }
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-border-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-border-color-custom)';
+}};
 `;
 //# sourceMappingURL=CatalogEntityTypeIcon.js.map

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const core_1 = require("../../core");
 const entityTagColorMap = {
     service: 'blue',
     domain: 'grass',
@@ -33,8 +34,13 @@ function CatalogEntityTypeTag({ entityType }) {
 const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   font-size: var(--font-size-base);
   background-color: transparent;
-  text-transform: lowercase;
-  border: 1px solid ${({ entityType }) => `var(--catalog-entity-border-color-${entityType})`};
-  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+  text-transform: none;
+  border: 1px solid
+    ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ? 'var(--catalog-entity-border-color-custom)'
+    : `var(--catalog-entity-border-color-${entityType})`};
+  color: ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ? 'var(--catalog-entity-icon-color-custom)'
+    : `var(--catalog-entity-icon-color-${entityType})`};
 `;
 //# sourceMappingURL=CatalogEntityTypeTag.js.map

package/lib/components/Catalog/variables.js

@@ -132,6 +132,10 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
   --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);
 
+  --catalog-entity-icon-color-custom: var(--color-persian-green-8);
+  --catalog-entity-border-color-custom: var(--color-persian-green-5);
+  --catalog-entity-bg-color-custom: var(--color-persian-green-1);
+
   /**
     * @tokens Catalog tags
     */

package/lib/components/Tooltip/Tooltip.js

@@ -91,15 +91,13 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
         }
     }, [isOpened, placement, updateTooltipPosition]);
     (0, react_1.useEffect)(() => {
-        if (isControlled && !disabled) {
-            if (isOpen) {
-                handleOpen();
-            }
-            else {
-                handleClose();
-            }
+        if (isOpen && !disabled) {
+            handleOpen();
+        }
+        else {
+            handleClose();
         }
-    }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
+    }, [isOpen, handleOpen, handleClose, disabled]);
     const controllers = !isControlled &&
         !disabled && {
         onMouseEnter: handleOpen,
@@ -228,7 +226,7 @@ const TooltipBody = styled_components_1.default.span `
   display: inline-block;
 
   padding: var(--tooltip-padding);
-  max-width: var(--tooltip-max-width);
+  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 function TooltipWrapper({ children, tip, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
-    const tooltip = (0, hooks_1.useControl)();
+    const tooltip = (0, hooks_1.useControl)(false);
     const handleMouseEnter = () => {
         if (showOnHover && !disabled) {
             tooltip.handleOpen();

package/lib/core/constants/catalog.d.ts

@@ -1,6 +1,6 @@
 import type { EntityRelationType } from '../types/catalog';
 export declare const CATALOG_TAG_MAX_LENGTH = 15;
-export declare const ENTITY_RELATION_TYPES: readonly ["partOf", "hasParts", "creates", "createdBy", "owns", "ownedBy", "implements", "implementedBy", "dependsOn", "dependencyOf", "uses", "usedBy", "produces", "consumes", "linksTo", "supersedes", "supersededBy", "compatibleWith", "extends", "extendedBy", "relatesTo", "hasMember", "memberOf", "triggers", "triggeredBy"];
+export declare const PREDEFINED_ENTITY_TYPES: string[];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;
 export declare const relationTypeMap: Record<EntityRelationType, string>;
 export declare enum GraphHandleType {

package/lib/core/constants/catalog.js

@@ -1,33 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.PREDEFINED_ENTITY_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
 exports.CATALOG_TAG_MAX_LENGTH = 15;
-exports.ENTITY_RELATION_TYPES = [
-    'partOf',
-    'hasParts',
-    'creates',
-    'createdBy',
-    'owns',
-    'ownedBy',
-    'implements',
-    'implementedBy',
-    'dependsOn',
-    'dependencyOf',
-    'uses',
-    'usedBy',
-    'produces',
-    'consumes',
-    'linksTo',
-    'supersedes',
-    'supersededBy',
-    'compatibleWith',
-    'extends',
-    'extendedBy',
-    'relatesTo',
-    'hasMember',
-    'memberOf',
-    'triggers',
-    'triggeredBy',
+exports.PREDEFINED_ENTITY_TYPES = [
+    'service',
+    'domain',
+    'team',
+    'user',
+    'api-description',
+    'data-schema',
+    'api-operation',
 ];
 exports.reverseRelationMap = {
     partOf: 'hasParts',

package/lib/core/hooks/use-control.js

@@ -2,10 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControl = void 0;
 const react_1 = require("react");
+const DEFAULT_CONTROL_OPEN_DELAY = 300;
 const useControl = (initialVal = false) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(initialVal);
-    const handleOpen = (0, react_1.useCallback)(() => setIsOpened(true), []);
-    const handleClose = (0, react_1.useCallback)(() => setIsOpened(false), []);
+    const timeoutRef = (0, react_1.useRef)(null);
+    const clearOpenTimer = (0, react_1.useCallback)(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+    }, []);
+    const handleOpen = (0, react_1.useCallback)(() => {
+        clearOpenTimer();
+        timeoutRef.current = setTimeout(() => {
+            setIsOpened(true);
+        }, DEFAULT_CONTROL_OPEN_DELAY);
+    }, [clearOpenTimer]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        clearOpenTimer();
+        setIsOpened(false);
+    }, [clearOpenTimer]);
     return {
         isOpened,
         handleOpen,

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

@@ -9,6 +9,7 @@ export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';
 export { breakpoints } from '../utils/media-css';
 export { isPrimitive } from '../utils/args-typecheck';
+export { ClipboardService } from '../utils/clipboard-service';
 export { getUserAgent } from '../utils/get-user-agent';
 export { useFocusTrap } from '../hooks/use-focus-trap';
 export { useThemeHooks } from '../hooks/use-theme-hooks';
@@ -20,4 +21,3 @@ export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
-export { ENTITY_RELATION_TYPES } from '../constants/catalog';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ENTITY_RELATION_TYPES = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -20,6 +20,8 @@ var media_css_1 = require("../utils/media-css");
 Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return media_css_1.breakpoints; } });
 var args_typecheck_1 = require("../utils/args-typecheck");
 Object.defineProperty(exports, "isPrimitive", { enumerable: true, get: function () { return args_typecheck_1.isPrimitive; } });
+var clipboard_service_1 = require("../utils/clipboard-service");
+Object.defineProperty(exports, "ClipboardService", { enumerable: true, get: function () { return clipboard_service_1.ClipboardService; } });
 var get_user_agent_1 = require("../utils/get-user-agent");
 Object.defineProperty(exports, "getUserAgent", { enumerable: true, get: function () { return get_user_agent_1.getUserAgent; } });
 var use_focus_trap_1 = require("../hooks/use-focus-trap");
@@ -45,6 +47,4 @@ Object.defineProperty(exports, "isNotNull", { enumerable: true, get: function ()
 Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return type_guards_1.isObject; } });
 var ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 Object.defineProperty(exports, "ThemeDataContext", { enumerable: true, get: function () { return ThemeDataContext_1.ThemeDataContext; } });
-var catalog_1 = require("../constants/catalog");
-Object.defineProperty(exports, "ENTITY_RELATION_TYPES", { enumerable: true, get: function () { return catalog_1.ENTITY_RELATION_TYPES; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/global.js

@@ -773,6 +773,25 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
 
   // @tokens End
+
+  /**
+    * @tokens OpenAPI Schema Catalog Link
+   */
+
+  --schema-catalog-link-margin-bottom: var(--spacing-lg);
+  --schema-catalog-link-padding: 2px;
+  --schema-catalog-link-border-radius: var(--border-radius-md);
+  --schema-catalog-link-background-color: var(--layer-color);
+  --schema-catalog-link-color: var(--color-purple-7);
+
+  --schema-catalog-link-share-icon-color: var(--color-purple-7);
+  --schema-catalog-link-share-icon-background-color: var(--color-purple-1);
+  --schema-catalog-link-share-icon-border-radius: var(--border-radius-md);
+  --schema-catalog-link-share-icon-wrapper-size: var(--spacing-xl);
+
+  --schema-catalog-link-text-color: var(--text-color-primary);
+
+  // @tokens End
 `;
 const badges = (0, styled_components_1.css) `
   /**

package/lib/core/types/catalog.d.ts

@@ -1,7 +1,7 @@
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+import { ENTITY_RELATION_TYPES } from '@redocly/config';
 import type { CatalogFilterConfig } from '../../config';
-import { ENTITY_RELATION_TYPES } from '../constants/catalog';
 export type SortOption = 'title' | '-title' | 'type' | '-type';
 export type UseCatalogResponse = {
     filters: ResolvedFilter[];

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/NoteIcon/NoteIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const NoteIcon: 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/NoteIcon/NoteIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoteIcon = 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({ xmlns: "http://www.w3.org/2000/svg", width: "8", height: "12", viewBox: "0 0 8 12", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M7.6375 3.4875L5.0125 0.8625C4.9375 0.7875 4.8625 0.75 4.75 0.75H1C0.5875 0.75 0.25 1.0875 0.25 1.5V10.5C0.25 10.9125 0.5875 11.25 1 11.25H7C7.4125 11.25 7.75 10.9125 7.75 10.5V3.75C7.75 3.6375 7.7125 3.5625 7.6375 3.4875ZM4.75 1.65L6.85 3.75H4.75V1.65ZM7 10.5H1V1.5H4V3.75C4 4.1625 4.3375 4.5 4.75 4.5H7V10.5Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M6.25 8.25H1.75V9H6.25V8.25Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M6.25 6H1.75V6.75H6.25V6Z", fill: "currentColor" })));
+exports.NoteIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/NoteIcon/NoteIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=NoteIcon.js.map

package/lib/icons/ShareIcon/ShareIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ShareIcon: 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/ShareIcon/ShareIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareIcon = 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: "M11.5 10.0001C11.1257 10.002 10.7566 10.0879 10.42 10.2514C10.0834 10.415 9.78776 10.652 9.55497 10.9451L5.89997 8.6601C6.03318 8.23018 6.03318 7.77002 5.89997 7.3401L9.55497 5.0551C9.92594 5.51446 10.4475 5.82769 11.0273 5.93931C11.6071 6.05092 12.2077 5.95372 12.7227 5.66491C13.2377 5.37611 13.6339 4.91435 13.841 4.36143C14.0482 3.8085 14.0529 3.20011 13.8544 2.64402C13.656 2.08793 13.2671 1.62003 12.7567 1.32322C12.2462 1.0264 11.6472 0.919827 11.0657 1.02237C10.4843 1.12491 9.95785 1.42996 9.57975 1.88346C9.20164 2.33697 8.99626 2.90966 8.99997 3.5001C9.00233 3.72369 9.03599 3.94585 9.09997 4.1601L5.44497 6.4451C5.12229 6.03889 4.68124 5.74313 4.18295 5.5988C3.68465 5.45447 3.1538 5.46873 2.66398 5.63961C2.17415 5.81048 1.74961 6.1295 1.44921 6.55245C1.14881 6.9754 0.987427 7.48133 0.987427 8.0001C0.987427 8.51888 1.14881 9.0248 1.44921 9.44775C1.74961 9.8707 2.17415 10.1897 2.66398 10.3606C3.1538 10.5315 3.68465 10.5457 4.18295 10.4014C4.68124 10.2571 5.12229 9.96131 5.44497 9.5551L9.09997 11.8401C9.03599 12.0544 9.00233 12.2765 8.99997 12.5001C8.99997 12.9946 9.14659 13.4779 9.4213 13.889C9.696 14.3002 10.0864 14.6206 10.5433 14.8098C11.0001 14.999 11.5027 15.0485 11.9877 14.9521C12.4726 14.8556 12.9181 14.6175 13.2677 14.2679C13.6174 13.9182 13.8555 13.4728 13.9519 12.9878C14.0484 12.5029 13.9989 12.0002 13.8097 11.5434C13.6204 11.0866 13.3 10.6961 12.8889 10.4214C12.4778 10.1467 11.9944 10.0001 11.5 10.0001ZM11.5 2.0001C11.7966 2.0001 12.0867 2.08808 12.3333 2.2529C12.58 2.41772 12.7723 2.65199 12.8858 2.92608C12.9993 3.20017 13.029 3.50177 12.9711 3.79274C12.9133 4.08371 12.7704 4.35098 12.5606 4.56076C12.3509 4.77054 12.0836 4.9134 11.7926 4.97128C11.5016 5.02916 11.2 4.99945 10.9259 4.88592C10.6519 4.77239 10.4176 4.58013 10.2528 4.33346C10.0879 4.08678 9.99997 3.79677 9.99997 3.5001C9.99997 3.10228 10.158 2.72075 10.4393 2.43944C10.7206 2.15814 11.1021 2.0001 11.5 2.0001ZM3.49997 9.5001C3.2033 9.5001 2.91329 9.41213 2.66661 9.24731C2.41994 9.08248 2.22768 8.84822 2.11415 8.57413C2.00062 8.30004 1.97091 7.99844 2.02879 7.70747C2.08667 7.4165 2.22953 7.14922 2.43931 6.93944C2.64909 6.72966 2.91636 6.5868 3.20733 6.52892C3.49831 6.47105 3.79991 6.50075 4.074 6.61428C4.34808 6.72781 4.58235 6.92007 4.74717 7.16675C4.912 7.41342 4.99997 7.70343 4.99997 8.0001C4.99997 8.39793 4.84193 8.77946 4.56063 9.06076C4.27933 9.34207 3.89779 9.5001 3.49997 9.5001ZM11.5 14.0001C11.2033 14.0001 10.9133 13.9121 10.6666 13.7473C10.4199 13.5825 10.2277 13.3482 10.1142 13.0741C10.0006 12.8 9.97091 12.4984 10.0288 12.2075C10.0867 11.9165 10.2295 11.6492 10.4393 11.4394C10.6491 11.2297 10.9164 11.0868 11.2073 11.0289C11.4983 10.971 11.7999 11.0008 12.074 11.1143C12.3481 11.2278 12.5824 11.4201 12.7472 11.6667C12.912 11.9134 13 12.2034 13 12.5001C13 12.8979 12.8419 13.2795 12.5606 13.5608C12.2793 13.8421 11.8978 14.0001 11.5 14.0001Z" })));
+exports.ShareIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ShareIcon/ShareIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ShareIcon.js.map

package/lib/index.d.ts

@@ -219,6 +219,7 @@ export * from './icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from './icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from './icons/WarningSquareIcon/WarningSquareIcon';
 export * from './icons/MenuIcon/MenuIcon';
+export * from './icons/NoteIcon/NoteIcon';
 export * from './icons/GlobalOutlinedIcon/GlobalOutlinedIcon';
 export * from './icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 export * from './icons/FaceNeutralIcon/FaceNeutralIcon';
@@ -257,6 +258,7 @@ export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
 export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
+export * from './icons/ShareIcon/ShareIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -272,6 +272,7 @@ __exportStar(require("./icons/MarkdownFullIcon/MarkdownFullIcon"), exports);
 __exportStar(require("./icons/DocumentBlankIcon/DocumentBlankIcon"), exports);
 __exportStar(require("./icons/WarningSquareIcon/WarningSquareIcon"), exports);
 __exportStar(require("./icons/MenuIcon/MenuIcon"), exports);
+__exportStar(require("./icons/NoteIcon/NoteIcon"), exports);
 __exportStar(require("./icons/GlobalOutlinedIcon/GlobalOutlinedIcon"), exports);
 __exportStar(require("./icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon"), exports);
 __exportStar(require("./icons/FaceNeutralIcon/FaceNeutralIcon"), exports);
@@ -310,6 +311,7 @@ __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
 __exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exports);
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
+__exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.4",
+  "version": "0.58.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.1",
-    "@redocly/config": "0.31.0"
+    "@redocly/config": "0.33.0",
+    "@redocly/realm-asyncapi-sdk": "0.4.0-next.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/Catalog.tsx

@@ -33,7 +33,7 @@ const customCatalogOptionsCasing = (str: string): string => {
       if (index === 0 && word.toLowerCase() === 'api') {
         return 'API';
       }
-      return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      return word[0].toUpperCase() + word.slice(1);
     })
     .join(' ');
 };

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -1,4 +1,5 @@
 import React, { JSX } from 'react';
+import { UiAccessibleConfig } from '@redocly/config';
 
 import { EntityType } from '@redocly/theme/core/types';
 import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
@@ -7,31 +8,58 @@ import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
 import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';
 import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
+import { Image } from '@redocly/theme/components/Image/Image';
+import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
+import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
   defaultColor?: boolean;
   forceColor?: string;
+  entitiesCatalogConfig?: UiAccessibleConfig['entitiesCatalog'];
 };
 
 const getIconColor = (entityType: EntityType) => `var(--catalog-entity-icon-color-${entityType})`;
 
-const getEntityIcon = ({ entityType, defaultColor, forceColor }: CatalogEntityIconProps) => {
-  const iconColor =
-    forceColor ??
-    (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType as EntityType));
-
-  const entityIconMap: Record<EntityType, JSX.Element> = {
-    service: <CodeIcon color={iconColor} />,
-    domain: <GraphIcon color={iconColor} />,
-    team: <PeopleIcon color={iconColor} />,
-    user: <UserIcon color={iconColor} />,
-    'api-description': <CodeIcon color={iconColor} />,
-    'data-schema': <NetworkIcon color={iconColor} />,
-    'api-operation': <MoleculesIcon color={iconColor} />,
-  };
-
-  return entityIconMap[entityType as EntityType];
+const getEntityIcon = ({
+  entityType,
+  defaultColor,
+  forceColor,
+  entitiesCatalogConfig,
+}: CatalogEntityIconProps) => {
+  if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+    const iconColor =
+      forceColor ??
+      (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType as EntityType));
+
+    const entityIconMap: Record<EntityType, JSX.Element> = {
+      service: <CodeIcon color={iconColor} />,
+      domain: <GraphIcon color={iconColor} />,
+      team: <PeopleIcon color={iconColor} />,
+      user: <UserIcon color={iconColor} />,
+      'api-description': <NoteIcon color={iconColor} />,
+      'data-schema': <NetworkIcon color={iconColor} />,
+      'api-operation': <MoleculesIcon color={iconColor} />,
+    };
+
+    return entityIconMap[entityType as EntityType];
+  }
+
+  const iconConfig = entitiesCatalogConfig?.entityTypes?.[entityType]?.icon;
+
+  if (iconConfig?.src || iconConfig?.srcSet) {
+    return (
+      <Image
+        src={iconConfig?.src}
+        srcSet={iconConfig?.srcSet}
+        alt={`${entityType} icon`}
+        width="16"
+        height="16"
+      />
+    );
+  }
+
+  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
 };
 
 export function CatalogEntityIcon({
@@ -39,7 +67,14 @@ export function CatalogEntityIcon({
   defaultColor = false,
   forceColor,
 }: CatalogEntityIconProps): JSX.Element {
-  const icon = getEntityIcon({ entityType, defaultColor, forceColor });
+  const themeConfig = useThemeConfig();
+
+  const icon = getEntityIcon({
+    entityType,
+    defaultColor,
+    forceColor,
+    entitiesCatalogConfig: themeConfig.entitiesCatalog,
+  });
 
   if (!icon) {
     throw new Error(`Unhandled entity type: ${entityType}`);

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeIconProps = {
   entityType: string;
@@ -30,14 +31,24 @@ const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) =>
-    defaultColor
-      ? 'var(--catalog-entity-bg-color)'
-      : `var(--catalog-entity-bg-color-${entityType})`};
+  background-color: ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+      return 'var(--catalog-entity-bg-color)';
+    }
+    if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+      return `var(--catalog-entity-bg-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-bg-color-custom)';
+  }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) =>
-      defaultColor
-        ? 'var(--catalog-entity-border-color)'
-        : `var(--catalog-entity-border-color-${entityType})`};
+    ${({ defaultColor, entityType }) => {
+      if (defaultColor) {
+        return 'var(--catalog-entity-border-color)';
+      }
+      if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-border-color-${entityType})`;
+      }
+      return 'var(--catalog-entity-border-color-custom)';
+    }};
 `;

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { EntityType } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeTagProps = {
   entityType: string;
@@ -43,7 +44,14 @@ export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps):
 const EntityTypeTagWrapper = styled(Tag)<{ entityType: EntityType }>`
   font-size: var(--font-size-base);
   background-color: transparent;
-  text-transform: lowercase;
-  border: 1px solid ${({ entityType }) => `var(--catalog-entity-border-color-${entityType})`};
-  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+  text-transform: none;
+  border: 1px solid
+    ${({ entityType }) =>
+      !PREDEFINED_ENTITY_TYPES.includes(entityType)
+        ? 'var(--catalog-entity-border-color-custom)'
+        : `var(--catalog-entity-border-color-${entityType})`};
+  color: ${({ entityType }) =>
+    !PREDEFINED_ENTITY_TYPES.includes(entityType)
+      ? 'var(--catalog-entity-icon-color-custom)'
+      : `var(--catalog-entity-icon-color-${entityType})`};
 `;

package/src/components/Catalog/variables.ts

@@ -130,6 +130,10 @@ export const catalog = css`
   --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
   --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);
 
+  --catalog-entity-icon-color-custom: var(--color-persian-green-8);
+  --catalog-entity-border-color-custom: var(--color-persian-green-5);
+  --catalog-entity-bg-color-custom: var(--color-persian-green-1);
+
   /**
     * @tokens Catalog tags
     */

package/src/components/Tooltip/Tooltip.tsx

@@ -98,14 +98,12 @@ export function TooltipComponent({
   }, [isOpened, placement, updateTooltipPosition]);
 
   useEffect(() => {
-    if (isControlled && !disabled) {
-      if (isOpen) {
-        handleOpen();
-      } else {
-        handleClose();
-      }
+    if (isOpen && !disabled) {
+      handleOpen();
+    } else {
+      handleClose();
     }
-  }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
+  }, [isOpen, handleOpen, handleClose, disabled]);
 
   const controllers = !isControlled &&
     !disabled && {
@@ -268,7 +266,7 @@ const TooltipBody = styled.span<
   display: inline-block;
 
   padding: var(--tooltip-padding);
-  max-width: var(--tooltip-max-width);
+  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;

package/src/components/Tooltip/TooltipWrapper.tsx

@@ -26,7 +26,7 @@ export function TooltipWrapper({
   showOnHover = true,
   disabled = false,
 }: TooltipWrapperProps): JSX.Element {
-  const tooltip = useControl();
+  const tooltip = useControl(false);
 
   const handleMouseEnter = (): void => {
     if (showOnHover && !disabled) {

package/src/core/constants/catalog.ts

@@ -2,33 +2,15 @@ import type { EntityRelationType } from '../types/catalog';
 
 export const CATALOG_TAG_MAX_LENGTH = 15;
 
-export const ENTITY_RELATION_TYPES = [
-  'partOf',
-  'hasParts',
-  'creates',
-  'createdBy',
-  'owns',
-  'ownedBy',
-  'implements',
-  'implementedBy',
-  'dependsOn',
-  'dependencyOf',
-  'uses',
-  'usedBy',
-  'produces',
-  'consumes',
-  'linksTo',
-  'supersedes',
-  'supersededBy',
-  'compatibleWith',
-  'extends',
-  'extendedBy',
-  'relatesTo',
-  'hasMember',
-  'memberOf',
-  'triggers',
-  'triggeredBy',
-] as const;
+export const PREDEFINED_ENTITY_TYPES = [
+  'service',
+  'domain',
+  'team',
+  'user',
+  'api-description',
+  'data-schema',
+  'api-operation',
+];
 
 export const reverseRelationMap: Record<EntityRelationType, EntityRelationType> = {
   partOf: 'hasParts',

package/src/core/hooks/use-control.ts

@@ -1,4 +1,6 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
+
+const DEFAULT_CONTROL_OPEN_DELAY = 300;
 
 export type UseControlReturnType = {
   isOpened: boolean;
@@ -8,9 +10,25 @@ export type UseControlReturnType = {
 
 export const useControl = (initialVal = false): UseControlReturnType => {
   const [isOpened, setIsOpened] = useState<boolean>(initialVal);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearOpenTimer = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }, []);
+
+  const handleOpen = useCallback(() => {
+    clearOpenTimer();
+    timeoutRef.current = setTimeout(() => {
+      setIsOpened(true);
+    }, DEFAULT_CONTROL_OPEN_DELAY);
+  }, [clearOpenTimer]);
 
-  const handleOpen = useCallback(() => setIsOpened(true), []);
-  const handleClose = useCallback(() => setIsOpened(false), []);
+  const handleClose = useCallback(() => {
+    clearOpenTimer();
+    setIsOpened(false);
+  }, [clearOpenTimer]);
 
   return {
     isOpened,

package/src/core/openapi/index.ts

@@ -22,6 +22,7 @@ export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';
 export { breakpoints } from '../utils/media-css';
 export { isPrimitive } from '../utils/args-typecheck';
+export { ClipboardService } from '../utils/clipboard-service';
 export { getUserAgent } from '../utils/get-user-agent';
 export { useFocusTrap } from '../hooks/use-focus-trap';
 export { useThemeHooks } from '../hooks/use-theme-hooks';
@@ -33,4 +34,3 @@ export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
-export { ENTITY_RELATION_TYPES } from '../constants/catalog';

package/src/core/styles/global.ts

@@ -780,6 +780,25 @@ const apiReferenceDocs = css`
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
 
   // @tokens End
+
+  /**
+    * @tokens OpenAPI Schema Catalog Link
+   */
+
+  --schema-catalog-link-margin-bottom: var(--spacing-lg);
+  --schema-catalog-link-padding: 2px;
+  --schema-catalog-link-border-radius: var(--border-radius-md);
+  --schema-catalog-link-background-color: var(--layer-color);
+  --schema-catalog-link-color: var(--color-purple-7);
+
+  --schema-catalog-link-share-icon-color: var(--color-purple-7);
+  --schema-catalog-link-share-icon-background-color: var(--color-purple-1);
+  --schema-catalog-link-share-icon-border-radius: var(--border-radius-md);
+  --schema-catalog-link-share-icon-wrapper-size: var(--spacing-xl);
+
+  --schema-catalog-link-text-color: var(--text-color-primary);
+
+  // @tokens End
 `;
 
 const badges = css`

package/src/core/types/catalog.ts

@@ -1,10 +1,9 @@
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+import { ENTITY_RELATION_TYPES } from '@redocly/config';
 
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
-import { ENTITY_RELATION_TYPES } from '../constants/catalog';
-
 export type SortOption = 'title' | '-title' | 'type' | '-type';
 
 export type UseCatalogResponse = {

package/src/core/types/l10n.ts

@@ -280,6 +280,9 @@ export type TranslationKey =
   | 'openapi.requiredScopes'
   | 'openapi.unsupportedLanguage'
   | 'openapi.failedToGenerateCodeSample'
+  | 'openapi.schemaCatalogLink.title'
+  | 'openapi.schemaCatalogLink.copyButtonTooltip'
+  | 'openapi.schemaCatalogLink.copiedTooltip'
   | 'asyncapi.download.description.title'
   | 'asyncapi.info.title'
   | 'graphql.queries'

package/src/icons/NoteIcon/NoteIcon.tsx

@@ -0,0 +1,35 @@
+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
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="12"
+    viewBox="0 0 8 12"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M7.6375 3.4875L5.0125 0.8625C4.9375 0.7875 4.8625 0.75 4.75 0.75H1C0.5875 0.75 0.25 1.0875 0.25 1.5V10.5C0.25 10.9125 0.5875 11.25 1 11.25H7C7.4125 11.25 7.75 10.9125 7.75 10.5V3.75C7.75 3.6375 7.7125 3.5625 7.6375 3.4875ZM4.75 1.65L6.85 3.75H4.75V1.65ZM7 10.5H1V1.5H4V3.75C4 4.1625 4.3375 4.5 4.75 4.5H7V10.5Z"
+      fill="currentColor"
+    />
+    <path d="M6.25 8.25H1.75V9H6.25V8.25Z" fill="currentColor" />
+    <path d="M6.25 6H1.75V6.75H6.25V6Z" fill="currentColor" />
+  </svg>
+);
+
+export const NoteIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/NoteIcon/NoteIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ShareIcon/ShareIcon.tsx

@@ -0,0 +1,23 @@
+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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.5 10.0001C11.1257 10.002 10.7566 10.0879 10.42 10.2514C10.0834 10.415 9.78776 10.652 9.55497 10.9451L5.89997 8.6601C6.03318 8.23018 6.03318 7.77002 5.89997 7.3401L9.55497 5.0551C9.92594 5.51446 10.4475 5.82769 11.0273 5.93931C11.6071 6.05092 12.2077 5.95372 12.7227 5.66491C13.2377 5.37611 13.6339 4.91435 13.841 4.36143C14.0482 3.8085 14.0529 3.20011 13.8544 2.64402C13.656 2.08793 13.2671 1.62003 12.7567 1.32322C12.2462 1.0264 11.6472 0.919827 11.0657 1.02237C10.4843 1.12491 9.95785 1.42996 9.57975 1.88346C9.20164 2.33697 8.99626 2.90966 8.99997 3.5001C9.00233 3.72369 9.03599 3.94585 9.09997 4.1601L5.44497 6.4451C5.12229 6.03889 4.68124 5.74313 4.18295 5.5988C3.68465 5.45447 3.1538 5.46873 2.66398 5.63961C2.17415 5.81048 1.74961 6.1295 1.44921 6.55245C1.14881 6.9754 0.987427 7.48133 0.987427 8.0001C0.987427 8.51888 1.14881 9.0248 1.44921 9.44775C1.74961 9.8707 2.17415 10.1897 2.66398 10.3606C3.1538 10.5315 3.68465 10.5457 4.18295 10.4014C4.68124 10.2571 5.12229 9.96131 5.44497 9.5551L9.09997 11.8401C9.03599 12.0544 9.00233 12.2765 8.99997 12.5001C8.99997 12.9946 9.14659 13.4779 9.4213 13.889C9.696 14.3002 10.0864 14.6206 10.5433 14.8098C11.0001 14.999 11.5027 15.0485 11.9877 14.9521C12.4726 14.8556 12.9181 14.6175 13.2677 14.2679C13.6174 13.9182 13.8555 13.4728 13.9519 12.9878C14.0484 12.5029 13.9989 12.0002 13.8097 11.5434C13.6204 11.0866 13.3 10.6961 12.8889 10.4214C12.4778 10.1467 11.9944 10.0001 11.5 10.0001ZM11.5 2.0001C11.7966 2.0001 12.0867 2.08808 12.3333 2.2529C12.58 2.41772 12.7723 2.65199 12.8858 2.92608C12.9993 3.20017 13.029 3.50177 12.9711 3.79274C12.9133 4.08371 12.7704 4.35098 12.5606 4.56076C12.3509 4.77054 12.0836 4.9134 11.7926 4.97128C11.5016 5.02916 11.2 4.99945 10.9259 4.88592C10.6519 4.77239 10.4176 4.58013 10.2528 4.33346C10.0879 4.08678 9.99997 3.79677 9.99997 3.5001C9.99997 3.10228 10.158 2.72075 10.4393 2.43944C10.7206 2.15814 11.1021 2.0001 11.5 2.0001ZM3.49997 9.5001C3.2033 9.5001 2.91329 9.41213 2.66661 9.24731C2.41994 9.08248 2.22768 8.84822 2.11415 8.57413C2.00062 8.30004 1.97091 7.99844 2.02879 7.70747C2.08667 7.4165 2.22953 7.14922 2.43931 6.93944C2.64909 6.72966 2.91636 6.5868 3.20733 6.52892C3.49831 6.47105 3.79991 6.50075 4.074 6.61428C4.34808 6.72781 4.58235 6.92007 4.74717 7.16675C4.912 7.41342 4.99997 7.70343 4.99997 8.0001C4.99997 8.39793 4.84193 8.77946 4.56063 9.06076C4.27933 9.34207 3.89779 9.5001 3.49997 9.5001ZM11.5 14.0001C11.2033 14.0001 10.9133 13.9121 10.6666 13.7473C10.4199 13.5825 10.2277 13.3482 10.1142 13.0741C10.0006 12.8 9.97091 12.4984 10.0288 12.2075C10.0867 11.9165 10.2295 11.6492 10.4393 11.4394C10.6491 11.2297 10.9164 11.0868 11.2073 11.0289C11.4983 10.971 11.7999 11.0008 12.074 11.1143C12.3481 11.2278 12.5824 11.4201 12.7472 11.6667C12.912 11.9134 13 12.2034 13 12.5001C13 12.8979 12.8419 13.2795 12.5606 13.5608C12.2793 13.8421 11.8978 14.0001 11.5 14.0001Z" />
+  </svg>
+);
+
+export const ShareIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ShareIcon/ShareIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -245,6 +245,7 @@ export * from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from '@redocly/theme/icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';
 export * from '@redocly/theme/icons/MenuIcon/MenuIcon';
+export * from '@redocly/theme/icons/NoteIcon/NoteIcon';
 export * from '@redocly/theme/icons/GlobalOutlinedIcon/GlobalOutlinedIcon';
 export * from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 export * from '@redocly/theme/icons/FaceNeutralIcon/FaceNeutralIcon';
@@ -283,6 +284,7 @@ export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
 export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
+export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';