@elastic/eui-docusaurus-theme 2.0.0

package/lib/components/prop_table/prop_table.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { EuiBasicTable, EuiMarkdownFormat, EuiTextColor, EuiFlexGroup, EuiCode, useEuiMemoizedStyles, EuiLink, EuiPanel, } from '@elastic/eui';
+import { useCallback, useMemo } from 'react';
+import { css } from '@emotion/react';
+import Heading from '@theme/Heading';
+import { PropTableExtendedTypes } from './extended_types';
+const getPropId = (prop, componentName) => `${encodeURIComponent(componentName)}-prop-${prop.name}`;
+const getPropTableStyles = ({ euiTheme }) => ({
+    propTable: css `
+    margin-block: ${euiTheme.size.xl};
+  `,
+    header: css `
+    // Increased specificity is needed here to override default
+    // content heading styles
+    && h1,
+    && h2,
+    && h3,
+    && h4,
+    && h5,
+    && h6 {
+      margin-block: 0;
+    }
+  `,
+    table: css `
+    vertical-align: top;
+  `,
+    propName: css `
+    font-family: ${euiTheme.font.familyCode};
+    font-weight: ${euiTheme.font.weight.semiBold};
+  `,
+    description: css `
+    p,
+    ul {
+      font-size: var(--eui-font-size-s);
+    }
+
+    p {
+      margin-block-end: var(--eui-size-s);
+    }
+
+    p:first-child {
+      margin-block-start: 0;
+    }
+  `,
+    required: css `
+    font-family: ${euiTheme.font.familyCode};
+    color: ${euiTheme.colors.textDanger};
+  `,
+    type: css `
+    font-weight: ${euiTheme.font.weight.semiBold};
+  `,
+    tableNameLink: css `
+    display: none;
+    margin-inline-start: ${euiTheme.size.xs};
+  `,
+    tableRow: css `
+    scroll-margin-block-start: calc(var(--ifm-navbar-height) + 0.5rem);
+
+    &:hover .propLink {
+      display: inline-block;
+    }
+  `,
+    tableCell: css `
+    vertical-align: text-top;
+  `,
+});
+export const PropTable = ({ definition, headingLevel = 'h3', showTitle = true, parseDescription, }) => {
+    const styles = useEuiMemoizedStyles(getPropTableStyles);
+    const tableItems = useMemo(() => Object.values(definition.props).sort((a, b) => +(b.isRequired ?? false) - +(a.isRequired ?? false)), [definition.props]);
+    const columns = useMemo(() => [
+        {
+            field: 'name',
+            name: 'Prop',
+            width: '150',
+            render(value, prop) {
+                return (_jsxs("span", { css: styles.propName, children: [value, _jsx(EuiLink, { href: `#${getPropId(prop, definition.displayName)}`, css: styles.tableNameLink, className: "propLink", "aria-label": `Direct link to the ${prop.name} prop`, title: `Direct link to the ${prop.name} prop`, children: "#" })] }));
+            },
+        },
+        {
+            field: 'description',
+            name: 'Description and type',
+            render(value, prop) {
+                const result = parseDescription ? parseDescription(value) : value;
+                return (_jsxs(EuiFlexGroup, { direction: "column", alignItems: "flexStart", gutterSize: "s", children: [result && (_jsx(EuiMarkdownFormat, { css: styles.description, children: result })), prop.type && (_jsxs("span", { css: styles.type, children: ["Type:", ' ', _jsx(EuiCode, { language: "ts", children: prop.type.raw || prop.type.name })] }))] }));
+            },
+        },
+        {
+            field: 'defaultValue',
+            name: 'Default value',
+            width: '120',
+            render(value, prop) {
+                if (prop.isRequired && !value?.trim().length) {
+                    return _jsx(EuiTextColor, { css: styles.required, children: "Required" });
+                }
+                return value && _jsx(EuiCode, { children: value });
+            },
+        },
+    ], []);
+    const rowProps = useCallback((item) => ({
+        id: getPropId(item, definition.displayName),
+        css: styles.tableRow,
+    }), [definition.displayName]);
+    const cellProps = useCallback((item) => ({
+        id: getPropId(item, definition.displayName),
+        css: styles.tableCell,
+    }), [definition.displayName]);
+    return (_jsxs(EuiFlexGroup, { "aria-label": `Component properties table for ${definition.displayName}`, gutterSize: "s", direction: "column", css: styles.propTable, children: [_jsxs("header", { css: styles.header, children: [showTitle && (_jsx(Heading, { as: headingLevel, id: definition.displayName, children: definition.displayName })), _jsx(PropTableExtendedTypes, { definition: definition })] }), _jsx(EuiPanel, { color: "plain", hasBorder: true, children: _jsx(EuiBasicTable, { css: styles.table, width: "100%", items: tableItems, columns: columns, rowProps: rowProps, cellProps: cellProps, compressed: true }) })] }));
+};

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

