@elastic/eui-docusaurus-theme 2.0.0

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

@@ -0,0 +1,146 @@
+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 { useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { ThemeClassNames, useThemeConfig, usePrevious, Collapsible, useCollapsible, } from '@docusaurus/theme-common';
+import { isSamePath } from '@docusaurus/theme-common/internal';
+import { isActiveSidebarItem, findFirstSidebarItemLink, useDocSidebarItemsExpandedState, } from '@docusaurus/plugin-content-docs/client';
+import Link from '@docusaurus/Link';
+import { translate } from '@docusaurus/Translate';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { EuiIcon, useEuiMemoizedStyles } from '@elastic/eui';
+import DocSidebarItems from '../../DocSidebarItems';
+const getStyles = ({ euiTheme }) => ({
+    listItem: css `
+    --ifm-menu-color-background-hover: var(--eui-background-color-primary);
+    --ifm-menu-color-background-active: var(--eui-background-color-primary);
+
+    --ifm-menu-link-padding-horizontal: ${euiTheme.size.s};
+    --ifm-menu-link-padding-vertical: calc(${euiTheme.size.xs} + 2px);
+
+    .menu__link--sublist {
+      color: ${euiTheme.colors.text};
+      font-size: var(--eui-font-size-s);
+      line-height: var(--eui-line-height-s);
+      font-weight: ${euiTheme.font.weight.bold};
+    }
+
+    .menu__link--active {
+      border-radius: ${euiTheme.border.radius.small};
+      color: ${euiTheme.colors.primary};
+    }
+  `,
+    button: css `
+    padding: ${euiTheme.size.s};
+  `,
+});
+// If we navigate to a category and it becomes active, it should automatically
+// expand itself
+function useAutoExpandActiveCategory({ isActive, collapsed, updateCollapsed, }) {
+    const wasActive = usePrevious(isActive);
+    useEffect(() => {
+        const justBecameActive = isActive && !wasActive;
+        if (justBecameActive && collapsed) {
+            updateCollapsed(false);
+        }
+    }, [isActive, wasActive, collapsed, updateCollapsed]);
+}
+/**
+ * When a collapsible category has no link, we still link it to its first child
+ * during SSR as a temporary fallback. This allows to be able to navigate inside
+ * the category even when JS fails to load, is delayed or simply disabled
+ * React hydration becomes an optional progressive enhancement
+ * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
+ * see https://github.com/facebook/docusaurus/issues/3030
+ */
+function useCategoryHrefWithSSRFallback(item) {
+    const isBrowser = useIsBrowser();
+    return useMemo(() => {
+        if (item.href && !item.linkUnlisted) {
+            return item.href;
+        }
+        // In these cases, it's not necessary to render a fallback
+        // We skip the "findFirstCategoryLink" computation
+        if (isBrowser || !item.collapsible) {
+            return undefined;
+        }
+        return findFirstSidebarItemLink(item);
+    }, [item, isBrowser]);
+}
+function CollapseButton({ collapsed, categoryLabel, onClick, ...rest }) {
+    return (_jsx("button", { "aria-label": collapsed
+            ? translate({
+                id: 'theme.DocSidebarItem.expandCategoryAriaLabel',
+                message: "Expand sidebar category '{label}'",
+                description: 'The ARIA label to expand the sidebar category',
+            }, { label: categoryLabel })
+            : translate({
+                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' }) }));
+}
+export default function DocSidebarItemCategory({ item, onItemClick, activePath, level, index, ...props }) {
+    const { items, label, collapsible, className, href } = item;
+    const { docs: { sidebar: { autoCollapseCategories }, }, } = useThemeConfig();
+    const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
+    const isActive = isActiveSidebarItem(item, activePath);
+    const isCurrentPage = isSamePath(href, activePath);
+    const styles = useEuiMemoizedStyles(getStyles);
+    const { collapsed, setCollapsed } = useCollapsible({
+        // Active categories are always initialized as expanded. The default
+        // (`item.collapsed`) is only used for non-active categories.
+        initialState: () => {
+            if (!collapsible) {
+                return false;
+            }
+            return isActive ? false : item.collapsed;
+        },
+    });
+    const { expandedItem, setExpandedItem } = useDocSidebarItemsExpandedState();
+    // Use this instead of `setCollapsed`, because it is also reactive
+    const updateCollapsed = (toCollapsed = !collapsed) => {
+        setExpandedItem(toCollapsed ? null : index);
+        setCollapsed(toCollapsed);
+    };
+    useAutoExpandActiveCategory({ isActive, collapsed, updateCollapsed });
+    useEffect(() => {
+        if (collapsible &&
+            expandedItem != null &&
+            expandedItem !== index &&
+            autoCollapseCategories) {
+            setCollapsed(true);
+        }
+    }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
+    return (_jsxs("li", { className: clsx(ThemeClassNames.docs.docSidebarItemCategory, ThemeClassNames.docs.docSidebarItemCategoryLevel(level), 'menu__list-item', {
+            'menu__list-item--collapsed': collapsed,
+        }, className), css: styles.listItem, children: [_jsxs("div", { className: clsx('menu__list-item-collapsible', {
+                    'menu__list-item-collapsible--active': isCurrentPage && !collapsed,
+                }), children: [_jsx(Link, { className: clsx('menu__link', {
+                            'menu__link--sublist': collapsible,
+                            'menu__link--active': isCurrentPage && !collapsed && isActive,
+                        }), onClick: collapsible
+                            ? (e) => {
+                                onItemClick?.(item);
+                                if (href) {
+                                    updateCollapsed(false);
+                                }
+                                else {
+                                    e.preventDefault();
+                                    updateCollapsed();
+                                }
+                            }
+                            : () => {
+                                onItemClick?.(item);
+                            }, "aria-current": isCurrentPage ? 'page' : undefined, role: collapsible && !href ? 'button' : undefined, "aria-expanded": collapsible && !href ? !collapsed : undefined, href: collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback, ...props, children: label }), collapsible && (_jsx(CollapseButton, { collapsed: collapsed, categoryLabel: label, onClick: (e) => {
+                            e.preventDefault();
+                            updateCollapsed();
+                        }, css: styles.button }))] }), _jsx(Collapsible, { lazy: true, as: "ul", className: "menu__list", collapsed: collapsed, children: _jsx(DocSidebarItems, { items: items, tabIndex: collapsed ? -1 : 0, onItemClick: onItemClick, activePath: activePath, level: level + 1 }) })] }));
+}

package/lib/theme/DocSidebarItem/Link/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocSidebarItem/Link';
+export default function DocSidebarItemLink({ item, onItemClick, activePath, level, index, ...props }: Props): JSX.Element;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { isActiveSidebarItem } from '@docusaurus/plugin-content-docs/client';
+import Link from '@docusaurus/Link';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme-original/Icon/ExternalLink';
+import { useEuiMemoizedStyles } from '@elastic/eui';
+// converted from css modules to Emotion
+const getStyles = ({ euiTheme }) => ({
+    menuListItem: css `
+    .menu__link {
+      color: ${euiTheme.colors.text};
+      font-size: var(--eui-font-size-s);
+      line-height: var(--eui-line-height-s);
+    }
+
+    .menu__link--active {
+      border-radius: ${euiTheme.border.radius.small};
+      color: ${euiTheme.colors.primary};
+      font-weight: ${euiTheme.font.weight.bold};
+    }
+  `,
+    menuExternalLink: css `
+    align-items: center;
+  `,
+});
+export default function DocSidebarItemLink({ item, onItemClick, activePath, level, index, ...props }) {
+    const { href, label, className, autoAddBaseUrl } = item;
+    const isActive = isActiveSidebarItem(item, activePath);
+    const isInternalLink = isInternalUrl(href);
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsx("li", { className: clsx(ThemeClassNames.docs.docSidebarItemLink, ThemeClassNames.docs.docSidebarItemLinkLevel(level), 'menu__list-item', className), css: styles.menuListItem, children: _jsxs(Link, { className: clsx('menu__link', !isInternalLink && styles.menuExternalLink, {
+                'menu__link--active': isActive,
+            }), autoAddBaseUrl: autoAddBaseUrl, "aria-current": isActive ? 'page' : undefined, to: href, ...(isInternalLink && {
+                onClick: onItemClick ? () => onItemClick(item) : undefined,
+            }), ...props, children: [label, !isInternalLink && _jsx(IconExternalLink, {})] }) }, label));
+}

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

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocSidebarItem';
+export default function DocSidebarItem({ item, ...props }: Props): JSX.Element | null;

package/lib/theme/DocSidebarItem/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import DocSidebarItemHtml from '@theme-original/DocSidebarItem/Html';
+import DocSidebarItemCategory from './Category';
+import DocSidebarItemLink from './Link';
+export default function DocSidebarItem({ item, ...props }) {
+    switch (item.type) {
+        case 'category':
+            return _jsx(DocSidebarItemCategory, { item: item, ...props });
+        case 'html':
+            return _jsx(DocSidebarItemHtml, { item: item, ...props });
+        case 'link':
+        default:
+            return _jsx(DocSidebarItemLink, { item: item, ...props });
+    }
+}

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

@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocSidebarItems';
+declare function DocSidebarItems({ items, ...props }: Props): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof DocSidebarItems>;
+export default _default;

package/lib/theme/DocSidebarItems/index.js

@@ -0,0 +1,17 @@
+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 { memo } from 'react';
+import { DocSidebarItemsExpandedStateProvider, useVisibleSidebarItems, } from '@docusaurus/plugin-content-docs/client';
+import DocSidebarItem from '../DocSidebarItem';
+function DocSidebarItems({ items, ...props }) {
+    const visibleItems = useVisibleSidebarItems(items, props.activePath);
+    return (_jsx(DocSidebarItemsExpandedStateProvider, { children: visibleItems.map((item, index) => (_jsx(DocSidebarItem, { item: item, index: index, ...props }, index))) }));
+}
+// Optimize sidebar at each "level"
+export default memo(DocSidebarItems);

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

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/EditThisPage';
+export default function EditThisPage({ editUrl, ...rest }: Props): JSX.Element;

package/lib/theme/EditThisPage/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import Translate from '@docusaurus/Translate';
+import { EuiButton, euiButtonColor, useEuiMemoizedStyles, } from '@elastic/eui';
+const getStyles = (theme) => {
+    const buttonColor = euiButtonColor(theme, 'primary');
+    return {
+        editPage: css `
+      // overriding Docusaurus link hover styles to preserve button styles
+      --ifm-link-hover-color: ${buttonColor.color};
+    `,
+    };
+};
+export default function EditThisPage({ editUrl, ...rest }) {
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsx(EuiButton, { ...rest, href: editUrl, iconType: "pencil", color: "primary", css: styles.editPage, children: _jsx(Translate, { id: "theme.common.editThisPage", description: "The link label to edit the current page", children: "Edit this page" }) }));
+}

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

@@ -0,0 +1,2 @@
+declare const Footer: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Footer;

package/lib/theme/Footer/index.js

@@ -0,0 +1,43 @@
+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 { EuiText, EuiThemeProvider, useEuiMemoizedStyles, } from '@elastic/eui';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { euiLinkStyles } from '@elastic/eui/es/components/link/link.styles';
+const getFooterStyles = (euiThemeContext) => {
+    const { euiTheme } = euiThemeContext;
+    return {
+        root: css `
+      background: ${euiTheme.colors
+            .backgroundBaseSubdued}; // Color not available in EUI
+      padding: ${euiTheme.size.l};
+      text-align: center;
+    `,
+        text: css `
+      line-height: var(--eui-line-height-s);
+
+      a {
+        ${euiLinkStyles(euiThemeContext).euiLink}
+        ${euiLinkStyles(euiThemeContext).primary}
+      }
+    `,
+        heart: css `
+      color: ${euiTheme.colors.accent};
+    `,
+    };
+};
+const _Footer = () => {
+    const styles = useEuiMemoizedStyles(getFooterStyles);
+    const { footer } = useThemeConfig();
+    return (_jsx("footer", { css: styles.root, children: _jsx(EuiText, { textAlign: "center", size: "s", css: styles.text, dangerouslySetInnerHTML: { __html: footer?.copyright ?? '' } }) }));
+};
+const Footer = () => {
+    return (_jsx(EuiThemeProvider, { colorMode: "dark", children: _jsx(_Footer, {}) }));
+};
+export default Footer;

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

@@ -0,0 +1,3 @@
+import { Props as HeadingProps } from '@theme/Heading';
+declare const Heading: ({ as: Component, children, id, ...restProps }: HeadingProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Heading;

package/lib/theme/Heading/index.js

@@ -0,0 +1,49 @@
+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 useBrokenLinks from '@docusaurus/useBrokenLinks';
+import { EuiTitle, EuiButtonIcon, useEuiMemoizedStyles, } from '@elastic/eui';
+import { css } from '@emotion/react';
+const TAG_TO_TITLE_SIZE_MAP = {
+    h6: 'xxxs',
+    h5: 'xxs',
+    h4: 'xs',
+    h3: 's',
+    h2: 'm',
+    h1: 'l',
+};
+const getHeadingStyles = ({ euiTheme }) => ({
+    heading: css `
+    margin-block-start: calc(var(--eui-theme-content-vertical-spacing) * 2.5);
+    margin-block-end: var(--eui-theme-content-vertical-spacing);
+    scroll-margin-block-start: calc(var(--ifm-navbar-height) + 1rem);
+
+    &:first-child {
+      margin-block-start: var(--eui-theme-content-vertical-spacing);
+    }
+  `,
+    anchor: css `
+    margin-inline-start: ${euiTheme.size.s};
+    opacity: 0;
+
+    &:focus,
+    .heading:hover & {
+      opacity: 1;
+    }
+  `,
+});
+const Heading = ({ as: Component, children, id, ...restProps }) => {
+    const brokenLinks = useBrokenLinks();
+    const styles = useEuiMemoizedStyles(getHeadingStyles);
+    brokenLinks.collectAnchor(id);
+    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" }))] }) }));
+};
+export default Heading;

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

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

package/lib/theme/Logo/index.js

@@ -0,0 +1,80 @@
+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 { useContext } from 'react';
+import { css } from '@emotion/react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useThemeConfig, } from '@docusaurus/theme-common';
+import { EuiImage, euiTextTruncate, useEuiMemoizedStyles, } from '@elastic/eui';
+import { AppThemeContext } from '../../components/theme_context';
+const getStyles = ({ euiTheme }) => ({
+    wrapper: css `
+    ${euiTextTruncate()}
+    // create space to prevent focus outline from being cut off
+    padding: ${euiTheme.size.xs};
+
+    @media (min-width: 997px) {
+      border-right: ${euiTheme.border.thin};
+    }
+
+    .navbar__brand {
+      display: flex;
+      align-items: center;
+
+      margin-inline-end: ${euiTheme.size.m};
+
+      @media (min-width: 997px) {
+        margin-inline-end: ${euiTheme.size.l};
+      }
+    }
+
+    .navbar__logo {
+      height: 100%;
+    }
+  `,
+    imageWrapper: css `
+    margin-inline-end: ${euiTheme.size.m};
+  `,
+    image: css `
+    position: relative;
+    block-size: ${euiTheme.size.l};
+    inline-size: ${euiTheme.size.l};
+    margin: 0;
+  `,
+});
+function LogoThemedImage({ logo, alt, imageClassName, }) {
+    const { colorMode } = useContext(AppThemeContext);
+    const isDarkMode = colorMode === 'dark';
+    const styles = useEuiMemoizedStyles(getStyles);
+    const src = isDarkMode
+        ? useBaseUrl(logo.srcDark || logo.src)
+        : useBaseUrl(logo.src);
+    const themedImage = (_jsx(EuiImage, { src: src, size: "fullWidth", alt: alt, className: logo.className, wrapperProps: {
+            style: logo.style,
+            css: styles.image,
+        } }));
+    // Is this extra div really necessary?
+    // introduced in https://github.com/facebook/docusaurus/pull/5666
+    return imageClassName ? (_jsx("div", { className: imageClassName, css: styles.imageWrapper, children: themedImage })) : (themedImage);
+}
+export default function Logo(props) {
+    const { siteConfig: { title }, } = useDocusaurusContext();
+    const { navbar: { title: navbarTitle, logo }, } = useThemeConfig();
+    const { imageClassName, titleClassName, ...propsRest } = props;
+    const logoLink = useBaseUrl(logo?.href || '/');
+    const styles = useEuiMemoizedStyles(getStyles);
+    // If visible title is shown, fallback alt text should be
+    // an empty string to mark the logo as decorative.
+    const fallbackAlt = navbarTitle ? '' : title;
+    // Use logo alt text if provided (including empty string),
+    // and provide a sensible fallback otherwise.
+    const alt = logo?.alt ?? fallbackAlt;
+    return (_jsx("div", { css: styles.wrapper, children: _jsxs(Link, { to: logoLink, ...propsRest, ...(logo?.target && { target: logo.target }), children: [logo && (_jsx(LogoThemedImage, { logo: logo, alt: alt, imageClassName: imageClassName })), navbarTitle != null && _jsx("b", { className: titleClassName, children: navbarTitle })] }) }));
+}

package/lib/theme/MDXComponents/A.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import type AType from '@theme-init/MDXComponents/A';
+import type { WrapperProps } from '@docusaurus/types';
+type Props = WrapperProps<typeof AType>;
+declare const A: (props: Props) => JSX.Element;
+export default A;

package/lib/theme/MDXComponents/A.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { EuiLink, useEuiMemoizedStyles } from '@elastic/eui';
+const getStyles = ({ euiTheme }) => {
+    return {
+        link: css `
+      font-weight: ${euiTheme.font.weight.bold};
+      text-decoration: underline;
+      text-decoration-color: currentColor;
+    `,
+    };
+};
+const A = (props) => {
+    const styles = useEuiMemoizedStyles(getStyles);
+    return _jsx(EuiLink, { ...props, css: styles.link });
+};
+export default A;

package/lib/theme/MDXComponents/Blockquote.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const Blockquote: ({ children }: HTMLAttributes<HTMLQuoteElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/theme/MDXComponents/Blockquote.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiText, useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+const getBlockquoteStyles = () => css `
+  margin-block: var(--eui-theme-content-vertical-spacing);
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+`;
+export const Blockquote = ({ children }) => {
+    const styles = useEuiMemoizedStyles(getBlockquoteStyles);
+    return (_jsx(EuiText, { size: "m", css: styles, children: _jsx("blockquote", { children: children }) }));
+};

package/lib/theme/MDXComponents/Code.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import type CodeType from '@theme-init/MDXComponents/Code';
+import type { WrapperProps } from '@docusaurus/types';
+type Props = WrapperProps<typeof CodeType>;
+declare const Code: ({ children, className, ...rest }: Props) => JSX.Element;
+export default Code;

package/lib/theme/MDXComponents/Code.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 from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import { css } from '@emotion/react';
+import { EuiCode, useEuiMemoizedStyles } from '@elastic/eui';
+const getStyles = ({ euiTheme }) => {
+    return {
+        code: css `
+      // reset docusaurus code styles
+      border: none;
+      vertical-align: initial;
+    `,
+    };
+};
+const Code = ({ children, className, ...rest }) => {
+    const styles = useEuiMemoizedStyles(getStyles);
+    const language = className?.startsWith('language-')
+        ? className.replace('language-', '')
+        : undefined;
+    const isInlineCode = children
+        ? React.Children.toArray(children).every((el) => typeof el === 'string' && !el.includes('\n'))
+        : false;
+    if (isInlineCode) {
+        return (_jsx(EuiCode, { ...rest, className: className, language: language, css: styles.code, children: children }));
+    }
+    return (_jsx(CodeBlock, { className: className, ...rest, children: children }));
+};
+export default Code;

package/lib/theme/MDXComponents/Heading.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'react';
+import { Props as HeadingProps } from '@theme/Heading';
+declare const MDXHeading: (props: HeadingProps) => JSX.Element;
+export default MDXHeading;

package/lib/theme/MDXComponents/Heading.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import Heading from '@theme/Heading';
+const MDXHeading = (props) => (_jsx(Heading, { ...props }));
+export default MDXHeading;

package/lib/theme/MDXComponents/ListItem.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const ListItem: ({ children, ...props }: HTMLAttributes<HTMLLIElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/theme/MDXComponents/ListItem.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiText } from '@elastic/eui';
+export const ListItem = ({ children, ...props }) => {
+    return (_jsx("li", { children: _jsx(EuiText, { size: "m", children: children }) }));
+};

package/lib/theme/MDXComponents/OrderedList.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const OrderedList: ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/theme/MDXComponents/OrderedList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+const getOrderedListStyles = ({ euiTheme }) => css `
+  margin-inline-start: ${euiTheme.size.l};
+  list-style: decimal;
+`;
+export const OrderedList = ({ children, ...restProps }) => {
+    const styles = useEuiMemoizedStyles(getOrderedListStyles);
+    return (_jsx("ol", { ...restProps, css: styles, children: children }));
+};

package/lib/theme/MDXComponents/Paragraph.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const Paragraph: ({ children }: HTMLAttributes<HTMLParagraphElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/theme/MDXComponents/Paragraph.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiText, useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+const getParagraphStyles = () => css `
+  margin-block: var(--eui-theme-content-vertical-spacing);
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+`;
+export const Paragraph = ({ children }) => {
+    const styles = useEuiMemoizedStyles(getParagraphStyles);
+    return (_jsx(EuiText, { size: "m", css: styles, component: "p", children: children }));
+};

package/lib/theme/MDXComponents/Table.d.ts

@@ -0,0 +1,2 @@
+import { JSX, TableHTMLAttributes } from 'react';
+export declare const Table: ({ children, }: TableHTMLAttributes<HTMLTableElement>) => JSX.Element;

package/lib/theme/MDXComponents/Table.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiTable } from '@elastic/eui';
+export const Table = ({ children, }) => (_jsx(EuiTable, { children: children }));

package/lib/theme/MDXComponents/TableBody.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes, JSX } from 'react';
+export declare const TableBody: ({ children, }: HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;

package/lib/theme/MDXComponents/TableBody.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiTableBody } from '@elastic/eui';
+export const TableBody = ({ children, }) => (_jsx(EuiTableBody, { children: children }));

package/lib/theme/MDXComponents/TableDataCell.d.ts

@@ -0,0 +1,2 @@
+import { JSX, TdHTMLAttributes } from 'react';
+export declare const TableDataCell: ({ children, }: TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;

package/lib/theme/MDXComponents/TableDataCell.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiTableRowCell, EuiText } from '@elastic/eui';
+export const TableDataCell = ({ children, }) => (_jsx(EuiTableRowCell, { children: _jsx(EuiText, { size: "m", component: "span", children: children }) }));

package/lib/theme/MDXComponents/TableHeader.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes, JSX } from 'react';
+export declare const TableHeader: ({ children, }: HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;