@redocly/theme 0.56.0-next.9 → 0.56.0

package/lib/components/Button/Button.d.ts

@@ -13,13 +13,13 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     size?: ButtonSize;
     extraClass?: string;
     to?: string;
+    external?: boolean;
     icon?: JSX.Element;
     iconPosition?: 'left' | 'right';
     title?: string;
     tabIndex?: number;
     onClick?: (e?: any) => void;
     ref?: React.Ref<HTMLButtonElement>;
-    type?: 'button' | 'submit' | 'reset';
 }
 export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;
 export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, ButtonProps, never>;

package/lib/components/Button/Button.js

@@ -55,6 +55,7 @@ const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
 `;
 function generateClassName({ variant = 'secondary', tone = 'default', size = 'medium', extraClass = '', }) {
     const classNames = [
+        'button',
         extraClass,
         `button-tone-${tone}`,
         `button-variant-${variant}`,
@@ -161,7 +162,7 @@ const ButtonComponent = (props) => {
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { ButtonSize } from '../../components/Button/Button';
+type ButtonGroupVariant = 'outlined';
+type ButtonGroupProps = {
+    variant?: ButtonGroupVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;
+export {};

package/lib/components/Button/ButtonGroup.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = ButtonGroup;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function ButtonGroup(props) {
+    const { variant = 'outlined', className = '', children, size = 'medium' } = props;
+    return (react_1.default.createElement(ButtonGroupWrapper, { "data-component-name": "Button/ButtonGroup", className: `button-group-${variant} button-group-size-${size} ${className}` }, children));
+}
+const ButtonGroupWrapper = styled_components_1.default.div `
+  display: flex;
+  line-height: var(--button-line-height);
+
+  .button {
+    border-radius: 0;
+  }
+
+  & > .button:first-child,
+  *:first-child > .button {
+    border-top-left-radius: var(--button-border-radius);
+    border-bottom-left-radius: var(--button-border-radius);
+  }
+
+  & > .button:last-child,
+  *:last-child > .button {
+    border-top-right-radius: var(--button-border-radius);
+    border-bottom-right-radius: var(--button-border-radius);
+  }
+
+  & > .button:not(:first-child),
+  *:not(:first-child) > .button {
+    border-left: none;
+  }
+`;
+//# sourceMappingURL=ButtonGroup.js.map

package/lib/components/Button/variables.js

@@ -93,9 +93,12 @@ exports.button = (0, styled_components_1.css) `
     * @tokens Button size
     */
 