@@ -0,0 +1,16 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { EuiThemeColorMode } from '@elastic/eui';
+import { type EUI_THEME } from '@elastic/eui-theme-common';
+export declare const AVAILABLE_THEMES: EUI_THEME[];
+export interface AppThemeContextData {
+    colorMode: EuiThemeColorMode;
+    highContrastMode: boolean | undefined;
+    theme: EUI_THEME;
+    changeColorMode: (colorMode: EuiThemeColorMode) => void;
+    changeHighContrastMode: (highContrastMode: boolean) => void;
+    changeTheme: (themeValue: string) => void;
+}
+export declare const cssGlobalCache: import("@emotion/cache").EmotionCache;
+export declare const AppThemeContext: import("react").Context<AppThemeContextData>;
+export declare const useAppTheme: () => AppThemeContextData;
+export declare const AppThemeProvider: FunctionComponent<PropsWithChildren>;

package/lib/components/theme_context/index.js

@@ -0,0 +1,103 @@
+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 { createContext, useContext, useEffect, useState, } from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { EuiProvider } from '@elastic/eui';
+import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
+import { EuiThemeOverrides } from './theme_overrides';
+export const AVAILABLE_THEMES = [
+    {
+        text: 'Borealis',
+        value: EuiThemeBorealis.key,
+        provider: EuiThemeBorealis,
+    },
+];
+const EUI_COLOR_MODES = ['light', 'dark'];
+/**
+ * Get the initial color mode: localStorage | light
+ */
+const getInitialColorMode = () => {
+    const storedColorMode = localStorage.getItem('colorMode');
+    if (storedColorMode === 'light' || storedColorMode === 'dark') {
+        return storedColorMode;
+    }
+    else {
+        return defaultState.colorMode;
+    }
+};
+const defaultState = {
+    colorMode: EUI_COLOR_MODES[0],
+    highContrastMode: undefined,
+    theme: AVAILABLE_THEMES[0],
+    changeColorMode: () => { },
+    changeHighContrastMode: () => { },
+    changeTheme: () => { },
+};
+/**
+ * Creating a cache and passing it to EuiProvider ensures that injected
+ * Emotion style tags dev mode are in an expected order (global css before component css).
+ * This only applies for @emotion/react css styles, @emotion/css styles are separate.
+ */
+const cssCache = createCache({
+    key: 'website-css',
+    prepend: false,
+});
+export const cssGlobalCache = createCache({
+    key: 'website-css',
+    prepend: true,
+});
+export const AppThemeContext = createContext(defaultState);
+export const useAppTheme = () => {
+    return useContext(AppThemeContext);
+};
+export const AppThemeProvider = ({ children, }) => {
+    const isBrowser = useIsBrowser();
+    const [colorMode, setColorMode] = useState(() => {
+        if (isBrowser)
+            return getInitialColorMode();
+        return defaultState.colorMode;
+    });
+    const [highContrastMode, setHighContrastMode] = useState(false);
+    const getHighContrastModeSetting = () => {
+        return localStorage?.getItem('highContrastMode')
+            ? localStorage?.getItem('highContrastMode') === 'true'
+            : defaultState.highContrastMode;
+    };
+    useEffect(() => {
+        if (isBrowser) {
+            setHighContrastMode(getHighContrastModeSetting());
+        }
+    }, [isBrowser]);
+    const [theme, setTheme] = useState(defaultState.theme);
+    const handleChangeTheme = (themeValue) => {
+        const matchedTheme = AVAILABLE_THEMES.find((t) => t.value === themeValue);
+        setTheme((currentTheme) => matchedTheme ?? currentTheme);
+    };
+    const handleChangeHighContrastMode = (highContrastMode) => {
+        localStorage.setItem('highContrastMode', highContrastMode.toString());
+        setHighContrastMode(highContrastMode);
+    };
+    const handleColorMode = (colorMode) => {
+        localStorage.setItem('colorMode', colorMode);
+        setColorMode(colorMode);
+    };
+    return (_jsx(AppThemeContext.Provider, { value: {
+            colorMode,
+            highContrastMode,
+            theme,
+            changeColorMode: handleColorMode,
+            changeHighContrastMode: handleChangeHighContrastMode,
+            changeTheme: handleChangeTheme,
+        }, children: _jsx(EuiProvider, { modify: EuiThemeOverrides, colorMode: colorMode, theme: theme.provider, highContrastMode: highContrastMode, cache: {
+                default: cssCache,
+                global: cssGlobalCache,
+            }, children: _jsx(CacheProvider, { value: cssCache, children: children }) }) }));
+};

