docs(website): add sample docs

.gitignore

@@ -12,7 +12,6 @@ coverage/
 reports/
 .nyc_output/
 tmp/
-docs/
 dist/
 lib/
 es/

website/docs/components/combo_box.mdx

@@ -0,0 +1,25 @@
+---
+title: EuiComboBox
+slug: combo-box
+---
+
+Use a **EuiComboBox** when the input has so many options that the user needs to be able to search them,
+the user needs to be able to select multiple options, and/or the user should have the ability to specify
+a custom value in addition to selecting from a predetermined list. If you're unsure of which selection component
+to use, see [EUI's in-depth guide to selection components](https://github.com/elastic/eui/discussions/7049)
+for more information.
+
+:::info Accessibility
+You must add an accessible label to each instance of EuiComboBox.
+
+Labels can be created by wrapping the combo box in an EuiFormRow with a label, adding an aria-label prop,
+or passing a text node ID to the aria-labelledby prop.
+:::
+
+<iframe src="https://eui.elastic.co/storybook/iframe.html?id=euicombobox--playground&viewMode=story" width="100%" />
+
+## Disabled
+
+Set the prop `isDisabled` to make the combo box disabled.
+
+<iframe src="https://eui.elastic.co/storybook/iframe.html?args=isDisabled:!true&id=euicombobox--playground&viewMode=story" width="100%" />

website/docs/guidelines/getting_started.mdx

@@ -0,0 +1,309 @@
+---
+title: Getting started
+slug: getting-started
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Installation
+
+EUI is published through [NPM](https://www.npmjs.com/package/@elastic/eui) as a dependency. To install EUI into
+an existing project, use the `yarn` CLI (`npm` is not supported).
+
+<Tabs>
+  <TabItem value="yarn" label="Yarn" default>
+    ```shell
+    yarn add @elastic/eui
+    ```
+  </TabItem>
+  <TabItem value="pnpm">
+    ```shell
+    pnpm add @elastic/eui
+    ```
+  </TabItem>
+</Tabs>
+
+Note that EUI has [several `peerDependencies` requirements](https://github.com/elastic/eui/blob/main/package.json)
+that will also need to be installed when starting with a blank project.
+
+<Tabs>
+  <TabItem value="yarn" label="Yarn" default>
+    ```shell
+    yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment prop-types
+    ```
+  </TabItem>
+  <TabItem value="pnpm">
+    ```shell
+    pnpm add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment prop-types
+    ```
+  </TabItem>
+</Tabs>
+
+You can read more about other ways to consume EUI in our wiki.
+
+## Setting up your application
+
+:::warning
+While EUI is in the process of converting from a Sass based theme to CSS-in-JS via Emotion. We require that both
+the [EuiProvider](https://eui.elastic.co/#/utilities/provider) **and** the compiled CSS (or raw Sass) files be imported
+during this transition.
+:::
+
+
+EUI provides a general context provider to handle global aspects like light and dark theme. You can import these
+default themes through their respective compiled CSS files. Use the `.min.css` file extension for the minified version.
+
+```jsx
+import React from 'react';
+import '@elastic/eui/dist/eui_theme_light.css';
+
+import { EuiProvider, EuiText } from '@elastic/eui';
+
+const MyApp = () => (
+  <EuiProvider colorMode="light">
+    <EuiText><p>Hello World!</p></EuiText>
+  </EuiProvider>
+);
+
+export default MyApp;
+```
+
+For the dark theme, you can swap the words `light` for `dark`.
+For more configuration options of the provider, see the
+[EuiProvider documentation](https://eui.elastic.co/#/utilities/provider).
+
+## Styling your application
+
+To build your custom components using EUI theme variables, functions, and mixins, you will need to consume them
+through one of the [Sass](https://eui.elastic.co/#/theming/sass),
+[Emotion](https://eui.elastic.co/#/theming/theme-provider),
+or [JSON import](https://github.com/elastic/eui/blob/main/wiki/consuming-eui/README.md#a-not-recommended-legacy-method-to-consume-theming-variables-from-sass) methods.
+
+<Tabs>
+  <TabItem value="sass" label="Sass">
+    ```scss title="This will require style, css, postcss, and sass loaders."
+    // index.scss
+    @import '@elastic/eui/src/themes/amsterdam/colors_light';
+    @import '@elastic/eui/src/themes/amsterdam/globals';
+
+    @import 'your/custom/styles';
+    ```
+  </TabItem>
+  <TabItem value="css-in-js" label="CSS-in-JS">
+    ```jsx title="As long as you have wrapped your application with EuiProvider, you have access to the JS theme tokens via useEuiTheme() and Emotion's css prop."
+    import React from 'react';
+    import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '@elastic/eui';
+    import { css } from '@emotion/react';
+
+    export default () => {
+      const { euiTheme } = useEuiTheme();
+      return (
+        <EuiText>
+          <p>
+            <EuiIcon
+              type="stopFilled"
+              size="xxl"
+              css={{ color: euiTheme.colors.primary }}
+            />{' '}
+            This primary color will adjust based on the light or dark theme value
+          </p>
+
+          <p
+            css={css`
+              background: ${euiTheme.colors.lightShade};
+              padding: calc(${euiTheme.size.base} * 2);
+            `}
+          >
+            The padding of this box is created using <EuiCode>calc()</EuiCode>{' '}
+            because EUI&apos;s theme sizes are string pixel values that are
+            calculated off the theme&apos;s <EuiCode>base</EuiCode>
+          </p>
+        </EuiText>
+      );
+    };
+    ```
+  </TabItem>
+</Tabs>
+
+### Customizing the style tokens
+
+EUI can be slightly customized to fit your branding needs by altering the base tokens like color and typography.
+Simply declare your token overrides before importing the whole EUI theme. This will re-compile
+all of the EUI components with your colors.
+
+For a full list of global tokens visit Customizing theme.
+
+:::warning Partial component support
+EUI is transitioning to a CSS-in-JS solution for theming and requires consuming/customizing global variables
+in **both the Sass and CSS-in-JS** methods. To track this effort,
+subscribe to the [Meta ticket](https://github.com/elastic/eui/issues/3912).
+:::
+
+<Tabs>
+  <TabItem value="sass" label="Sass">
+    ```scss title="This will require style, css, postcss, and sass loaders and a full re-compile of all EUI component styles."
+    $euiColorPrimary: #7B61FF;
+
+    // The following rebuilds the entire EUI component styles
+    @import '@elastic/eui/src/themes/amsterdam/theme_light';
+
+    @import 'your/custom/styles';
+    ```
+  </TabItem>
+  <TabItem value="css-in-js" label="CSS-in-JS">
+    ```jsx title="You can pass along a full or partial list of global overrides to the EuiProvider which will update the EUI components that are currently using the Emotion method of theming."
+    import React, { FunctionComponent, ReactNode } from 'react';
+    import { EuiCode, EuiText, EuiThemeProvider, useEuiTheme } from '@elastic/eui';
+
+    const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
+      const { euiTheme } = useEuiTheme();
+
+      return (
+        <EuiText
+          css={{
+            background: euiTheme.colors.lightShade,
+            padding: euiTheme.size.xl,
+          }}
+        >
+          <p>{children}</p>
+        </EuiText>
+      );
+    };
+
+    export default () => {
+      const overrides = {
+        colors: {
+          LIGHT: { lightShade: '#d3e6df' },
+          DARK: { lightShade: '#394c4b' },
+        },
+      };
+
+      return (
+        <div>
+          <EuiThemeProvider modify={overrides}>
+            <Box>
+              The background of this box is using the locally overridden value of{' '}
+              <EuiCode>euiTheme.colors.lightShade</EuiCode>
+            </Box>
+          </EuiThemeProvider>
+        </div>
+      );
+    };
+    ```
+</TabItem>
+</Tabs>
+
+#### Do not use in conjunction with the compiled CSS.
+
+If you provide both, it will duplicate the imported styles.
+
+#### Touch the least amount of variables possible.
+
+By nature EUI is very rigid. You shouldn't need much to make drastic changes to color. Most themes are less then a dozen variable overwrites in total.
+
+#### Do not overwrite individual component variables or .eui class names.
+
+Although this may be possible, components are much more prone to change and you'll risk breaking your theme. All EUI components accept custom a className which you can use to append your custom styles.
+
+## Fonts
+
+By default, EUI ships with a font stack that includes some outside, open source fonts. If your system is internet
+available you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need
+to bundle the physical fonts in your build. EUI will drop to System Fonts (which you may prefer) in their absence.
+
+```jsx
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+Or grab all weights, including italics, between 400 and 700 as a variable font.
+
+```jsx
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+
+### Embedding with @font-face
+
+If your application doesn't allow grabbing the font assets from a CDN, you'll need to download and locally provide
+the font files. You can download the files directly from their source site [rsms.me/inter/](https://rsms.me/inter),
+then follow the instructions in the provided CSS file for importing.
+We recommend using the single variable font file and importing with the following settings:
+
+```scss
+@font-face {
+  font-family: 'Inter';
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2") format("woff2");
+}
+```
+
+## Components, Services and Testing imports
+
+You can import React components from the top-level EUI module.
+
+```jsx
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiPanel,
+} from '@elastic/eui';
+```
+
+Most services are published from the lib/services directory.
+Some are published from their module directories in this directory.
+
+```jsx
+import { keys } from '@elastic/eui/lib/services';
+import { Timer } from '@elastic/eui/lib/services/time';
+```
+
+Test utilities are published from the lib/test directory.
+
+```jsx
+import { findTestSubject } from '@elastic/eui/lib/test'; // Enzyme
+import { findByTestSubject, render, screen } from '@elastic/eui/lib/test/rtl'; // React Testing Library
+```
+
+## Customizing with classes
+
+We do not recommend customizing EUI components by applying styles directly to EUI classes, eg. `.euiButton`.
+All components allow you to pass a custom `className` prop directly to the component which will then append this
+to the class list. Utilizing the cascade feature of CSS, you can then customize by overriding styles
+so long as your styles are imported `after` the EUI import.
+
+```jsx
+<EuiButton className="myCustomClass__button" />
+```
+
+Renders as:
+
+```jsx
+<button class="euiButton myCustomClass__button" />
+```
+
+## Customizing component defaults
+
+While all props can be individually customized via props, some components can have their default props customized
+globally via **EuiProvider's** `componentDefaults` API.
+[Read more in EuiProvider's documentation](https://eui.elastic.co/#/utilities/provider#component-defaults).
+
+```jsx
+<EuiProvider
+  componentDefaults={{
+    EuiTablePagination: { itemsPerPage: 20, },
+    EuiFocusTrap: { crossFrame: true },
+    EuiPortal: { insert },
+  }}
+>
+  <App />
+</EuiProvider>
+```

website/docs/intro.md

@@ -0,0 +1 @@
+# Elastic UI