-  .button-size-small {
+  .button-size-small,
+  .button-group-size-small .button {
+    --button-font-size: var(--font-size-base);
     --button-border-radius: var(--border-radius);
     --button-padding: 1px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
     
     --button-icon-size: 14px;
     --button-icon-padding: 5px; /* Padding for small buttons with only icon */
@@ -103,11 +106,25 @@ exports.button = (0, styled_components_1.css) `
     --button-icon-right-padding: 1px 10px 1px var(--spacing-sm); /* Padding for small buttons with icon on the right */
   }
 
-  .button-size-large {
+  .button-size-medium,
+  .button-group-size-medium .button {
+    --button-font-size: var(--font-size-base);
+    --button-border-radius: var(--border-radius-md);
+    --button-padding: 5px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
+
+    --button-icon-size: 16px;
+    --button-icon-padding: var(--spacing-xs); /* Padding for buttons with only icon */
+    --button-icon-left-padding: 5px var(--spacing-base) 5px 14px; /* Padding for buttons with icon on the left */
+    --button-icon-right-padding: 5px 14px 5px var(--spacing-base); /* Padding for buttons with icon on the right */
+  }
+
+  .button-size-large,
+  .button-group-size-large .button {
     --button-font-size: var(--font-size-lg); // @presenter FontSize
-    --button-line-height: var(--line-height-lg); // @presenter LineHeight
-    --border-radius: var(--border-radius-lg);
+    --button-border-radius: var(--border-radius-md);
     --button-padding: var(--spacing-xs) var(--spacing-md);
+    --button-line-height: var(--line-height-lg); // @presenter LineHeight
     
     --button-icon-size: 18px;
     --button-icon-padding: 11px; /* Padding for large buttons with only icon */
@@ -155,7 +172,8 @@ exports.button = (0, styled_components_1.css) `
     --button-border-color-danger-pressed: transparent;
   }
 
-  .button-variant-outlined {
+  .button-variant-outlined,
+  .button-group-outlined .button {
     --button-color: var(--button-content-color-custom); // @presenter Color
     --button-color-hover: var(--button-content-color-custom-hover); // @presenter Color
     --button-color-active: var(--button-content-color-custom-hover); // @presenter Color
@@ -165,6 +183,15 @@ exports.button = (0, styled_components_1.css) `
     --button-bg-color-disabled: transparent; // @presenter Color
     --button-border-width: 1px; 
     --button-border-width-disabled: 1px;
+    --button-bg-color: transparent; // @presenter Color
+    --button-border-color-disabled: var(--color-warm-grey-2); // @presenter Color
+    --button-border-color-danger: var(--color-raspberry-6); // @presenter Color
+    --button-border-color-danger-hover: var(--color-raspberry-7); // @presenter Color
+    --button-border-color-danger-pressed: var(--color-raspberry-8); // @presenter Color
+  }
+
+  .button-group-outlined .button {
+    --button-bg-color-hover: var(--color-hover-base); // @presenter Color
   }
 
   .button-variant-text {

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/CodeBlock/CodeBlock.d.ts

@@ -8,7 +8,8 @@ export type CodeBlockProps = {
     header?: CodeBlockControlsProps;
     dataTestId?: string;
     className?: string;
-    tabs?: FileTabs;
+    tabs?: CodeBlockTabItems;
+    dropdown?: CodeBlockDropdownItems;
     withLineNumbers?: boolean;
     startLineNumber?: number;
     highlightedHtml?: string;
@@ -24,12 +25,21 @@ type UnstableExternalCodeSample = {
     label?: string;
     get: (source: ExternalSource) => string;
 };
-export type FileTabs = {
-    files: {
+export type CodeBlockTabItems = {
+    items: {
         name: string;
+        lang?: string;
     }[];
-    handleTabSwitch: (name: string) => void;
-    activeTabName: string;
+    onChange: (name: string) => void;
+    value: string;
+};
+export type CodeBlockDropdownItems = {
+    items: {
+        name: string;
+        lang?: string;
+    }[];
+    onChange: (name: string | string[]) => void;
+    value: string;
 };
 type ExternalSource = {
     sample: UnstableExternalCodeSample;
@@ -38,5 +48,5 @@ type ExternalSource = {
     properties?: any;
     operation?: any;
 };
-export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents, children, ...rest }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
+export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, dropdown, hideCodeColors, wrapContents, children, ...rest }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
 export {};

package/lib/components/CodeBlock/CodeBlock.js

@@ -47,7 +47,7 @@ const CodeBlockContainer_1 = require("../../components/CodeBlock/CodeBlockContai
 const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControls");
 function CodeBlock(_a) {
     var _b, _c, _d, _e, _f, _g;
-    var { lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children } = _a, rest = __rest(_a, ["lang", "source", "externalSource", "header", "dataTestId", "codeBlockRef", "highlightedHtml", "withLineNumbers", "startLineNumber", "className", "codeBlockMaxHeight", "tabs", "hideCodeColors", "wrapContents", "children"]);
+    var { lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, dropdown, hideCodeColors, wrapContents = false, children } = _a, rest = __rest(_a, ["lang", "source", "externalSource", "header", "dataTestId", "codeBlockRef", "highlightedHtml", "withLineNumbers", "startLineNumber", "className", "codeBlockMaxHeight", "tabs", "dropdown", "hideCodeColors", "wrapContents", "children"]);
     const [sourceCode, setSourceCode] = (0, react_1.useState)((_d = (source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)))) !== null && _d !== void 0 ? _d : '');
     const { useCodeHighlight } = (0, hooks_1.useThemeHooks)();
     const { highlight } = useCodeHighlight() || {};
@@ -77,7 +77,7 @@ function CodeBlock(_a) {
     const controls = (header === null || header === void 0 ? void 0 : header.controls) && Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: Object.assign(Object.assign({}, (_e = header === null || header === void 0 ? void 0 : header.controls) === null || _e === void 0 ? void 0 : _e.report), { props: reportButton.props }), copy: ((_f = header === null || header === void 0 ? void 0 : header.controls) === null || _f === void 0 ? void 0 : _f.copy) ? Object.assign(Object.assign({}, (_g = header === null || header === void 0 ? void 0 : header.controls) === null || _g === void 0 ? void 0 : _g.copy), { data: sourceCode }) : undefined });
     return (react_1.default.createElement(CodeBlockWrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
         react_1.default.createElement(ContainerWrapper, null,
-            react_1.default.createElement(CodeBlockControls_1.CodeBlockControls, { tabs: tabs, className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
+            react_1.default.createElement(CodeBlockControls_1.CodeBlockControls, { tabs: tabs, dropdown: dropdown, className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
             react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { ref: codeBlockRef, withLineNumbers: withLineNumbers, dangerouslySetInnerHTML: highlightedCode
                     ? {
                         __html: highlightedCode,

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockDropdownItems, CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockControlsProps = {
     children?: React.ReactNode;
     className?: string;
     title?: React.ReactNode | string;
     controls?: ControlItems | false;
-    tabs?: FileTabs;
+    tabs?: CodeBlockTabItems;
+    dropdown?: CodeBlockDropdownItems;
 };
 type ControlItems = {
     copy?: CopyControlProps;
@@ -33,5 +34,5 @@ type CopyControlProps = ControlProps & {
     handleOutside?: boolean;
 };
 export type ControlItemType = 'text' | 'icon';
-export declare function CodeBlockControls({ children, className, title, controls, tabs, }: CodeBlockControlsProps): JSX.Element | null;
+export declare function CodeBlockControls({ children, className, title, controls, tabs, dropdown, }: CodeBlockControlsProps): JSX.Element | null;
 export {};

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -16,7 +16,8 @@ const MinimizeIcon_1 = require("../../icons/MinimizeIcon/MinimizeIcon");
 const SelectIcon_1 = require("../../icons/SelectIcon/SelectIcon");
 const WarningSquareIcon_1 = require("../../icons/WarningSquareIcon/WarningSquareIcon");
 const Button_1 = require("../../components/Button/Button");
-function CodeBlockControls({ children, className, title, controls, tabs, }) {
+const CodeBlockDropdown_1 = require("../../components/CodeBlock/CodeBlockDropdown");
+function CodeBlockControls({ children, className, title, controls, tabs, dropdown, }) {
     var _a, _b, _c, _d, _e;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -30,11 +31,12 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
         deselect: null,
         report: null,
     };
-    const isEmptyTitle = !title && !tabs;
+    const isEmptyTitle = !title && !tabs && !dropdown;
     const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
         title && react_1.default.createElement(Title, null, title),
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
+            dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
             report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.report.tooltipText", placement: "top" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
             expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.expand.tooltipText", placement: "top" },
@@ -61,7 +63,8 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
 }
 const ContainerWrapper = styled_components_1.default.div `
   display: grid;
-  justify-content: end;
+  flex-direction: row;
+  align-items: center;
   gap: var(--spacing-sm);
   font-size: var(--code-block-controls-font-size);
   font-family: var(--code-block-controls-font-family);
@@ -74,13 +77,12 @@ const ContainerWrapper = styled_components_1.default.div `
   z-index: 1;
   ${({ $isEmptyTitle }) => $isEmptyTitle &&
     `
-      grid-template-columns: 1fr;
-      padding-left: var(--spacing-xxs);
       position: absolute;
       right: 0;
       width: auto;
       border: none;
       background-color: transparent;
+      grid-template-columns: 1fr;
       margin: 0;
     `}
 `;
@@ -90,6 +92,7 @@ const Title = styled_components_1.default.span `
   color: var(--code-block-controls-text-color);
   width: 100%;
   font-weight: var(--code-block-controls-font-weight);
+  padding-left: var(--spacing-xs);
 `;
 const ControlsWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/CodeBlock/CodeBlockDropdown.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'react';
+import type { CodeBlockDropdownItems } from '../../components/CodeBlock/CodeBlock';
+export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element;

package/lib/components/CodeBlock/CodeBlockDropdown.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockDropdown = CodeBlockDropdown;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const Button_1 = require("../../components/Button/Button");
+const ChevronSortIcon_1 = require("../../icons/ChevronSortIcon/ChevronSortIcon");
+const NoneIcon_1 = require("../../icons/NoneIcon/NoneIcon");
+const utils_1 = require("../../core/utils");
+function CodeBlockDropdown({ items, onChange, value }) {
+    const activeItem = items.find((item) => item.name === value) || items[0];
+    const icon = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) ? (0, utils_1.getFileIconByLanguage)(activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) : null;
+    return (react_1.default.createElement(StyledDropdown, { alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronSortIcon_1.ChevronSortIcon, null), iconPosition: "right", variant: "text", size: "small" },
+            icon,
+            activeItem.name) },
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item) => {
+            const icon = (0, utils_1.getFileIconByLanguage)(item.lang || '');
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.lang, onAction: () => onChange(item.name), active: item.name === activeItem.name, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
+        }))));
+}
+const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  margin-left: auto;
+  --icon-size: 18px;
+  --button-color: var(--text-color-secondary);
+  button.button-size-small {
+    --button-icon-size: 18px;
+  }
+`;
+//# sourceMappingURL=CodeBlockDropdown.js.map

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
-import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockTabsProps = {
-    tabs: FileTabs;
+    tabs: CodeBlockTabItems;
 };
 export declare function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -28,9 +28,9 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
-const DocumentBlankIcon_1 = require("../../icons/DocumentBlankIcon/DocumentBlankIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
+const get_file_icon_1 = require("../../core/utils/get-file-icon");
 function CodeBlockTabs({ tabs }) {
     const containerRef = (0, react_1.useRef)(null);
     const tabRefs = (0, react_1.useRef)([]);
@@ -40,18 +40,27 @@ function CodeBlockTabs({ tabs }) {
         tabRefs,
     });
     (0, react_1.useEffect)(() => {
-        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === tabs.activeTabName);
+        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === tabs.value);
         if (activeTab) {
             activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
         }
-    }, [tabs.activeTabName]);
+    }, [tabs.value]);
     return (react_1.default.createElement(CodeBlockTabsWrapper, { ref: containerRef, "data-component-name": "CodeBlock/CodeBlockTabs" },
         react_1.default.createElement(ShadowWrapper, null,
-            react_1.default.createElement(Tabs, null, tabs.files.map(({ name }, i) => (react_1.default.createElement(Tab, { ref: (el) => {
-                    tabRefs.current[i] = el;
-                }, "data-name": name, active: name === tabs.activeTabName, key: name, onClick: () => tabs.handleTabSwitch(name) },
-                react_1.default.createElement(DocumentBlankIcon_1.DocumentBlankIcon, null),
-                name))))),
+            react_1.default.createElement(Tabs, null, tabs.items.map(({ name, lang }, i) => {
+                var _a;
+                const ext = (_a = name.match(/\.([^.]+)$/)) === null || _a === void 0 ? void 0 : _a[1];
+                const fileIcon = lang
+                    ? (0, get_file_icon_1.getFileIconByLanguage)(lang)
+                    : ext
+                        ? (0, get_file_icon_1.getFileIconByExt)(ext)
+                        : null;
+                return (react_1.default.createElement(Tab, { ref: (el) => {
+                        tabRefs.current[i] = el;
+                    }, "data-name": name, active: name === tabs.value, key: name + i, onClick: () => tabs.onChange(name) },
+                    fileIcon,
+                    name));
+            }))),
         showControls && (react_1.default.createElement(Controls, null,
             react_1.default.createElement(ControlButton, { size: "small", onClick: handlePrevTab, "data-testid": "prev-button" },
                 react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null)),
@@ -61,7 +70,6 @@ function CodeBlockTabs({ tabs }) {
 const CodeBlockTabsWrapper = styled_components_1.default.div `
   display: flex;
   overflow: hidden;
