@elastic/eui-docusaurus-theme 2.0.0

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

@@ -0,0 +1 @@
+export declare const Badge: import("react").FunctionComponent<import("@elastic/eui").EuiBadgeProps>;

package/lib/components/badge/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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 { EuiBadge } from '@elastic/eui';
+export const Badge = EuiBadge;

package/lib/components/codesandbox_icon/codesandbox_icon.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+type Props = HTMLAttributes<SVGElement>;
+export declare const CodeSandboxIcon: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/codesandbox_icon/codesandbox_icon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export const CodeSandboxIcon = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", preserveAspectRatio: "xMidYMid", viewBox: "-20 0 296 296", ...props, children: _jsx("path", { d: "M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54Zm23.814.627 50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82Zm80.66-180.887-48.817-28.289-42.863 24.872-43.188-24.897-49.252 28.667 91.914 52.882 92.206-53.235ZM0 222.212V74.495L127.987 0 256 74.182v147.797l-128.016 73.744L0 222.212Z" }) }));

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

@@ -0,0 +1 @@
+export { CodeSandboxIcon } from './codesandbox_icon';

package/lib/components/codesandbox_icon/index.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 { CodeSandboxIcon } from './codesandbox_icon';

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

@@ -0,0 +1,10 @@
+import { DemoSourceMeta } from '../demo';
+export interface DemoActionsBarProps {
+    activeSource: DemoSourceMeta | null;
+    sources: DemoSourceMeta[];
+    isSourceOpen: boolean;
+    setSourceOpen(isOpen: boolean): void;
+    onClickReloadExample(): void;
+    onClickCopyToClipboard(): void;
+}
+export declare const DemoActionsBar: ({ isSourceOpen, setSourceOpen, activeSource, sources, onClickReloadExample, onClickCopyToClipboard, }: DemoActionsBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+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 { EuiButton, EuiButtonIcon, EuiFlexGroup, EuiToolTip, useEuiMemoizedStyles, darken, } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { extraActions } from '@theme/Demo/actions';
+const getDemoActionsBarStyles = (euiTheme) => {
+    return {
+        actionsBar: css `
+      padding: var(--eui-size-s);
+      background: ${darken(euiTheme.euiTheme.colors.body, 0.05)};
+      border-top: 1px solid var(--docs-demo-border-color);
+
+      &:last-child {
+        // border radius should be 1px smaller to work nicely
+        // with the wrapper border width of 1px
+        border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px)
+          calc(var(--docs-demo-border-radius) - 1px);
+      }
+    `,
+        button: css `
+      margin-right: auto;
+    `,
+    };
+};
+export const DemoActionsBar = ({ isSourceOpen, setSourceOpen, activeSource, sources, 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, 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" }) })] }));
+};

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

@@ -0,0 +1 @@
+export { DemoActionsBar, type DemoActionsBarProps } from './actions_bar';

package/lib/components/demo/actions_bar/index.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 { DemoActionsBar } from './actions_bar';

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

@@ -0,0 +1,18 @@
+/**
+ * Transforms input JS/TS source code to a react-live compatible syntax.
+ * react-live uses the surcase library to transform input source code into
+ * browser-readable JavaScript.
+ *
+ * While surcase does support CommonJS and ESM import/export statements,
+ * it's not trivial to expose our internal React and EUI exports through it
+ * and because we already control the execution scope of the interactive demos
+ * it isn't really necessary to implement a smart `require()` replacement.
+ *
+ * Returning an IIFE is necessary when the source code is more than just
+ * a JSX component definition (e.g. it contains a variable definition
+ * or `export default` statement).
+ *
+ * @see https://github.com/alangpierce/sucrase
+ * @see https://github.com/FormidableLabs/react-live/blob/master/packages/react-live/src/utils/transpile/index.ts
+ */
+export declare const demoCodeTransformer: (code: string) => string;

package/lib/components/demo/code_transformer.js

@@ -0,0 +1,39 @@
+/*
+ * 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 IMPORT_REGEX = /^import [^'"]* from ['"]([^.'"\n ][^'"\n ]*)['"];?/gm;
+const DEFAULT_EXPORT_REGEX = /export default /;
+const COMPONENT_ONLY_REGEX = /^\(?</;
+/**
+ * Transforms input JS/TS source code to a react-live compatible syntax.
+ * react-live uses the surcase library to transform input source code into
+ * browser-readable JavaScript.
+ *
+ * While surcase does support CommonJS and ESM import/export statements,
+ * it's not trivial to expose our internal React and EUI exports through it
+ * and because we already control the execution scope of the interactive demos
+ * it isn't really necessary to implement a smart `require()` replacement.
+ *
+ * Returning an IIFE is necessary when the source code is more than just
+ * a JSX component definition (e.g. it contains a variable definition
+ * or `export default` statement).
+ *
+ * @see https://github.com/alangpierce/sucrase
+ * @see https://github.com/FormidableLabs/react-live/blob/master/packages/react-live/src/utils/transpile/index.ts
+ */
+export const demoCodeTransformer = (code) => {
+    // Remove ESM imports
+    code = code.replace(IMPORT_REGEX, '');
+    // Handle ESM default exports
+    code = code.replace(DEFAULT_EXPORT_REGEX, 'return ');
+    // If the demo is JSX only return as-is
+    if (COMPONENT_ONLY_REGEX.test(code)) {
+        return code;
+    }
+    // If the demo is more than just JSX wrap in an immediately invoked function expression
+    return `(() => { ${code} })()`;
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Find dependencies in import statements and return
+ * a package.json-like dependencies object.
+ */
+export declare const findExternalDependencies: (source: string) => Record<string, string>;

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

@@ -0,0 +1,30 @@
+/*
+ * 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 importRegex = /import([ \n\t]*(?:[^ \n\t\{\}]+[ \n\t]*,?)?(?:[ \n\t]*\{(?:[ \n\t]*[^ \n\t"'\{\}]+[ \n\t]*,?)+\})?[ \n\t]*)from[ \n\t]*(['"])(?<dependency>[^'"\n]+)(?:['"])/g;
+/**
+ * Find dependencies in import statements and return
+ * a package.json-like dependencies object.
+ */
+export const findExternalDependencies = (source) => {
+    return [...source.matchAll(importRegex)].reduce((acc, item) => {
+        const dependency = item.groups?.dependency;
+        if (!dependency) {
+            return acc;
+        }
+        const splitDependency = dependency.split('/');
+        if (dependency[0] === '@') {
+            // org-scoped dependencies have a single slash; ignore subsequent ones
+            acc[splitDependency.slice(0, 2).join('/')] = 'latest';
+        }
+        else if (splitDependency[0] && /^[a-z]/i.test(splitDependency[0])) {
+            // non org-scoped dependencies should have no slashes
+            acc[splitDependency[0]] = 'latest';
+        }
+        return acc;
+    }, {});
+};

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

@@ -0,0 +1 @@
+export { createOpenInCodeSandboxAction } from './open_action';

package/lib/components/demo/codesandbox/index.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 { createOpenInCodeSandboxAction } from './open_action';

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

@@ -0,0 +1,16 @@
+import type { ActionComponent } from '../../../theme/Demo/actions';
+export declare const defaultCodeSandboxParameters: {
+    files: {
+        'index.tsx': {
+            content: string;
+        };
+        'public/index.html': {
+            content: string;
+        };
+    };
+};
+export type Options = {
+    files?: Record<string, string>;
+    dependencies: Record<string, string>;
+};
+export declare const createOpenInCodeSandboxAction: ({ files, dependencies }: Options) => ActionComponent;

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

@@ -0,0 +1,91 @@
+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 { useMemo } from 'react';
+import { getParameters } from 'codesandbox/lib/api/define';
+import dedent from 'dedent';
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { CodeSandboxIcon } from '../../codesandbox_icon';
+import { findExternalDependencies } from './find_external_dependencies';
+const indexTsxSource = dedent `
+  import React from 'react';
+  import { createRoot } from 'react-dom/client';
+  import createCache from '@emotion/cache';
+  import { EuiProvider, euiStylisPrefixer } from '@elastic/eui';
+
+  import Demo from './demo';
+
+  const cache = createCache({
+    key: 'codesandbox',
+    stylisPlugins: [euiStylisPrefixer],
+    container: document.querySelector('meta[name="emotion-styles"]')!,
+  });
+  cache.compat = true;
+
+  const root = createRoot(document.getElementById('root')!);
+  root.render(
+    <EuiProvider cache={cache}>
+      <Demo />
+    </EuiProvider>
+  );`;
+const publicIndexHtmlSource = dedent `
+  <head>
+    <title>@elastic/eui component demo</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet" />
+    <meta name="emotion-styles">
+  </head>
+  <body>
+    <div id="root" />
+  </body>
+`;
+export const defaultCodeSandboxParameters = {
+    files: {
+        'index.tsx': {
+            content: indexTsxSource,
+        },
+        'public/index.html': {
+            content: publicIndexHtmlSource,
+        },
+    },
+};
+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}`;
+};
+export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => ({ activeSource }) => {
+    const parameters = useMemo(() => {
+        const source = activeSource?.code || '';
+        // Compute list of extra files that may be passed
+        const extraFiles = Object.entries(files).reduce((acc, [file, content]) => {
+            acc[file] = { content };
+            return acc;
+        }, {});
+        return getParameters({
+            files: {
+                ...defaultCodeSandboxParameters.files,
+                'demo.tsx': {
+                    content: processTsxSource(source),
+                },
+                'package.json': {
+                    content: {
+                        dependencies: {
+                            ...findExternalDependencies(source),
+                            ...dependencies,
+                        },
+                    },
+                },
+                ...extraFiles,
+            },
+        });
+    }, [activeSource]);
+    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" }) })] }));
+};

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

@@ -0,0 +1,14 @@
+import { DemoSourceMeta } from './demo';
+export interface DemoContextObject {
+    /**
+     * Array of all available sources for this demo instance
+     */
+    sources: DemoSourceMeta[];
+    /**
+     * Add source to the list of available sources
+     * This should only be used internally when initializing the component!
+     */
+    addSource(source: DemoSourceMeta): void;
+}
+export declare const DemoContext: import("react").Context<DemoContextObject>;
+export declare const useDemoContext: () => DemoContextObject;

package/lib/components/demo/context.js

@@ -0,0 +1,13 @@
+/*
+ * 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 } from 'react';
+export const DemoContext = createContext({
+    sources: [],
+    addSource: () => { },
+});
+export const useDemoContext = () => useContext(DemoContext);

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

@@ -0,0 +1,5 @@
+import { Demo, DemoProps } from './demo';
+/**
+ * Creates a custom <Demo /> component with predefined props.
+ */
+export declare const createDemo: (defaultProps: Partial<DemoProps>) => typeof Demo;

package/lib/components/demo/create_demo.js

@@ -0,0 +1,13 @@
+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 { Demo } from './demo';
+/**
+ * Creates a custom <Demo /> component with predefined props.
+ */
+export const createDemo = (defaultProps) => (props) => _jsx(Demo, { ...defaultProps, ...props });

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

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+import { DemoPreviewProps } from './preview/preview';
+export interface DemoSourceMeta {
+    code: string;
+    isActive: boolean;
+    filename?: string;
+}
+export interface DemoProps extends PropsWithChildren {
+    /**
+     * Whether the source code editor is open by default
+     */
+    isSourceOpen?: boolean;
+    /**
+     * Allows to extend the default scope of the rendered demo and pass additional
+     * properties available within the demo.
+     *
+     * The default scope exposes all React and EUI exports.
+     */
+    scope?: Record<string, unknown>;
+    previewPadding?: DemoPreviewProps['padding'];
+    previewWrapper?: DemoPreviewProps['wrapperComponent'];
+}
+export declare const Demo: ({ children, scope, isSourceOpen: _isSourceOpen, previewPadding, previewWrapper, }: DemoProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/components/demo/demo.js

@@ -0,0 +1,61 @@
+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 { 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 { css } from '@emotion/react';
+import { demoDefaultScope } from '@theme/Demo/default_scope';
+import { DemoContext } from './context';
+import { DemoEditor } from './editor';
+import { DemoPreview } from './preview';
+import { DemoSource } from './source';
+import { originalScope } from './scope';
+import { DemoActionsBar } from './actions_bar';
+import { demoCodeTransformer } from './code_transformer';
+const getDemoStyles = (euiTheme) => ({
+    demo: css `
+    --docs-demo-border-color: ${euiTheme.euiTheme.border.color};
+    --docs-demo-border-radius: ${euiTheme.euiTheme.size.s};
+
+    border: 1px solid var(--docs-demo-border-color);
+    border-radius: var(--docs-demo-border-radius);
+    margin-block: ${euiTheme.euiTheme.size.xl};
+    word-break: break-word;
+  `,
+});
+export const Demo = ({ children, scope, isSourceOpen: _isSourceOpen = false, previewPadding, previewWrapper, }) => {
+    const styles = useEuiMemoizedStyles(getDemoStyles);
+    const [sources, setSources] = useState([]);
+    const [isSourceOpen, setIsSourceOpen] = useState(_isSourceOpen);
+    const activeSource = sources[0] || null;
+    // liveProviderKey restarts the demo to its initial state
+    const [liveProviderKey, setLiveProviderKey] = useState(0);
+    const finalScope = useMemo(() => ({
+        ...originalScope,
+        ...demoDefaultScope,
+        ...scope,
+    }), [scope]);
+    const addSource = useCallback((source) => {
+        setSources((sources) => [...sources, source]);
+    }, []);
+    const onClickCopyToClipboard = useCallback(() => {
+        copyToClipboard(activeSource?.code || '');
+    }, [activeSource]);
+    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, sources: sources, onClickCopyToClipboard: onClickCopyToClipboard, onClickReloadExample: onClickReloadExample }), isSourceOpen && _jsx(DemoEditor, {})] }, liveProviderKey), Children.map(children, (child, index) => {
+                    if (isElement(child) && child.type === DemoSource) {
+                        return child;
+                    }
+                    return _jsx(DemoSource, { isActive: index === 0, children: child });
+                })] }) }));
+};

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

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

package/lib/components/demo/editor/editor.js

@@ -0,0 +1,39 @@
+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 { LiveEditor, LiveError } from 'react-live';
+import { css } from '@emotion/react';
+import { useEuiMemoizedStyles } from '@elastic/eui';
+const getEditorStyles = () => ({
+    editor: css `
+    font-family: var(--ifm-font-family-monospace);
+    border-radius: 0 0 var(--docs-demo-border-radius) var(--docs-demo-border-radius);
+
+    & .prism-code {
+      border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) calc(var(--docs-demo-border-radius) - 1px);
+      max-height: 450px;
+      overflow: auto;
+    }
+  `,
+    error: css `
+    // docusaurus overrides the default pre styles
+    // forcing us to use higher specificity here
+    && > pre {
+      font-size: var(--eui-font-size-s);
+      background: var(--eui-background-color-danger);
+      color: var(--eui-color-danger-text);
+      padding: var(--eui-size-xs) var(--eui-size-s);
+      margin: 0;
+      border-radius: 0;
+    }
+  `,
+});
+export const DemoEditor = () => {
+    const styles = useEuiMemoizedStyles(getEditorStyles);
+    return (_jsxs("div", { css: styles.editor, children: [_jsx("div", { css: styles.error, children: _jsx(LiveError, {}) }), _jsx("div", { children: _jsx(LiveEditor, { tabMode: "focus" }) })] }));
+};

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

@@ -0,0 +1 @@
+export { DemoEditor } from './editor';

package/lib/components/demo/editor/index.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 { DemoEditor } from './editor';

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

@@ -0,0 +1,3 @@
+export { Demo, type DemoProps } from './demo';
+export { DemoSource } from './source';
+export { createDemo } from './create_demo';

package/lib/components/demo/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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 { Demo } from './demo';
+export { DemoSource } from './source';
+export { createDemo } from './create_demo';

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

@@ -0,0 +1 @@
+export { DemoPreview } from './preview';

package/lib/components/demo/preview/index.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 { DemoPreview } from './preview';

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

@@ -0,0 +1,7 @@
+import { ComponentType, PropsWithChildren } from 'react';
+import { EuiPaddingSize } from '@elastic/eui';
+export interface DemoPreviewProps {
+    padding?: EuiPaddingSize;
+    wrapperComponent?: ComponentType<PropsWithChildren>;
+}
+export declare const DemoPreview: ({ padding, wrapperComponent: WrapperComponent, }: DemoPreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment } 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 { LivePreview } from 'react-live';
+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';
+const getPreviewStyles = (euiTheme) => ({
+    previewWrapper: css `
+    padding: var(--docs-demo-preview-padding);
+    border-radius: var(--docs-demo-border-radius);
+  `,
+});
+/**
+ * PreviewLoader provides a fallback content for the server-side render
+ * of the live component preview component.
+ * Due to the limitations of react-live the demo is only rendered client-side.
+ */
+const PreviewLoader = () => _jsx("div", { children: "Loading..." });
+export const DemoPreview = ({ padding = 'l', wrapperComponent: WrapperComponent = Fragment, }) => {
+    const euiTheme = useEuiTheme();
+    const styles = getPreviewStyles(euiTheme);
+    const paddingSize = euiPaddingSize(euiTheme, padding);
+    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, {}) }) }) }) })) }));
+};

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

@@ -0,0 +1 @@
+export declare const originalScope: Record<string, unknown>;

package/lib/components/demo/scope.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.
+ */
+import React from 'react';
+export const originalScope = {
+    React,
+    ...React,
+};

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface SourceMeta {
+    /**
+     * The source code
+     */
+    code: string;
+}
+/**
+ * Get source string from given children.
+ */
+export declare const getSourceFromChildren: (children: ReactNode) => string | null;