@elastic/eui-docusaurus-theme 2.3.0 → 2.5.0-snapshot.1783939453438

package/lib/components/demo/actions_bar/actions_bar.d.ts

@@ -3,9 +3,10 @@ export interface DemoActionsBarProps {
     activeSource: DemoSourceMeta | null;
     sources: DemoSourceMeta[];
     extraFiles?: ExtraFiles;
+    previewWrapperSource?: string;
     isSourceOpen: boolean;
     setSourceOpen(isOpen: boolean): void;
     onClickReloadExample(): void;
     onClickCopyToClipboard(): void;
 }
-export declare const DemoActionsBar: ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, onClickReloadExample, onClickCopyToClipboard, }: DemoActionsBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DemoActionsBar: ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, previewWrapperSource, onClickReloadExample, onClickCopyToClipboard, }: DemoActionsBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/components/demo/actions_bar/actions_bar.js

@@ -28,7 +28,9 @@ const getDemoActionsBarStyles = (euiTheme) => {
     `,
     };
 };
-export const DemoActionsBar = ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, onClickReloadExample, onClickCopyToClipboard, }) => {
+export const DemoActionsBar = ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, previewWrapperSource, onClickReloadExample, onClickCopyToClipboard, }) => {
     const styles = useEuiMemoizedStyles(getDemoActionsBarStyles);
-    return (_jsxs(EuiFlexGroup, { alignItems: "center", css: styles.actionsBar, gutterSize: "s", children: [_jsx(EuiButton, { css: styles.button, onClick: () => setSourceOpen(!isSourceOpen), size: "s", color: "text", minWidth: false, children: isSourceOpen ? 'Hide source' : 'Show source' }), extraActions.map((ActionComponent) => (_jsx(ActionComponent, { sources: sources, extraFiles: extraFiles, activeSource: activeSource }))), _jsx(EuiToolTip, { content: "Copy to clipboard", children: _jsx(EuiButtonIcon, { size: "s", iconType: "copyClipboard", color: "text", onClick: onClickCopyToClipboard, "aria-label": "Copy code to clipboard" }) }), _jsx(EuiToolTip, { content: "Reload example", children: _jsx(EuiButtonIcon, { size: "s", iconType: "refresh", color: "text", onClick: onClickReloadExample, "aria-label": "Reload example" }) })] }));
+    const copyToClipboardLabel = 'Copy to clipboard';
+    const reloadExampleLabel = 'Reload example';
+    return (_jsxs(EuiFlexGroup, { alignItems: "center", css: styles.actionsBar, gutterSize: "s", children: [_jsx(EuiButton, { css: styles.button, onClick: () => setSourceOpen(!isSourceOpen), size: "s", color: "text", minWidth: false, children: isSourceOpen ? 'Hide source' : 'Show source' }), extraActions.map((ActionComponent) => (_jsx(ActionComponent, { sources: sources, extraFiles: extraFiles, previewWrapperSource: previewWrapperSource, activeSource: activeSource }, ActionComponent.displayName ?? ActionComponent.name))), _jsx(EuiToolTip, { content: copyToClipboardLabel, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { size: "s", iconType: "copy", color: "text", onClick: onClickCopyToClipboard, "aria-label": copyToClipboardLabel }) }), _jsx(EuiToolTip, { content: reloadExampleLabel, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { size: "s", iconType: "refresh", color: "text", onClick: onClickReloadExample, "aria-label": reloadExampleLabel }) })] }));
 };

package/lib/components/demo/codesandbox/get_parameters.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Encodes sandbox parameters for CodeSandbox's `define` API.
+ */
+export declare const getParameters: (parameters: unknown) => string;

package/lib/components/demo/codesandbox/get_parameters.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { compressToBase64 } from 'lz-string';
+/**
+ * Encodes sandbox parameters for CodeSandbox's `define` API.
+ */
+export const getParameters = (parameters) => {
+    return compressToBase64(JSON.stringify(parameters))
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_')
+        .replace(/=+$/, '');
+};

package/lib/components/demo/codesandbox/open_action.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
  * Side Public License, v 1.
  */
 import { useMemo } from 'react';
-import { getParameters } from 'codesandbox/lib/api/define';
+import { getParameters } from './get_parameters';
 import dedent from 'dedent';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { CodeSandboxIcon } from '../../codesandbox_icon';
@@ -32,7 +32,8 @@ const indexTsxSource = dedent `
     <EuiProvider cache={cache}>
       <Demo />
     </EuiProvider>
-  );`;
+  );
+`;
 const publicIndexHtmlSource = dedent `
   <head>
     <title>@elastic/eui component demo</title>
@@ -59,9 +60,21 @@ export const defaultCodeSandboxParameters = {
 const processTsxSource = (source) => {
     // jsxImportSource pragma is needed in CodeSandbox as it doesn't seem
     // to support that setting via tsconfig.json
-    return `/** @jsxImportSource @emotion/react */\n${source}`;
+    let processed = `/** @jsxImportSource @emotion/react */\n${source}`;
+    // Inject `@elastic/charts` CSS for demos that use the charts library,
+    // since CodeSandbox doesn't load it globally unlike the docs site
+    if (source.includes('@elastic/charts')) {
+        // Match the closing line of the @elastic/charts import (handles both
+        // single-line and multi-line imports, and both quote styles)
+        processed = processed.replace(/^(.*from ['"]@elastic\/charts['"];)$/m, [
+            '$1',
+            "import '@elastic/charts/dist/theme_only_light.css';",
+            "import '@elastic/charts/dist/theme_only_dark.css';",
+        ].join('\n'));
+    }
+    return processed;
 };
-export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => ({ extraFiles, activeSource }) => {
+export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => ({ extraFiles, activeSource, previewWrapperSource }) => {
     const parameters = useMemo(() => {
         const source = activeSource?.code || '';
         // Compute list of extra files that may be passed
@@ -75,6 +88,18 @@ export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => (
         return getParameters({
             files: {
                 ...defaultCodeSandboxParameters.files,
+                ...(previewWrapperSource
+                    ? {
+                        'index.tsx': {
+                            content: indexTsxSource
+                                .replace("import Demo from './demo';", "import Demo from './demo';\nimport PreviewWrapper from './preview_wrapper';")
+                                .replace('<Demo />', '<PreviewWrapper>\n      <Demo />\n    </PreviewWrapper>'),
+                        },
+                        'preview_wrapper.tsx': {
+                            content: processTsxSource(previewWrapperSource),
+                        },
+                    }
+                    : {}),
                 'demo.tsx': {
                     content: processTsxSource(source),
                 },
@@ -89,6 +114,7 @@ export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => (
                 ...codeSandboxFiles,
             },
         });
-    }, [activeSource, extraFiles]);
-    return (_jsxs("form", { action: "https://codesandbox.io/api/v1/sandboxes/define", method: "POST", target: "_blank", children: [_jsx("input", { type: "hidden", name: "parameters", value: parameters }), _jsx("input", { type: "hidden", name: "query", value: `module=/demo.tsx&view=split` }), _jsx(EuiToolTip, { content: "Open in CodeSandbox", children: _jsx(EuiButtonIcon, { type: "submit", size: "s", iconType: CodeSandboxIcon, color: "text", "aria-label": "Open in CodeSandbox" }) })] }));
+    }, [activeSource, extraFiles, previewWrapperSource]);
+    const openInCodeSandboxLabel = 'Open in CodeSandbox';
+    return (_jsxs("form", { action: "https://codesandbox.io/api/v1/sandboxes/define", method: "POST", target: "_blank", children: [_jsx("input", { type: "hidden", name: "parameters", value: parameters }), _jsx("input", { type: "hidden", name: "query", value: `module=/demo.tsx&view=split` }), _jsx(EuiToolTip, { content: openInCodeSandboxLabel, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { type: "submit", size: "s", iconType: CodeSandboxIcon, color: "text", "aria-label": openInCodeSandboxLabel }) })] }));
 };

package/lib/components/demo/demo.d.ts

@@ -45,5 +45,6 @@ export interface DemoProps extends PropsWithChildren {
     extraFiles?: ExtraFiles;
     previewPadding?: DemoPreviewProps['padding'];
     previewWrapper?: DemoPreviewProps['wrapperComponent'];
+    previewWrapperSource?: string;
 }
-export declare const Demo: ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen, previewPadding, previewWrapper, }: DemoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Demo: ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen, previewPadding, previewWrapper, previewWrapperSource, }: DemoProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/components/demo/demo.js

@@ -10,7 +10,7 @@ import { Children, useCallback, useMemo, useState, } from 'react';
 import { isElement } from 'react-is';
 import { LiveProvider } from 'react-live';
 import { themes as prismThemes } from 'prism-react-renderer';
-import { useEuiMemoizedStyles, copyToClipboard, } from '@elastic/eui';
+import { useEuiMemoizedStyles, copyToClipboard, useIsDarkMode, } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { demoDefaultScope } from '@theme/Demo/default_scope';
 import { DemoContext } from './context';
@@ -31,11 +31,13 @@ const getDemoStyles = (euiTheme) => ({
     word-break: break-word;
   `,
 });