-  padding: var(--spacing-xxs) 0;
 `;
 const Controls = styled_components_1.default.div `
   display: flex;
@@ -98,6 +106,7 @@ const Tabs = styled_components_1.default.div `
   }
 `;
 const Tab = styled_components_1.default.button `
+  --icon-size: 18px;
   display: inline-flex;
   align-items: center;
 

package/lib/components/CodeBlock/variables.js

@@ -75,7 +75,7 @@ exports.code = (0, styled_components_1.css) `
   --code-block-controls-border: 1px solid var(--border-color-secondary); // @presenter Border
   --code-block-icon-controls-bg-color: var(--code-block-controls-bg-color);
   --code-block-text-controls-bg-color: var(--code-block-controls-bg-color);
-  --code-block-controls-padding: var(--spacing-unit) var(--spacing-unit) var(--spacing-unit) var(--spacing-base);
+  --code-block-controls-padding: var(--spacing-xxs);
   --code-block-controls-height: 20px;
   --code-block-controls-width: 20px;
 

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 `
+  padding-top: var(--dropdown-menu-margin-top);
   position: absolute;
   top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
   bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};

package/lib/components/Dropdown/DropdownMenu.js

@@ -25,6 +25,10 @@ const DropdownMenuWrapper = styled_components_1.default.ul `
   line-height: var(--dropdown-menu-line-height);
   color: var(--dropdown-menu-text-color);
 
+  /* Make sure the spacing is not overriden by the markdown list styles */
+  --md-list-margin: 0;
+  --md-list-left-padding: var(--dropdown-menu-padding);
+
   margin: 0;
   min-width: var(--dropdown-menu-min-width);
   max-width: var(--dropdown-menu-max-width);

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,10 +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 GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function FooterItem({ item, iconsOnly, className }) {
-    var _a, _b;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
@@ -23,9 +22,7 @@ function FooterItem({ item, iconsOnly, className }) {
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
     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 },
-            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` }))) : null,
+            react_1.default.createElement(GenericIcon_1.GenericIcon, { 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))));
 }
@@ -36,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)()};
   }
@@ -257,8 +257,8 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     }
   }
 
-  ul,
-  ol {
+  ul.md,
+  ol.md {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);