package/lib/components/theme_context/theme_overrides.d.ts

@@ -0,0 +1,2 @@
+import { EuiThemeModifications } from '@elastic/eui';
+export declare const EuiThemeOverrides: EuiThemeModifications;

package/lib/components/theme_context/theme_overrides.js

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+export const EuiThemeOverrides = {
+    font: {
+        lineHeightMultiplier: 1.75,
+    },
+};

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

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+import { EuiListGroupItem } from '@elastic/eui';
+export type VersionSwitcherProps = {
+    /**
+     * Aria label for the version switcher popover
+     */
+    ariaLabel: string;
+    currentVersion: string;
+    /**
+     * Extra action to be displayed in the version switcher
+     */
+    extraAction?: (version?: string) => ComponentProps<typeof EuiListGroupItem>['extraAction'];
+    /**
+     * URL to the previous version of the documentation
+     * E.g. https://eui.elastic.co
+     */
+    previousVersionUrl?: string;
+    /**
+     * List of available versions to switch to
+     */
+    versions: string[];
+};
+export declare const VersionSwitcher: ({ ariaLabel, currentVersion, extraAction, previousVersionUrl, versions, }: VersionSwitcherProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/lib/components/version_switcher/index.js

@@ -0,0 +1,51 @@
+import { jsxs as _jsxs, 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 { useState } from 'react';
+import { css } from '@emotion/react';
+import { FixedSizeList } from 'react-window';
+import { EuiButtonEmpty, euiFocusRing, EuiListGroupItem, EuiPopover, useEuiMemoizedStyles, } from '@elastic/eui';
+const getStyles = (euiThemeContext) => {
+    const { euiTheme } = euiThemeContext;
+    return {
+        button: css `
+      font-weight: ${euiTheme.font.weight.bold};
+      color: ${euiTheme.colors.primary};
+    `,
+        listItem: css `
+      .euiListGroupItem__button:focus-visible {
+        // overriding the global "outset" style to ensure the focus style is not cut off
+        ${euiFocusRing(euiThemeContext, 'inset', {
+            color: euiTheme.colors.primary,
+        })};
+      }
+    `,
+    };
+};
+/**
+ * Addresses NVDA pronunciation issue
+ */
+const pronounceVersion = (version) => {
+    return `version ${version.replaceAll('.', ' point ')}`;
+};
+export const VersionSwitcher = ({ ariaLabel, currentVersion, extraAction, previousVersionUrl, versions, }) => {
+    const [isPopoverOpen, setPopoverOpen] = useState(false);
+    const styles = useEuiMemoizedStyles(getStyles);
+    if (!versions)
+        return null;
+    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] }));
+    return (_jsx(EuiPopover, { isOpen: isPopoverOpen, closePopover: () => setPopoverOpen(false), button: button, repositionOnScroll: true, panelPaddingSize: "xs", "aria-label": ariaLabel, children: _jsx(FixedSizeList, { className: "eui-yScroll", itemCount: versions.length, itemSize: 24, height: 200, width: 120, innerElementType: "ul", children: ({ index, style }) => {
+                const version = versions[index];
+                const isCurrentVersion = version === currentVersion;
+                const screenReaderVersion = pronounceVersion(version);
+                const url = isCurrentVersion
+                    ? '/'
+                    : `${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) }));
+            } }) }));
+};

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from '@docusaurus/types';
+export default function euiDocusaurusTheme(): Plugin<void>;

package/lib/index.js

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+export default function euiDocusaurusTheme() {
+    return {
+        name: 'eui-docusaurus-theme',
+        getThemePath() {
+            return '../lib/theme';
+        },
+        getTypeScriptThemePath() {
+            return '../src/theme';
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,OAAO;QACL,IAAI,EAAE,sBAAsB;QAC5B,YAAY;YACV,OAAO,cAAc,CAAC;QACxB,CAAC;QACD,sBAAsB;YACpB,OAAO,cAAc,CAAC;QACxB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/lib/theme/Admonition/Types.d.ts

@@ -0,0 +1,3 @@
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+declare const admonitionTypes: typeof AdmonitionTypes;
+export default admonitionTypes;

package/lib/theme/Admonition/Types.js

@@ -0,0 +1,51 @@
+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 { css } from '@emotion/react';
+import { EuiCallOut } from '@elastic/eui';
+const VARIANT_TO_PROPS_MAP = {
+    note: { iconType: 'paperClip', color: 'accent' },
+    tip: { iconType: 'faceHappy', color: 'success' },
+    info: { iconType: 'info', color: 'primary' },
+    accessibility: { iconType: 'accessibility', color: 'primary' },
+    warning: { iconType: 'alert', color: 'warning' },
+    danger: { iconType: 'error', color: 'danger' },
+    // Undocumented legacy admonition type aliases
+    secondary: {},
+    important: {},
+    success: {},
+    caution: {},
+};
+// MDXComponents/Paragraph wraps <p> in <EuiText>,
+// this is a workaround to keep styles from <EuiText> in the admonition
+const nestedParagraphStyleReset = css `
+  p.euiText {
+    font-size: inherit;
+    line-height: inherit;
+  }
+`;
+const Callout = ({ title, type, children }) => {
+    const variantProps = VARIANT_TO_PROPS_MAP[type];
+    return (_jsx(EuiCallOut, { title: title, iconType: "info", color: "primary", ...variantProps, css: css `
+        margin-block: var(--eui-theme-content-vertical-spacing);
+        ${nestedParagraphStyleReset}
+      `, children: children }));
+};
+const admonitionTypes = {
+    note: Callout,
+    tip: Callout,
+    info: Callout,
+    accessibility: Callout,
+    warning: Callout,
+    danger: Callout,
+    secondary: Callout,
+    important: Callout,
+    success: Callout,
+    caution: Callout,
+};
+export default admonitionTypes;

package/lib/theme/CodeBlock/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme/CodeBlock';
+export default function CodeBlock({ children: rawChildren, metastring, className, ...props }: Props): JSX.Element;

package/lib/theme/CodeBlock/index.js

@@ -0,0 +1,35 @@
+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 React, { isValidElement } from 'react';
+import { css } from '@emotion/react';
+import { EuiCodeBlock } from '@elastic/eui';
+import { Demo } from '../../components/demo';
+/**
+ * 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
+ * return `children` as-is; otherwise, it concatenates the string children
+ * together.
+ */
+function maybeStringifyChildren(children) {
+    if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+        return children;
+    }
+    // The children is now guaranteed to be one/more plain strings
+    return Array.isArray(children) ? children.join('') : children;
+}
+export default function CodeBlock({ children: rawChildren, metastring, className, ...props }) {
+    const children = maybeStringifyChildren(rawChildren);
+    const language = className?.replace('language-', '') || undefined;
+    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 }));
+}

package/lib/theme/ColorModeToggle/index.d.ts

@@ -0,0 +1,10 @@
+import React, { JSX } from 'react';
+import type ColorModeToggleType from '@theme-init/ColorModeToggle';
+import type { WrapperProps } from '@docusaurus/types';
+type WrappedProps = WrapperProps<typeof ColorModeToggleType>;
+/**
+ * Additional wrapper to connect Docusaurus color mode with EUI theme
+ */
+declare function ColorModeToggle({ value, onChange, ...rest }: WrappedProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ColorModeToggle>;
+export default _default;

package/lib/theme/ColorModeToggle/index.js

@@ -0,0 +1,51 @@
+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 React, { useCallback, useContext, useEffect } from 'react';
+import { translate } from '@docusaurus/Translate';
+import { NavbarItem } from '../../components/navbar_item';
+import { AppThemeContext } from '../../components/theme_context';
+/**
+ * Additional wrapper to connect Docusaurus color mode with EUI theme
+ */
+function ColorModeToggle({ value, onChange, ...rest }) {
+    const { colorMode, changeColorMode } = useContext(AppThemeContext);
+    useEffect(() => {
+        changeColorMode(value);
+    }, [value, colorMode, changeColorMode]);
+    const handleOnChange = (colorMode) => {
+        changeColorMode(colorMode);
+        onChange?.(colorMode);
+    };
+    return (_jsx(OriginalColorModeToggle, { value: colorMode, onChange: handleOnChange, ...rest }));
+}
+function OriginalColorModeToggle({ className, value, onChange, }) {
+    const isDarkMode = value === 'dark';
+    const title = translate({
+        message: 'Switch between dark and light mode (currently {mode})',
+        id: 'theme.colorToggle.ariaLabel',
+        description: 'The ARIA label for the navbar color mode toggle',
+    }, {
+        mode: value === 'dark'
+            ? translate({
+                message: 'dark mode',
+                id: 'theme.colorToggle.ariaLabel.mode.dark',
+                description: 'The name for the dark color mode',
+            })
+            : translate({
+                message: 'light mode',
+                id: 'theme.colorToggle.ariaLabel.mode.light',
+                description: 'The name for the light color mode',
+            }),
+    });
+    const handleOnChange = useCallback(() => {
+        onChange(value === 'dark' ? 'light' : 'dark');
+    }, [value, onChange]);
+    return (_jsx(NavbarItem, { className: className, title: title, icon: isDarkMode ? 'sun' : 'moon', isMenuItem: false, onClick: handleOnChange }));
+}
+export default React.memo(ColorModeToggle);

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

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { DemoSourceMeta } from '../../components/demo/demo';
+export type ActionComponentProps = {
+    activeSource: DemoSourceMeta | null;
+    sources: DemoSourceMeta[];
+};
+export type ActionComponent = ComponentType<ActionComponentProps>;
+export declare const extraActions: ActionComponent[];

package/lib/theme/Demo/actions.js

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+export const extraActions = [];

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

@@ -0,0 +1,3 @@
+export declare const demoDefaultScope: {
+    require: () => never;
+};

package/lib/theme/Demo/default_scope.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.
+ */
+/**
+ * A custom client-side require() alternative to inform users it's not available
+ * in our demo environment
+ */
+const clientSideRequire = () => {
+    throw new Error('require() is not accessible in the interactive demo environment! All EUI and React exports are available in the global scope for you to use without the need to import them.');
+};
+export const demoDefaultScope = {
+    require: clientSideRequire,
+};

package/lib/theme/DocBreadcrumbs/Items/Home/index.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export default function HomeBreadcrumbItem(): JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { translate } from '@docusaurus/Translate';
+import { EuiIcon, useEuiMemoizedStyles } from '@elastic/eui';
+import { getItemStyles } from '../item.styles';
+export default function HomeBreadcrumbItem() {
+    const homeHref = useBaseUrl('/');
+    const styles = useEuiMemoizedStyles(getItemStyles);
+    return (_jsxs("li", { className: "breadcrumbs__item", css: styles.item, children: [_jsx(Link, { "aria-label": translate({
+                    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: "EUI" }), _jsx(EuiIcon, { type: "arrowRight", size: "s", css: styles.icon })] }));
+}

package/lib/theme/DocBreadcrumbs/Items/item.styles.d.ts

@@ -0,0 +1,5 @@
+import { UseEuiTheme } from '@elastic/eui';
+export declare const getItemStyles: ({ euiTheme }: UseEuiTheme) => {
+    item: import("@emotion/react").SerializedStyles;
+    icon: import("@emotion/react").SerializedStyles;
+};

package/lib/theme/DocBreadcrumbs/Items/item.styles.js

@@ -0,0 +1,40 @@
+/*
+ * 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 { css } from '@emotion/react';
+export const getItemStyles = ({ euiTheme }) => ({
+    item: css `
+    --ifm-breadcrumb-item-background: transparent;
+    --ifm-breadcrumb-item-background-active: transparent;
+
+    // overwrite global styles
+    &.breadcrumbs__item:not(:last-child):after {
+      content: none;
+    }
+
+    .breadcrumbs__link {
+      padding: 0 ${euiTheme.size.m};
+      font-size: var(--eui-font-size-xs);
+      line-height: var(--eui-line-height-m);
+    }
+
+    a.breadcrumbs__link {
+      color: ${euiTheme.colors.link};
+      font-weight: ${euiTheme.font.weight.bold};
+      text-decoration: underline;
+    }
+
+    &.breadcrumbs__item--active .breadcrumbs__link {
+      color: ${euiTheme.colors.text};
+    }
+  `,
+    icon: css `
+    block-size: ${euiTheme.size.s};
+    inline-size: ${euiTheme.size.s};
+    fill: ${euiTheme.colors.text};
+  `,
+});

package/lib/theme/DocBreadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export default function DocBreadcrumbs(): JSX.Element | null;