-export const Demo = ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen = false, previewPadding, previewWrapper, }) => {
+export const Demo = ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen = false, previewPadding, previewWrapper, previewWrapperSource, }) => {
     const styles = useEuiMemoizedStyles(getDemoStyles);
+    const isDarkMode = useIsDarkMode();
     const [sources, setSources] = useState([]);
     const [isSourceOpen, setIsSourceOpen] = useState(_isSourceOpen);
     const activeSource = sources[0] || null;
+    const prismTheme = isDarkMode ? prismThemes.dracula : prismThemes.github;
     // liveProviderKey restarts the demo to its initial state
     const [liveProviderKey, setLiveProviderKey] = useState(0);
     const finalScope = useMemo(() => ({
@@ -52,7 +54,7 @@ export const Demo = ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen
     const onClickReloadExample = useCallback(() => {
         setLiveProviderKey((liveProviderKey) => liveProviderKey + 1);
     }, []);
-    return (_jsx("div", { css: styles.demo, children: _jsxs(DemoContext.Provider, { value: { sources, addSource }, children: [_jsxs(LiveProvider, { code: activeSource?.code || '', transformCode: demoCodeTransformer, theme: prismThemes.dracula, scope: finalScope, children: [_jsx(DemoPreview, { padding: previewPadding, wrapperComponent: previewWrapper }), _jsx(DemoActionsBar, { isSourceOpen: isSourceOpen, setSourceOpen: setIsSourceOpen, activeSource: activeSource, extraFiles: extraFiles, sources: sources, onClickCopyToClipboard: onClickCopyToClipboard, onClickReloadExample: onClickReloadExample }), isSourceOpen && _jsx(DemoEditor, {})] }, liveProviderKey), Children.map(children, (child, index) => {
+    return (_jsx("div", { css: styles.demo, children: _jsxs(DemoContext.Provider, { value: { sources, addSource }, children: [_jsxs(LiveProvider, { code: activeSource?.code || '', transformCode: demoCodeTransformer, theme: prismTheme, scope: finalScope, children: [_jsx(DemoPreview, { padding: previewPadding, wrapperComponent: previewWrapper }), _jsx(DemoActionsBar, { isSourceOpen: isSourceOpen, setSourceOpen: setIsSourceOpen, activeSource: activeSource, extraFiles: extraFiles, sources: sources, previewWrapperSource: previewWrapperSource, onClickCopyToClipboard: onClickCopyToClipboard, onClickReloadExample: onClickReloadExample }), isSourceOpen && _jsx(DemoEditor, {})] }, liveProviderKey), Children.map(children, (child, index) => {
                     if (isElement(child) && child.type === DemoSource) {
                         return child;
                     }

package/lib/components/demo/preview/preview.js

@@ -12,7 +12,7 @@ import { Fragment, } from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import { ErrorBoundaryErrorMessageFallback } from '@docusaurus/theme-common';
-import { useEuiTheme, euiPaddingSize, } from '@elastic/eui';
+import { useEuiTheme, EuiThemeProvider, euiPaddingSize, } from '@elastic/eui';
 const getPreviewStyles = (euiTheme) => ({
     previewWrapper: css `
     padding: var(--docs-demo-preview-padding);
@@ -32,5 +32,5 @@ export const DemoPreview = ({ padding = 'l', wrapperComponent: WrapperComponent
     const style = {
         '--docs-demo-preview-padding': paddingSize,
     };
-    return (_jsx(BrowserOnly, { fallback: _jsx(PreviewLoader, {}), children: () => (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { fallback: (params) => (_jsx(ErrorBoundaryErrorMessageFallback, { ...params })), children: _jsx("div", { css: styles.previewWrapper, style: style, children: _jsx(WrapperComponent, { children: _jsx(LivePreview, {}) }) }) }) })) }));
+    return (_jsx(BrowserOnly, { fallback: _jsx(PreviewLoader, {}), children: () => (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { fallback: (params) => (_jsx(ErrorBoundaryErrorMessageFallback, { ...params })), children: _jsx("div", { css: styles.previewWrapper, style: style, children: _jsx(EuiThemeProvider, { modify: { font: { lineHeightMultiplier: 1.5 } }, children: _jsx(WrapperComponent, { children: _jsx(LivePreview, {}) }) }) }) }) })) }));
 };

package/lib/components/navbar_item/index.d.ts

@@ -6,7 +6,7 @@ type SharedProps = {
     isSelected?: boolean;
 } & CommonProps;
 type Props = ExclusiveUnion<PropsForAnchor<SharedProps>, PropsForButton<SharedProps>>;
-export declare const getStyles: ({ euiTheme }: UseEuiTheme) => {
+export declare const getStyles: (euiThemeContext: UseEuiTheme) => {
     item: import("@emotion/react").SerializedStyles;
     navItem: import("@emotion/react").SerializedStyles;
     menuItem: import("@emotion/react").SerializedStyles;
@@ -14,6 +14,7 @@ export declare const getStyles: ({ euiTheme }: UseEuiTheme) => {
     disabled: import("@emotion/react").SerializedStyles;
     selected: import("@emotion/react").SerializedStyles;
     title: import("@emotion/react").SerializedStyles;
+    tooltipAnchor: import("@emotion/react").SerializedStyles;
 };
 export declare const NavbarItem: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/navbar_item/index.js

@@ -9,58 +9,66 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/reac
 import { useContext } from 'react';
 import { css } from '@emotion/react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import { EuiIcon, useEuiMemoizedStyles, } from '@elastic/eui';
+import { EuiIcon, EuiToolTip, useEuiMemoizedStyles, } from '@elastic/eui';
 import { AppThemeContext } from '../theme_context';
+import { getNavbarBreakpoint } from '../../theme/Navbar/breakpoint';
 // converted from css modules to Emotion
-export const getStyles = ({ euiTheme }) => ({
-    item: css `
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
+export const getStyles = (euiThemeContext) => {
+    const { euiTheme } = euiThemeContext;
+    const { desktopMediaQuery } = getNavbarBreakpoint(euiThemeContext);
+    return {
+        item: css `
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
 
-    -webkit-tap-highlight-color: transparent;
-    transition: background var(--ifm-transition-fast);
+      -webkit-tap-highlight-color: transparent;
+      transition: background var(--ifm-transition-fast);
 
-    &:hover {
-      background-color: ${euiTheme.components.buttons.backgroundTextHover};
-      color: currentColor;
-    }
-  `,
-    navItem: css `
-    justify-content: center;
-    width: ${euiTheme.size.xl};
-    height: ${euiTheme.size.xl};
-    border-radius: 50%;
-  `,
-    menuItem: css `
-    justify-content: flex-start;
-    gap: ${euiTheme.size.s};
-
-    @media (min-width: 997px) {
+      &:hover {
+        background-color: ${euiTheme.components.buttons.backgroundTextHover};
+        color: currentColor;
+      }
+    `,
+        navItem: css `
       justify-content: center;
       width: ${euiTheme.size.xl};
       height: ${euiTheme.size.xl};
       border-radius: 50%;
-    }
-  `,
-    darkMode: css `
-    &:hover {
-      color: currentColor;
-    }
-  `,
-    disabled: css `
-    cursor: not-allowed;
-  `,
-    selected: css `
-    background-color: ${euiTheme.colors.backgroundFilledText};
-    color: ${euiTheme.colors.textInverse};
-  `,
-    title: css `
-    @media (min-width: 997px) {
-      display: none;
-    }
-  `,
-});
+    `,
+        menuItem: css `
+      justify-content: flex-start;
+      gap: ${euiTheme.size.s};
+
+      ${desktopMediaQuery} {
+        justify-content: center;
+        width: ${euiTheme.size.xl};
+        height: ${euiTheme.size.xl};
+        border-radius: 50%;
+      }
+    `,
+        darkMode: css `
+      &:hover {
+        color: currentColor;
+      }
+    `,
+        disabled: css `
+      cursor: not-allowed;
+    `,
+        selected: css `
+      background-color: ${euiTheme.colors.backgroundFilledText};
+      color: ${euiTheme.colors.textInverse};
+    `,
+        title: css `
+      ${desktopMediaQuery} {
+        display: none;
+      }
+    `,
+        tooltipAnchor: css `
+      display: inline-flex;
+    `,
+    };
+};
 // using a type guard to ensure proper typing from ExclusiveUnion
 const isAnchorClick = (onClick, href) => href != null;
 export const NavbarItem = (props) => {
@@ -75,10 +83,12 @@ export const NavbarItem = (props) => {
         !isBrowser && styles.disabled,
         isSelected && styles.selected,
         isDarkMode && styles.darkMode,
+        css,
     ];
     const content = showLabel ? (_jsxs(_Fragment, { children: [_jsx(EuiIcon, { type: icon }), _jsx("span", { css: styles.title, children: title })] })) : (_jsx(EuiIcon, { type: icon }));
-    if (isAnchorClick(onClick, href)) {
-        return (_jsx("a", { href: href, target: target ?? '_blank', title: title, className: className, css: cssStyles, onClick: onClick, "aria-label": title, "aria-live": "polite", children: content }));
+    const control = isAnchorClick(onClick, href) ? (_jsx("a", { href: href, target: target ?? '_blank', className: className, css: cssStyles, onClick: onClick, "aria-label": title, "aria-live": "polite", children: content })) : (_jsx("button", { type: "button", disabled: !isBrowser, className: className, css: cssStyles, onClick: onClick, "aria-label": title, "aria-live": "polite", "aria-pressed": isSelected != null ? isSelected : undefined, children: content }));
+    if (!title) {
+        return control;
     }
-    return (_jsx("button", { type: "button", disabled: !isBrowser, className: className, css: cssStyles, onClick: onClick, title: title, "aria-label": title, "aria-live": "polite", "aria-pressed": isSelected != null ? isSelected : undefined, children: content }));
+    return (_jsx(EuiToolTip, { content: title, disableScreenReaderOutput: true, repositionOnScroll: true, anchorProps: { css: styles.tooltipAnchor }, children: control }));
 };

package/lib/components/version_switcher/index.js

@@ -66,7 +66,7 @@ export const VersionSwitcher = ({ ariaLabel, currentVersion, extraAction, previo
     if (!allVersions?.length)
         return null;
     const latestVersion = allVersions[0];
-    const button = (_jsxs(EuiButtonEmpty, { size: "s", color: "text", iconType: "arrowDown", iconSide: "right", css: styles.button, onClick: () => setPopoverOpen((isOpen) => !isOpen), "aria-label": `${pronounceVersion(currentVersion)}. Click to switch versions`, children: ["v", currentVersion] }));
+    const button = (_jsxs(EuiButtonEmpty, { size: "s", color: "text", iconType: "chevronSingleDown", iconSide: "right", css: styles.button, onClick: () => setPopoverOpen((isOpen) => !isOpen), "aria-label": `${pronounceVersion(currentVersion)}. Click to switch versions`, children: ["v", currentVersion] }));
     return (_jsx(EuiPopover, { isOpen: isPopoverOpen, closePopover: () => setPopoverOpen(false), button: button, repositionOnScroll: true, panelPaddingSize: "xs", "aria-label": ariaLabel, children: _jsx(FixedSizeList, { className: "eui-yScroll", itemCount: allVersions.length, itemSize: 24, height: 200, width: 120, innerElementType: "ul", children: ({ index, style }) => {
                 const version = allVersions[index];
                 const isCurrentVersion = version === currentVersion;
@@ -74,6 +74,6 @@ export const VersionSwitcher = ({ ariaLabel, currentVersion, extraAction, previo
                 const url = version === latestVersion
                     ? `${previousVersionUrl}/`
                     : `${previousVersionUrl}/v${version}/`;
-                return (_jsx(EuiListGroupItem, { css: styles.listItem, style: style, size: "xs", label: `v${version}`, "aria-label": screenReaderVersion, href: url, isActive: isCurrentVersion, color: isCurrentVersion ? 'primary' : 'text', extraAction: extraAction?.(version) }));
+                return (_jsx(EuiListGroupItem, { css: styles.listItem, style: style, label: `v${version}`, "aria-label": screenReaderVersion, href: url, isActive: isCurrentVersion, color: isCurrentVersion ? 'primary' : 'text', extraAction: extraAction?.(version) }));
             } }) }));
 };

package/lib/theme/Admonition/Types.js

@@ -9,11 +9,11 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import { EuiCallOut } from '@elastic/eui';
 const VARIANT_TO_PROPS_MAP = {
-    note: { iconType: 'paperClip', color: 'accent' },
+    note: { iconType: 'paperClip', color: 'primary' },
     tip: { iconType: 'faceHappy', color: 'success' },
     info: { iconType: 'info', color: 'primary' },
     accessibility: { iconType: 'accessibility', color: 'primary' },
-    warning: { iconType: 'alert', color: 'warning' },
+    warning: { iconType: 'warning', color: 'warning' },
     danger: { iconType: 'error', color: 'danger' },
     // Undocumented legacy admonition type aliases
     secondary: {},
@@ -31,7 +31,7 @@ const nestedParagraphStyleReset = css `
 `;
 const Callout = ({ title, type, children }) => {
     const variantProps = VARIANT_TO_PROPS_MAP[type];
-    return (_jsx(EuiCallOut, { title: title, iconType: "info", color: "primary", ...variantProps, css: css `
+    return (_jsx(EuiCallOut, { title: title, color: "primary", ...variantProps, css: css `
         margin-block: var(--eui-theme-content-vertical-spacing);
         ${nestedParagraphStyleReset}
       `, children: children }));

package/lib/theme/CodeBlock/index.js

@@ -8,8 +8,14 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
  */
 import React, { isValidElement } from 'react';
 import { css } from '@emotion/react';
-import { EuiCodeBlock } from '@elastic/eui';
+import { EuiCodeBlock, useEuiMemoizedStyles } from '@elastic/eui';
 import { Demo } from '../../components/demo';
+const getStyles = ({ euiTheme }) => ({
+    codeBlock: css `
+    margin-block: ${euiTheme.size.base};
+    word-break: break-word;
+  `,
+});
 /**
  * Best attempt to make the children a plain string so it is copyable. If there
  * are react elements, we will not be able to copy the content, and it will
@@ -26,10 +32,11 @@ function maybeStringifyChildren(children) {
 export default function CodeBlock({ children: rawChildren, metastring, className, ...props }) {
     const children = maybeStringifyChildren(rawChildren);
     const language = className?.replace('language-', '') || undefined;
+    const styles = useEuiMemoizedStyles(getStyles);
     if (metastring?.startsWith('interactive')) {
         return _jsx(Demo, { ...props, children: children });
     }
-    return (_jsx(EuiCodeBlock, { ...props, fontSize: "m", overflowHeight: 450, language: language, isCopyable: true, css: css `
-        word-break: break-word;
-      `, children: children }));
+    // Don't show the fullscreen button for one-liner snippets
+    const isOneLiner = typeof children === 'string' && !children.trim().includes('\n');
+    return (_jsx(EuiCodeBlock, { ...props, fontSize: "m", overflowHeight: isOneLiner ? undefined : 450, language: language, isCopyable: true, css: styles.codeBlock, children: children }));
 }

package/lib/theme/Demo/actions.d.ts

@@ -4,6 +4,7 @@ export type ActionComponentProps = {
     activeSource: DemoSourceMeta | null;
     sources: DemoSourceMeta[];
     extraFiles?: ExtraFiles;
+    previewWrapperSource?: string;
 };
 export type ActionComponent = ComponentType<ActionComponentProps>;
 export declare const extraActions: ActionComponent[];

package/lib/theme/DocBreadcrumbs/Items/Home/index.js

@@ -14,5 +14,5 @@ export default function HomeBreadcrumbItem() {
                     id: 'theme.docs.breadcrumbs.home',
                     message: 'Home page',
                     description: 'The ARIA label for the home page in the breadcrumbs',
-                }), className: "breadcrumbs__link", href: homeHref, children: title }), _jsx(EuiIcon, { type: "arrowRight", size: "s", css: styles.icon })] }));
+                }), className: "breadcrumbs__link", href: homeHref, children: title }), _jsx(EuiIcon, { type: "chevronSingleRight", size: "s", css: styles.icon })] }));
 }

package/lib/theme/DocBreadcrumbs/index.js

@@ -40,7 +40,7 @@ function BreadcrumbsItem({ children, active, index, addMicrodata, }) {
             itemType: 'https://schema.org/ListItem',
         }), className: clsx('breadcrumbs__item', {
             'breadcrumbs__item--active': active,
-        }), css: styles.item, children: [children, _jsx("meta", { itemProp: "position", content: String(index + 1) }), !active && _jsx(EuiIcon, { type: "arrowRight", css: styles.icon })] }));
+        }), css: styles.item, children: [children, _jsx("meta", { itemProp: "position", content: String(index + 1) }), !active && _jsx(EuiIcon, { type: "chevronSingleRight", css: styles.icon })] }));
 }
 export default function DocBreadcrumbs() {
     const breadcrumbs = useSidebarBreadcrumbs();

package/lib/theme/DocCard/index.js

@@ -27,8 +27,8 @@ function CardCategory({ item }) {
         icon: "folderOpen", title: item.label, description: item.description ?? categoryItemsPlural(item.items.length) }));
 }
 function CardLink({ item }) {
-    // We update Docusaurus `link` icon to EUI `popout` icon
-    const icon = isInternalUrl(item.href) ? 'document' : 'popout';
+    // We update Docusaurus `link` icon to EUI `external` icon
+    const icon = isInternalUrl(item.href) ? 'document' : 'external';
     const doc = useDocById(item.docId ?? undefined);
     return (_jsx(CardLayout, { href: item.href, icon: icon, title: item.label, description: item.description ?? doc?.description }));
 }

package/lib/theme/DocSidebarItem/Category/index.js

@@ -85,7 +85,7 @@ function CollapseButton({ collapsed, categoryLabel, onClick, ...rest }) {
                 id: 'theme.DocSidebarItem.collapseCategoryAriaLabel',
                 message: "Collapse sidebar category '{label}'",
                 description: 'The ARIA label to collapse the sidebar category',
-            }, { label: categoryLabel }), "aria-expanded": !collapsed, type: "button", className: "clean-btn", onClick: onClick, ...rest, children: _jsx(EuiIcon, { size: "s", type: collapsed ? 'arrowRight' : 'arrowDown' }) }));
+            }, { label: categoryLabel }), "aria-expanded": !collapsed, type: "button", className: "clean-btn", onClick: onClick, ...rest, children: _jsx(EuiIcon, { size: "s", type: collapsed ? 'chevronSingleRight' : 'chevronSingleDown' }) }));
 }
 export default function DocSidebarItemCategory({ item, onItemClick, activePath, level, index, ...props }) {
     const { items, label, collapsible, className, href } = item;

package/lib/theme/Heading/index.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
  * Side Public License, v 1.
  */
 import useBrokenLinks from '@docusaurus/useBrokenLinks';
-import { EuiTitle, EuiButtonIcon, useEuiMemoizedStyles, } from '@elastic/eui';
+import { EuiTitle, EuiButtonIcon, EuiToolTip, useEuiMemoizedStyles, } from '@elastic/eui';
 import { css } from '@emotion/react';
 const TAG_TO_TITLE_SIZE_MAP = {
     h6: 'xxxs',
@@ -44,6 +44,6 @@ const Heading = ({ as: Component, children, id, ...restProps }) => {
     const anchorTitle = `Direct link to ${typeof children === 'string' ? children : id}`;
     // We don't want to show section links on document title headings
     const shouldShowSectionLink = Component !== 'h1';
-    return (_jsx(EuiTitle, { size: TAG_TO_TITLE_SIZE_MAP[Component], children: _jsxs(Component, { ...restProps, className: "heading anchor", css: styles.heading, id: id, children: [children, shouldShowSectionLink && (_jsx(EuiButtonIcon, { css: styles.anchor, href: `#${id}`, "aria-label": anchorTitle, title: anchorTitle, iconType: "link", color: "text", size: "xs" }))] }) }));
+    return (_jsx(EuiTitle, { size: TAG_TO_TITLE_SIZE_MAP[Component], children: _jsxs(Component, { ...restProps, className: "heading anchor", css: styles.heading, id: id, children: [children, shouldShowSectionLink && (_jsx(EuiToolTip, { content: anchorTitle, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { css: styles.anchor, href: `#${id}`, "aria-label": anchorTitle, iconType: "link", color: "text", size: "xs" }) }))] }) }));
 };
 export default Heading;

package/lib/theme/Navbar/Content/index.js

@@ -16,6 +16,7 @@ import { euiFormControlText, euiFormVariables,
  } from '@elastic/eui/lib/components/form/form.styles';
 import { VersionSwitcher, } from '../../../components/version_switcher';
 import { HighContrastModeToggle } from '../../../components/high_contrast_mode_toggle';
+import { getNavbarBreakpoint } from '../breakpoint';
 const DOCS_PATH = '/docs';
 const placeHolderStyles = (content) => `
   &::-webkit-input-placeholder { ${content} }
@@ -27,6 +28,7 @@ const getStyles = (euiThemeContext) => {
     const { euiTheme } = euiThemeContext;
     const form = euiFormVariables(euiThemeContext);
     const iconColor = encodeURIComponent(euiTheme.colors.text);
+    const { desktopMediaQuery, mobileMediaQuery } = getNavbarBreakpoint(euiThemeContext);
     return {
         navbarItems: css `
       --ifm-navbar-item-padding-horizontal: 0;
@@ -34,7 +36,7 @@ const getStyles = (euiThemeContext) => {
 
       .navbar__item,
       [class*='colorModeToggle'] {
-        @media (max-width: 996px) {
+        ${mobileMediaQuery} {
           display: none;
         }
       }
@@ -46,12 +48,16 @@ const getStyles = (euiThemeContext) => {
           background-color: var(--ifm-color-emphasis-200);
           color: currentColor;
         }
+
+        ${mobileMediaQuery} {
+          display: inherit;
+        }
       }
     `,
         navbarItemsLeft: css `
       gap: ${euiTheme.size.s};
 
-      @media (min-width: 997px) {
+      ${desktopMediaQuery} {
         gap: ${euiTheme.size.l};
       }
 
@@ -63,7 +69,7 @@ const getStyles = (euiThemeContext) => {
       gap: ${euiTheme.size.s};
     `,
         actions: css `
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,
@@ -102,22 +108,18 @@ const getStyles = (euiThemeContext) => {
           max-inline-size: 25rem;
         }
 
-        @media (min-width: 997px) {
+        ${desktopMediaQuery} {
           min-inline-size: 15rem;
         }
-
-        @media (min-width: 1200px) {
-          min-inline-size: 25rem;
-        }
       }
     `,
         versionSwitcher: css `
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,
         themeSwitcher: css `
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,

package/lib/theme/Navbar/MobileSidebar/index.js

@@ -1,13 +1,36 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useEffect } from 'react';
+import { useWindowSize } from '@docusaurus/theme-common';
 import { useLockBodyScroll, useNavbarMobileSidebar, } from '@docusaurus/theme-common/internal';
 import NavbarMobileSidebarLayout from '@theme-original/Navbar/MobileSidebar/Layout';
 import NavbarMobileSidebarHeader from './Header';
 import NavbarMobileSidebarPrimaryMenu from '@theme-original/Navbar/MobileSidebar/PrimaryMenu';
 import NavbarMobileSidebarSecondaryMenu from '@theme-original/Navbar/MobileSidebar/SecondaryMenu';
+import { useEuiTheme } from '@elastic/eui';
+import { getNavbarBreakpoint } from '../breakpoint';
 export default function NavbarMobileSidebar({ versionSwitcherOptions, }) {
     const mobileSidebar = useNavbarMobileSidebar();
-    useLockBodyScroll(mobileSidebar.shown);
-    if (!mobileSidebar.shouldRender) {
+    const { disabled, shouldRender: shouldRenderDefault, shown, toggle, } = mobileSidebar;
+    const euiThemeContext = useEuiTheme();
+    const { mobileBreakpoint } = getNavbarBreakpoint(euiThemeContext);
+    const windowSize = useWindowSize({
+        desktopBreakpoint: mobileBreakpoint,
+    });
+    const shouldRender = shouldRenderDefault || (!disabled && windowSize === 'mobile');
+    useLockBodyScroll(shouldRender && shown);
+    useEffect(() => {
+        if (windowSize === 'desktop' && shown) {
+            toggle();
+        }
+    }, [shown, toggle, windowSize]);
+    if (!shouldRender) {
         return null;
     }
     return (_jsx(NavbarMobileSidebarLayout, { header: _jsx(NavbarMobileSidebarHeader, { versionSwitcherOptions: versionSwitcherOptions }), primaryMenu: _jsx(NavbarMobileSidebarPrimaryMenu, {}), secondaryMenu: _jsx(NavbarMobileSidebarSecondaryMenu, {}) }));

package/lib/theme/Navbar/breakpoint.d.ts

@@ -0,0 +1,7 @@
+import type { UseEuiTheme } from '@elastic/eui';
+export declare const getNavbarBreakpoint: ({ euiTheme }: UseEuiTheme) => {
+    desktopBreakpoint: number;
+    desktopMediaQuery: string;
+    mobileBreakpoint: number;
+    mobileMediaQuery: string;
+};

package/lib/theme/Navbar/breakpoint.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+const NAVBAR_MOBILE_BREAKPOINT_KEY = 'xl';
+export const getNavbarBreakpoint = ({ euiTheme }) => {
+    const mobileBreakpoint = euiTheme.breakpoint[NAVBAR_MOBILE_BREAKPOINT_KEY];
+    const desktopBreakpoint = mobileBreakpoint + 1;
+    return {
+        desktopBreakpoint,
+        desktopMediaQuery: `@media (min-width: ${desktopBreakpoint}px)`,
+        mobileBreakpoint,
+        mobileMediaQuery: `@media (max-width: ${mobileBreakpoint}px)`,
+    };
+};

package/lib/theme/NavbarItem/NavbarNavLink.js

@@ -12,7 +12,7 @@ const CUSTOM_LINK_COMPONENT_MAP = {
     },
     changelog: {
         component: NavbarItem,
-        icon: 'cheer',
+        icon: 'popper',
     },
     figma: {
         component: NavbarItem,