fix(website): fix broken Forms examples

Author: weronikaolejniczak

packages/website/docs/components/forms/date-and-time/date-picker-range.mdx

@@ -3,14 +3,18 @@ sidebar_position: 2
 keywords: [EuiDatePickerRange]
 ---
 
+import displayTogglesSource from '!raw-loader!../../../../src/components/display_toggles/display_toggles';
+
 # Date picker range
 
 To create a single date range control, use **EuiDatePickerRange** and pass individual [EuiDatePicker](./date-picker.mdx) components into the `startDateControl` and `endDateControl` props. You can control the state of both inputs as direct props on **EuiDatePickerRange** as well as control each individually. Date specific props need to applied to the individual components.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui';
 import moment from 'moment';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [startDate, setStartDate] = useState(moment());
@@ -45,6 +49,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 :::tip
 If you need even more functionality such as relative time, suggested date ranges, and refresh intervals, consider using [EuiSuperDatePicker](./super-date-picker.mdx).
@@ -54,6 +59,7 @@ If you need even more functionality such as relative time, suggested date ranges
 
 Use the `inline` prop to display the date picker directly in the page instead of inside a popover. If you do not need the default inline shadow effect, apply the `shadow={false}` prop.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import {
@@ -64,6 +70,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import moment from 'moment';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [shadow, setShadow] = useState(true);
@@ -117,6 +124,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 ### Dynamic `minDate` and `maxDate`
 

packages/website/docs/components/forms/date-and-time/date-picker.mdx

@@ -3,6 +3,8 @@ sidebar_position: 1
 keywords: [EuiDatePicker]
 ---
 
+import displayTogglesSource from '!raw-loader!../../../../src/components/display_toggles/display_toggles';
+
 # Date picker
 
 **EuiDatePicker** is the foundational component that all other EUI date and time controls are built upon. It itself depends upon <a href="https://momentjs.com/docs/" target="_blank">moment</a> for all of its formatting, and a forked and modified version of <a href="https://github.com/Hacker0x01/react-datepicker/tree/v2.0.0" target="_blank">react-datepicker</a> for accessibility.
@@ -33,9 +35,11 @@ export default () => {
 
 Examples of how the input can appear within a form. This should match our other form styles.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import { EuiDatePicker, EuiSpacer, EuiFormRow } from '@elastic/eui';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [startDate, setStartDate] = useState(null);
@@ -86,6 +90,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 ## Time selection
 
@@ -425,6 +430,7 @@ export default () => {
 
 Use the `inline` prop to display the date picker directly in the page instead of inside a popover. If you do not need the default inline shadow effect, apply the `shadow={false}` prop.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import {
@@ -434,6 +440,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import moment from 'moment';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [shadow, setShadow] = useState(true);
@@ -470,6 +477,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 ## Custom classes
 

packages/website/docs/components/forms/date-and-time/super-date-picker.mdx

@@ -388,7 +388,13 @@ import React, { useState } from 'react';
 import {
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSelect,
+  EuiSwitch,
+  EuiSpacer,
   OnTimeChangeProps,
+  useEuiTheme,
 } from '@elastic/eui';
 
 export default () => {
@@ -436,7 +442,7 @@ export default () => {
         width={width}
         compressed={compressed}
       />
-    </EuiSpacer>
+    </>
   );
 };
 ```