@redocly/theme 0.56.0-next.12 → 0.56.0-next.14

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

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
 import { BffCatalogEntityList } from '../../core/types';
-import { CatalogSwitcherItem } from '../../core';
+import { CatalogSwitcherItem } from '../../core/types/catalog';
 export type CatalogProps = {
     catalogConfig: CatalogEntityConfig;
     entitiesTypes: string[];

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -13,13 +13,13 @@ const ArrowRightIcon_1 = require("../../../icons/ArrowRightIcon/ArrowRightIcon")
 const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
 const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
-const core_1 = require("../../../core");
+const utils_1 = require("../../../core/utils");
 const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const pathPrefix = (0, core_1.getPathPrefix)();
+    const pathPrefix = (0, utils_1.getPathPrefix)();
     return (react_1.default.createElement(CatalogCardWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCard", onClick: () => {
             window.location.assign(`${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`);
             telemetry.send({ type: 'catalog_item.clicked' });

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

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Select } from '../../components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '../../core';
+import { CatalogSwitcherItem, SortOption } from '../../core/types/catalog';
 export type CatalogSelectorProps = {
     catalogSwitcherItems: CatalogSwitcherItem[];
     setSearchQuery: (query: string) => void;

package/lib/components/Catalog/CatalogSelector.js

@@ -9,13 +9,14 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const Select_1 = require("../../components/Select/Select");
-const core_1 = require("../../core");
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption, }) {
-    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const pathPrefix = (0, core_1.getPathPrefix)();
+    const pathPrefix = (0, utils_1.getPathPrefix)();
     const options = catalogSwitcherItems.map((item) => ({
         value: item.slug,
         element: translate(item.labelTranslationKey),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CatalogViewMode } from '../../core';
+import { CatalogViewMode } from '../../core/types/catalog';
 export type CatalogViewModeToggleProps = {
     viewMode: CatalogViewMode;
     onViewModeChange: (mode: CatalogViewMode) => void;

package/lib/components/Dropdown/Dropdown.js

@@ -78,6 +78,7 @@ const DropdownWrapper = styled_components_1.default.div `
   text-decoration: none;
 `;
 const ChildrenWrapper = styled_components_1.default.div `
+  margin-top: var(--dropdown-menu-margin-top);
   position: absolute;
   top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};

package/lib/components/Dropdown/variables.js

@@ -11,6 +11,7 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
 
+  --dropdown-menu-margin-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;
   --dropdown-menu-max-width: 424px;
   --dropdown-menu-max-height: 300px;

package/lib/components/Footer/FooterItem.js

@@ -9,11 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
-const Image_1 = require("../../components/Image/Image");
 const utils_1 = require("../../core/utils");
-const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
+const UniversalIcon_1 = require("../../icons/UniversalIcon/UniversalIcon");
 function FooterItem({ item, iconsOnly, className }) {
-    var _a, _b;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
@@ -22,12 +20,9 @@ function FooterItem({ item, iconsOnly, className }) {
     }
     const hasIcon = Boolean(item.icon || item.srcSet);
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-    const resolvedIcon = (0, utils_1.resolveIcon)(item.icon);
-    const iconComponent = item.srcSet || resolvedIcon.type === 'link' ? (react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet, alt: item.label && item.label !== item.link
-            ? `${item.label} icon`
-            : `${(_b = (_a = (item.icon || item.srcSet)) === null || _a === void 0 ? void 0 : _a.split('/').pop()) === null || _b === void 0 ? void 0 : _b.split('.')[0]} icon` })) : resolvedIcon.type === 'font-awesome' ? (react_1.default.createElement(CDNIcon_1.CDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style })) : null;
     return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
-        hasIcon ? react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly }, iconComponent) : null,
+        hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
+            react_1.default.createElement(UniversalIcon_1.UniversalIcon, { icon: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,
         item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "10px" }) : null))));
 }
@@ -38,9 +33,9 @@ const FooterSeparator = styled_components_1.default.div `
   opacity: var(--footer-separator-item-opacity);
 `;
 const FooterLinkIcon = styled_components_1.default.div `
+  --icon-width: var(--footer-item-icon-width);
+  --icon-height: var(--footer-item-icon-height);
   display: inline-flex;
-  width: var(--footer-item-icon-width);
-  height: var(--footer-item-icon-height);
   margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
   vertical-align: middle;
   border: 1px solid var(--footer-item-icon-border-color);

package/lib/components/Footer/variables.js

@@ -28,8 +28,8 @@ exports.footer = (0, styled_components_1.css) `
   --footer-link-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --footer-link-padding-horizontal: 0;
 
-  --footer-item-icon-width: var(--spacing-lg); // @presenter Spacing
-  --footer-item-icon-height: var(--spacing-lg); // @presenter Spacing
+  --footer-item-icon-width: var(--spacing-base); // @presenter Spacing
+  --footer-item-icon-height: var(--spacing-base); // @presenter Spacing
   --footer-item-icon-margin-right: var(--spacing-sm); // @presenter Spacing
   --footer-item-icon-border-color: var(--border-color-primary); // @presenter Color
   --footer-item-icon-border-radius: 12px; // @presenter BorderRadius

package/lib/components/Markdown/Markdown.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
-const theme_helpers_1 = require("../../core/utils/theme-helpers");
+const utils_1 = require("../../core/utils");
 const baseTable_1 = require("../../components/Markdown/styles/baseTable");
 const links_1 = require("../../components/Markdown/styles/links");
 const headingAnchor_1 = require("../../components/Markdown/styles/headingAnchor");
@@ -130,37 +130,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   }
 
   h1.md {
-    ${(0, theme_helpers_1.typography)('h1')};
+    ${(0, utils_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h2.md {
-    ${(0, theme_helpers_1.typography)('h2')};
+    ${(0, utils_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h3.md {
-    ${(0, theme_helpers_1.typography)('h3')};
+    ${(0, utils_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h4.md {
-    ${(0, theme_helpers_1.typography)('h4')};
+    ${(0, utils_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h5.md {
-    ${(0, theme_helpers_1.typography)('h5')};
+    ${(0, utils_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h6.md {
-    ${(0, theme_helpers_1.typography)('h6')};
+    ${(0, utils_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }

package/lib/components/Menu/MenuItem.js

@@ -36,7 +36,7 @@ const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 const Badge_1 = require("../../components/Badge/Badge");
-const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
+const UniversalIcon_1 = require("../../icons/UniversalIcon/UniversalIcon");
 function MenuItem(props) {
     var _a;
     const { item, depth, className, onClick } = props;
@@ -74,11 +74,9 @@ function MenuItem(props) {
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const resolvedIcon = (0, utils_1.resolveIcon)(item.icon);
-    const iconComponent = resolvedIcon.type === 'link' ? (react_1.default.createElement(MenuItemIcon, { src: item.icon })) : resolvedIcon.type === 'font-awesome' ? (react_1.default.createElement(MenuItemCDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style })) : null;
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
-        iconComponent,
+        react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
             react_1.default.createElement(MenuItemLabel, null,
                 react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
@@ -243,17 +241,9 @@ const MenuItemSubLabel = styled_components_1.default.div `
   font-size: var(--menu-item-sublabel-font-size);
   font-family: var(--menu-item-sublabel-font-family);
 `;
-const MenuItemIcon = styled_components_1.default.img `
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
-  margin: var(--menu-item-icon-margin);
-  border-radius: var(--menu-item-icon-border-radius);
-  flex-shrink: 0;
-  overflow: hidden;
-`;
-const MenuItemCDNIcon = (0, styled_components_1.default)(CDNIcon_1.CDNIcon) `
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
+const MenuItemIcon = (0, styled_components_1.default)(UniversalIcon_1.UniversalIcon) `
+  --icon-width: var(--menu-item-icon-size);
+  --icon-height: var(--menu-item-icon-size);
   margin: var(--menu-item-icon-margin);
   flex-shrink: 0;
   overflow: hidden;

package/lib/components/Menu/variables.js

@@ -71,7 +71,7 @@ exports.menu = (0, styled_components_1.css) `
    * @tokens Menu item icons
    */
   --menu-item-icon-size: var(--spacing-base);
-  --menu-item-icon-margin: 0px;
+  --menu-item-icon-margin: 0 var(--spacing-xxs) 0 0;
   --menu-item-icon-border-radius: 100%;
 
   --menu-item-external-icon-size: 10px;

package/lib/components/Navbar/NavbarItem.js

@@ -1,34 +1,11 @@
 "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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarItem = NavbarItem;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
@@ -37,8 +14,7 @@ const hooks_1 = require("../../core/hooks");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
-const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
-const utils_2 = require("../../core/utils");
+const UniversalIcon_1 = require("../../icons/UniversalIcon/UniversalIcon");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -51,10 +27,8 @@ function NavbarItem({ navItem, className }) {
     const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
-    const resolvedIcon = (0, utils_2.resolveIcon)(item.icon);
-    const iconComponent = resolvedIcon.type === 'link' ? (react_1.default.createElement(NavbarIcon, { url: item.icon })) : resolvedIcon.type === 'font-awesome' ? (react_1.default.createElement(NavbarCDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style })) : null;
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
-        iconComponent,
+        react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
     if (navItem.items) {
@@ -64,7 +38,7 @@ function NavbarItem({ navItem, className }) {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
             return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey, external: item.external },
-                react_1.default.createElement(NavbarIcon, { url: item.icon }),
+                react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
                 react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
                 item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
         });
@@ -104,25 +78,11 @@ const NavbarLabel = styled_components_1.default.span `
   cursor: pointer;
   vertical-align: middle;
 `;
-const NavbarIcon = styled_components_1.default.i `
-  ${({ url }) => url &&
-    (0, styled_components_1.css) `
-      background-image: url('${url}');
-      width: var(--navbar-item-icon-width);
-      height: var(--navbar-item-icon-height);
-      display: inline-block;
-      background-size: contain;
-      margin-right: var(--navbar-item-icon-margin-right);
-      vertical-align: middle;
-      background-position: center;
-      background-repeat: no-repeat;
-    `}
-`;
-const NavbarCDNIcon = (0, styled_components_1.default)(CDNIcon_1.CDNIcon) `
-  width: var(--navbar-item-icon-width);
-  height: var(--navbar-item-icon-height);
+const NavbarIcon = (0, styled_components_1.default)(UniversalIcon_1.UniversalIcon) `
+  --icon-width: var(--navbar-item-icon-width);
+  --icon-height: var(--navbar-item-icon-height);
   margin-right: var(--navbar-item-icon-margin-right);
-}`;
+`;
 const ExternalLinkIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
   margin-left: 5px;
 `;

package/lib/components/Navbar/variables.js

@@ -37,8 +37,8 @@ exports.navbar = (0, styled_components_1.css) `
   --navbar-item-bg-color-hover: var(--bg-color);
   --navbar-item-bottom-border-hover: none;
 
-  --navbar-item-icon-width: 1.5em; // @presenter Spacing
-  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-width: 1.25em; // @presenter Spacing
+  --navbar-item-icon-height: 1.25em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   --navbar-logo-height: var(--logo-height);

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

@@ -7,6 +7,7 @@ export type SidebarNavItem = {
     sublabel?: string;
     subLabelTranslationKey?: string;
     icon?: string;
+    srcSet?: string;
     link?: string;
     type?: string;
     httpVerb?: string;

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

@@ -24,10 +24,7 @@ function resolveIcon(icon) {
         return { type: 'invalid', reason: 'Icon must be a non-empty string' };
     }
     const trimmed = icon.trim();
-    const isLink = trimmed.startsWith('/') ||
-        trimmed.startsWith('./') ||
-        trimmed.startsWith('../') ||
-        /^https?:\/\//.test(trimmed);
+    const isLink = trimmed.match(/\.(svg|png|jpg|jpeg|gif|ico|webp)$/) || /^https?:\/\//.test(trimmed);
     if (isLink) {
         return { type: 'link', value: trimmed };
     }

package/lib/ext/configure.d.ts

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

package/lib/icons/CDNIcon/CDNIcon.js

@@ -28,21 +28,21 @@ const Icon = (props) => {
             backgroundImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
             backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
-            backgroundSize: '100%',
+            backgroundSize: 'contain',
         }
         : {
             backgroundColor: color ? (0, utils_1.getCssColorVariable)(color) : 'currentColor',
             maskImage: `url(${cdnUrl}/${typeSegment}${name}.svg)`,
             maskRepeat: 'no-repeat',
             maskPosition: 'center',
-            maskSize: '100%',
+            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-size, 16px)'};
-  width: ${({ size }) => size || 'var(--icon-size, 16px)'};
+  height: ${({ size }) => size || 'var(--icon-height, 16px)'};
+  width: ${({ size }) => size || 'var(--icon-width, 16px)'};
 `;
 //# sourceMappingURL=CDNIcon.js.map

package/lib/icons/UniversalIcon/UniversalIcon.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface UniversalIconProps {
+    icon: string | React.ReactNode;
+    srcSet?: string;
+    rawContent?: string;
+    size?: string;
+    color?: string;
+    alt?: string;
+    className?: string;
+}
+export declare function UniversalIcon({ icon, srcSet, rawContent, size, color, alt, className, }: UniversalIconProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;

package/lib/icons/UniversalIcon/UniversalIcon.js

@@ -0,0 +1,61 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UniversalIcon = UniversalIcon;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
+const utils_1 = require("../../core/utils");
+const InlineSvg_1 = require("../../markdoc/components/InlineSvg/InlineSvg");
+const Image_1 = require("../../components/Image/Image");
+function UniversalIcon({ icon, srcSet, rawContent, size, color, alt, className, }) {
+    if (srcSet) {
+        return React.createElement(Image_1.Image, { srcSet: srcSet, alt: alt, className: className });
+    }
+    const resolvedIcon = icon && typeof icon === 'string' ? (0, utils_1.resolveIcon)(icon) : null;
+    const iconComponent = rawContent ? (React.createElement(IconSvg, { fileRawContent: rawContent, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'link' ? (React.createElement(IconImg, { src: resolvedIcon.value, alt: alt, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'font-awesome' ? (React.createElement(CDNIcon_1.CDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style, size: size, color: color, className: className })) : (icon);
+    return iconComponent;
+}
+const IconImg = styled_components_1.default.img `
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+  object-fit: cover;
+`;
+const IconSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
+  display: inline-block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--icon-color, currentColor);
+  }
+`;
+//# sourceMappingURL=UniversalIcon.js.map

package/lib/index.d.ts

@@ -254,6 +254,7 @@ export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from './icons/UniversalIcon/UniversalIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -307,6 +307,7 @@ __exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
+__exportStar(require("./icons/UniversalIcon/UniversalIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/layouts/CodeWalkthroughLayout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeWalkthroughLayout = CodeWalkthroughLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const core_1 = require("../core");
+const utils_1 = require("../core/utils");
 function CodeWalkthroughLayout({ className, children, }) {
     return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/CodeWalkthroughLayout", className: className },
         react_1.default.createElement(ContentWrapper, null, children)));
@@ -61,7 +61,7 @@ const ContentWrapper = styled_components_1.default.section `
     /* Full-width styling for all .code-walkthroughs */
     .code-walkthrough {
       width: 100%;
-      max-width: ${core_1.breakpoints.max};
+      max-width: ${utils_1.breakpoints.max};
       margin-left: auto;
       margin-right: auto;
     }

package/lib/markdoc/components/Cards/CardIcon.js

@@ -6,28 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardIcon = CardIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const InlineSvg_1 = require("../../../markdoc/components/InlineSvg/InlineSvg");
+const UniversalIcon_1 = require("../../../icons/UniversalIcon/UniversalIcon");
 function CardIcon({ variant, src, rawContent, position }) {
-    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position }, rawContent ? react_1.default.createElement(CardSvg, { fileRawContent: rawContent }) : react_1.default.createElement(CardImg, { src: src })));
+    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position },
+        react_1.default.createElement(UniversalIcon_1.UniversalIcon, { icon: src, rawContent: rawContent })));
 }
-const CardImg = styled_components_1.default.img `
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-  object-fit: cover;
-`;
-const CardSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: var(--card-icon-color);
-  }
-`;
 const CardIconWrapper = styled_components_1.default.div `
+  --icon-width: var(--card-icon-width);
+  --icon-height: var(--card-icon-height);
+  --icon-color: var(--card-icon-color);
+
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
   justify-content: center;

package/lib/markdoc/components/Tabs/Tab.d.ts

@@ -10,6 +10,7 @@ export type TabProps = {
     onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     onClick: () => void;
     icon?: React.ReactNode;
+    iconRawContent?: string;
 };
-export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }: TabProps): JSX.Element;
+export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }: TabProps): JSX.Element;
 export declare const Tab: import("styled-components").StyledComponent<typeof TabComponent, any, {}, never>;

package/lib/markdoc/components/Tabs/Tab.js

@@ -8,17 +8,20 @@ exports.TabComponent = TabComponent;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
-function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }) {
+const UniversalIcon_1 = require("../../../icons/UniversalIcon/UniversalIcon");
+function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
         react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
             react_1.default.createElement(LabelWrapper, null,
-                icon,
+                react_1.default.createElement(UniversalIcon_1.UniversalIcon, { icon: icon, rawContent: iconRawContent }),
                 label))));
 }
 const LabelWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: 4px;
+  --icon-width: var(--md-tabs-icon-size);
+  --icon-height: var(--md-tabs-icon-size);
 `;
 exports.Tab = (0, styled_components_1.default)(TabComponent) ``;
 //# sourceMappingURL=Tab.js.map

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

@@ -9,7 +9,7 @@ export type TabItemProps = {
     disable?: boolean;
     onClick?: () => void;
     children: React.ReactNode;
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | string;
 };
 type TabsProps = {
     children: React.ReactElement<TabItemProps>[];

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

@@ -98,6 +98,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
 
   --md-tabs-tab-focused-padding: var(--spacing-unit); // @presenter Spacing
 
+  --md-tabs-icon-size: 16px; // @presenter Spacing
+
   // @tokens End
   `;
 //# sourceMappingURL=variables.js.map

package/lib/markdoc/tags/card.js

@@ -14,7 +14,7 @@ exports.card = {
                 type: String,
                 resolver: 'link',
             },
-            icon: { type: String, resolver: 'inlineSvgOrImageLink' },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
             lineClamp: {
                 type: Number,
             },

package/lib/markdoc/tags/tab.js

@@ -6,6 +6,7 @@ exports.tab = {
         attributes: {
             label: { type: String, required: true },
             disable: { type: Boolean, default: false },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
         },
         render: 'div',
     },