From ad57972dcbbff4dc2f2953e14943ed191acce1b2 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:34:36 -0400
Subject: [PATCH 1/2] wrap all website examples in ThemeProvider

---
 apps/website/src/components/LiveExample.astro |    9 +-
 examples/InputGroup.checkboxGroup.tsx         |   14 +-
 examples/Select.disable.tsx                   |   41 +-
 examples/Select.icon.tsx                      |   49 +-
 examples/Select.statuses.tsx                  |   43 +-
 examples/Select.sublabels.tsx                 |   53 +-
 examples/Select.truncate.tsx                  |   43 +-
 examples/index.tsx                            | 1335 +++++++++++++----
 8 files changed, 1176 insertions(+), 411 deletions(-)

diff --git a/apps/website/src/components/LiveExample.astro b/apps/website/src/components/LiveExample.astro
index 9c1911a88d5..a39909fbda0 100644
--- a/apps/website/src/components/LiveExample.astro
+++ b/apps/website/src/components/LiveExample.astro
@@ -30,14 +30,9 @@ if (code.includes('Copyright (c) Bentley Systems')) {
 ---
 
 <div class='demo-box'>
-  <ThemeProvider
-    className='demo-iui-wrapper'
-    theme='dark'
-    themeOptions={{ applyBackground: false }}
-    client:load
-  >
+  <div class='demo-iui-wrapper'>
     <slot />
-  </ThemeProvider>
+  </div>
   <OpenInCodesandbox class='sandbox-link' code={code} />
 </div>
 <demo-code>
diff --git a/examples/InputGroup.checkboxGroup.tsx b/examples/InputGroup.checkboxGroup.tsx
index bd2643c1455..b0ac8585de4 100644
--- a/examples/InputGroup.checkboxGroup.tsx
+++ b/examples/InputGroup.checkboxGroup.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { InputGroup, Checkbox } from '@itwin/itwinui-react';
 
-export default (args) => {
+export default () => {
   const option1Label = 'Football';
   const option2Label = 'Hockey';
   const [option1, setOption1] = React.useState(true);
@@ -33,32 +33,22 @@ export default (args) => {
     setOption2(value);
   };
   return (
-    <InputGroup
-      label='Select your hobbies'
-      message='Choose some hobbies'
-      {...args}
-    >
+    <InputGroup label='Select your hobbies' message='Choose some hobbies'>
       <Checkbox
         onChange={(event) => onAllChange(event.target.checked)}
         label='Select all'
         indeterminate={isIndeterminate}
         checked={allOptions}
-        disabled={args.disabled}
-        required={args.required}
       />
       <Checkbox
         onChange={(event) => setOption1(event.target.checked)}
         label={option1Label}
         checked={option1}
-        disabled={args.disabled}
-        required={args.required}
       />
       <Checkbox
         onChange={(event) => setOption2(event.target.checked)}
         label={option2Label}
         checked={option2}
-        disabled={args.disabled}
-        required={args.required}
       />
     </InputGroup>
   );
diff --git a/examples/Select.disable.tsx b/examples/Select.disable.tsx
index baf10651da4..b57cf2cff4a 100644
--- a/examples/Select.disable.tsx
+++ b/examples/Select.disable.tsx
@@ -5,34 +5,25 @@
 import * as React from 'react';
 import { Select } from '@itwin/itwinui-react';
 
-export default (args) => {
-  const {
-    options = [
-      {
-        value: 1,
-        label: 'Item #1',
-      },
-      {
-        value: 2,
-        label: 'Item #2',
-      },
-      {
-        value: 3,
-        label: 'Item #3',
-      },
-    ],
-    placeholder = 'Placeholder text',
-    ...rest
-  } = args;
-  const [value, setValue] = React.useState<number | undefined>(undefined);
+export default () => {
   return (
     <Select<number>
       disabled
-      {...rest}
-      options={options}
-      value={value}
-      onChange={setValue}
-      placeholder={placeholder}
+      options={[
+        {
+          value: 1,
+          label: 'Item #1',
+        },
+        {
+          value: 2,
+          label: 'Item #2',
+        },
+        {
+          value: 3,
+          label: 'Item #3',
+        },
+      ]}
+      placeholder={'Placeholder text'}
     />
   );
 };
diff --git a/examples/Select.icon.tsx b/examples/Select.icon.tsx
index 0b3309f2a1d..117edb83352 100644
--- a/examples/Select.icon.tsx
+++ b/examples/Select.icon.tsx
@@ -10,36 +10,27 @@ import {
   SvgSmileyNeutral,
 } from '@itwin/itwinui-icons-react';
 
-export default (args) => {
-  const {
-    options = [
-      {
-        value: 'happy',
-        label: 'Happy',
-        icon: <SvgSmileyHappy />,
-      },
-      {
-        value: 'neutral',
-        label: 'Neutral',
-        icon: <SvgSmileyNeutral />,
-      },
-      {
-        value: 'sad',
-        label: 'Sad',
-        icon: <SvgSmileySad />,
-      },
-    ],
-    placeholder = 'How are you today?',
-    ...rest
-  } = args;
-  const [value, setValue] = React.useState<string | undefined>(undefined);
+export default () => {
   return (
-    <Select<string>
-      {...rest}
-      options={options}
-      value={value}
-      onChange={setValue}
-      placeholder={placeholder}
+    <Select
+      options={[
+        {
+          value: 'happy',
+          label: 'Happy',
+          icon: <SvgSmileyHappy />,
+        },
+        {
+          value: 'neutral',
+          label: 'Neutral',
+          icon: <SvgSmileyNeutral />,
+        },
+        {
+          value: 'sad',
+          label: 'Sad',
+          icon: <SvgSmileySad />,
+        },
+      ]}
+      placeholder={'How are you today?'}
     />
   );
 };
diff --git a/examples/Select.statuses.tsx b/examples/Select.statuses.tsx
index 5c20cfd28f0..0bef5a92126 100644
--- a/examples/Select.statuses.tsx
+++ b/examples/Select.statuses.tsx
@@ -5,35 +5,26 @@
 import * as React from 'react';
 import { MenuItem, Select } from '@itwin/itwinui-react';
 
-export default (args) => {
-  const {
-    options = [
-      {
-        value: 'yellow',
-        label: 'Yellow',
-      },
-      {
-        value: 'green',
-        label: 'Green',
-      },
-      {
-        value: 'red',
-        label: 'Red',
-      },
-    ],
-    placeholder = 'Placeholder text',
-    ...rest
-  } = args;
-  const [selectedValue, setSelectedValue] = React.useState<string | undefined>(
-    undefined,
-  );
+export default () => {
+  const options = [
+    {
+      value: 'yellow',
+      label: 'Yellow',
+    },
+    {
+      value: 'green',
+      label: 'Green',
+    },
+    {
+      value: 'red',
+      label: 'Red',
+    },
+  ];
+
   return (
     <Select<string>
-      {...rest}
       options={options}
-      value={selectedValue}
-      onChange={setSelectedValue}
-      placeholder={placeholder}
+      placeholder={'Placeholder text'}
       itemRenderer={(option) => (
         <MenuItem
           style={{
diff --git a/examples/Select.sublabels.tsx b/examples/Select.sublabels.tsx
index 3bac4d1949b..c8b632c0dc4 100644
--- a/examples/Select.sublabels.tsx
+++ b/examples/Select.sublabels.tsx
@@ -4,40 +4,27 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Select } from '@itwin/itwinui-react';
-import { useState } from 'react';
 
-export default (args) => {
-  const {
-    options = [
-      {
-        value: 1,
-        label: 'Item #1',
-        sublabel: 'Sublabel #1',
-      },
-      {
-        value: 2,
-        label: 'Item #2',
-        sublabel: 'Sublabel #2',
-      },
-      {
-        value: 3,
-        label: 'Item #3',
-        sublabel: 'Sublabel #3',
-      },
-    ],
-    placeholder = 'Placeholder text',
-    size = 'large',
-    ...rest
-  } = args;
-  const [value, setValue] = useState<number | undefined>(undefined);
+export default () => {
+  const options = [
+    {
+      value: 1,
+      label: 'Item #1',
+      sublabel: 'Sublabel #1',
+    },
+    {
+      value: 2,
+      label: 'Item #2',
+      sublabel: 'Sublabel #2',
+    },
+    {
+      value: 3,
+      label: 'Item #3',
+      sublabel: 'Sublabel #3',
+    },
+  ];
+
   return (
-    <Select<number>
-      {...rest}
-      options={options}
-      value={value}
-      onChange={setValue}
-      placeholder={placeholder}
-      size={size}
-    />
+    <Select options={options} placeholder={'Placeholder text'} size={'large'} />
   );
 };
diff --git a/examples/Select.truncate.tsx b/examples/Select.truncate.tsx
index 6a791ed94c9..ce23ccd5849 100644
--- a/examples/Select.truncate.tsx
+++ b/examples/Select.truncate.tsx
@@ -6,27 +6,23 @@ import * as React from 'react';
 import { MenuItem, MiddleTextTruncation, Select } from '@itwin/itwinui-react';
 import { useCallback, useState } from 'react';
 
-export default (args) => {
-  const {
-    options = [
-      {
-        value:
-          'MyFileWithAReallyLongNameThatWillBeTruncatedBecauseItIsReallyThatLongSoHardToBelieve_FinalVersion_V2.html',
-        label:
-          'MyFileWithAReallyLongNameThatWillBeTruncatedBecauseItIsReallyThatLongSoHardToBelieve_FinalVersion_V2.html',
-      },
-      {
-        value: 'ShortNameFile.jpg',
-        label: 'ShortNameFile.jpg',
-      },
-      {
-        value: 'SomeOtherFile.dgn',
-        label: 'SomeOtherFile.dgn',
-      },
-    ],
-    placeholder = 'Placeholder text',
-    ...rest
-  } = args;
+export default () => {
+  const options = [
+    {
+      value:
+        'MyFileWithAReallyLongNameThatWillBeTruncatedBecauseItIsReallyThatLongSoHardToBelieve_FinalVersion_V2.html',
+      label:
+        'MyFileWithAReallyLongNameThatWillBeTruncatedBecauseItIsReallyThatLongSoHardToBelieve_FinalVersion_V2.html',
+    },
+    {
+      value: 'ShortNameFile.jpg',
+      label: 'ShortNameFile.jpg',
+    },
+    {
+      value: 'SomeOtherFile.dgn',
+      label: 'SomeOtherFile.dgn',
+    },
+  ];
   const [selectedValue, setSelectedValue] = useState<string | undefined>(
     options[0].value,
   );
@@ -39,12 +35,11 @@ export default (args) => {
     [],
   );
   return (
-    <Select<string>
-      {...rest}
+    <Select
       options={options}
       value={selectedValue}
       onChange={setSelectedValue}
-      placeholder={placeholder}
+      placeholder={'Placeholder text'}
       itemRenderer={(option) => (
         <MenuItem>
           <MiddleTextTruncation
diff --git a/examples/index.tsx b/examples/index.tsx
index 88f235bc230..f027249e2c9 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -2,258 +2,1083 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { default as AlertMainExample } from './Alert.main';
-export { default as AlertInlineExample } from './Alert.inline';
-export { default as AlertInformationalExample } from './Alert.informational';
-export { default as AlertPositiveExample } from './Alert.positive';
-export { default as AlertNegativeExample } from './Alert.negative';
-export { default as AlertStickyExample } from './Alert.sticky';
-export { default as AlertWarningExample } from './Alert.warning';
-
-export { default as AvatarMainExample } from './Avatar.main';
-export { default as AvatarGroupExample } from './Avatar.group';
-export { default as AvatarGroupAnimatedExample } from './Avatar.groupanimated';
-export { default as AvatarGroupOverflowExample } from './Avatar.groupoverflow';
-export { default as AvatarGroupOverflowTooltipExample } from './Avatar.groupoverflowtooltip';
-export { default as AvatarGroupStackedExample } from './Avatar.groupstacked';
-export { default as AvatarIconExample } from './Avatar.icon';
-export { default as AvatarInitialsExample } from './Avatar.initials';
-export { default as AvatarPictureExample } from './Avatar.picture';
-export { default as AvatarSizesExample } from './Avatar.sizes';
-export { default as AvatarStatusesExample } from './Avatar.statuses';
-
-export { default as AnchorMainExample } from './Anchor.main';
-export { default as AnchorAsButtonExample } from './Anchor.asbutton';
-
-export { default as BadgeMainExample } from './Badge.main';
-export { default as BadgeSoftExample } from './Badge.soft';
-export { default as BadgeStatusesExample } from './Badge.statuses';
-
-export { default as BlockquoteFooterExample } from './Blockquote.footer';
-export { default as BlockquoteMainExample } from './Blockquote.main';
-
-export { default as BreadcrumbsButtonExample } from './Breadcrumbs.button';
-export { default as BreadcrumbsExtremeTruncationExample } from './Breadcrumbs.extremeTruncation';
-export { default as BreadcrumbsFolderExample } from './Breadcrumbs.folder';
-export { default as BreadcrumbsLinkExample } from './Breadcrumbs.link';
-export { default as BreadcrumbsMainExample } from './Breadcrumbs.main';
-export { default as BreadcrumbsTruncationExample } from './Breadcrumbs.truncation';
-export { default as BreadcrumbsCustomOverflowDropdownExample } from './Breadcrumbs.customOverflowDropdown';
-
-export { default as ButtonSizeExample } from './Button.size';
-export { default as ButtonDefaultExample } from './Button.default';
-export { default as ButtonHighVisibilityExample } from './Button.highvisibility';
-export { default as ButtonBorderlessExample } from './Button.borderless';
-export { default as ButtonCTAExample } from './Button.cta';
-export { default as ButtonMainExample } from './Button.main';
-export { default as IconButtonMainExample } from './IconButton.main';
-export { default as IdeasButtonMainExample } from './IdeasButton.main';
-export { default as SplitButtonMainExample } from './SplitButton.main';
-
-export { default as ButtonGroupMainExample } from './ButtonGroup.main';
-export { default as ButtonGroupVerticalExample } from './ButtonGroup.vertical';
-export { default as ButtonGroupOverflowExample } from './ButtonGroup.overflow';
-export { default as ButtonGroupInputExample } from './ButtonGroup.input';
-export { default as ButtonGroupUsageExample } from './ButtonGroup.usage';
-
-export { default as CarouselMainExample } from './Carousel.main';
-export { default as CarouselControlledExample } from './Carousel.controlled';
-export { default as CarouselOnlyDotsExample } from './Carousel.onlyDots';
-
-export { default as CheckboxMainExample } from './Checkbox.main';
-export { default as CheckboxIndeterminateExample } from './Checkbox.indeterminate';
-export { default as CheckboxLoadingExample } from './Checkbox.loading';
-export { default as CheckboxStatusesExample } from './Checkbox.statuses';
-export { default as CheckboxVisibilityExample } from './Checkbox.visibility';
-export { default as CheckboxInputGroupExample } from './Checkbox.inputgroup';
-
-export { default as CodeMainExample } from './Code.main';
-
-export { default as ColorPickerMainExample } from './ColorPicker.main';
-export { default as ColorPickerBasicExample } from './ColorPicker.basic';
-export { default as ColorPickerAdvancedExample } from './ColorPicker.advanced';
-export { default as ColorPickerAdvancedPopoverExample } from './ColorPicker.advancedPopover';
-
-export { default as ComboBoxMainExample } from './ComboBox.main';
-export { default as ComboBoxControlledExample } from './ComboBox.controlled';
-export { default as ComboBoxCustomExample } from './ComboBox.custom';
-export { default as ComboBoxDisabledExample } from './ComboBox.disabled';
-export { default as ComboBoxLabelExample } from './ComboBox.label';
-export { default as ComboBoxLoadingExample } from './ComboBox.loading';
-export { default as ComboBoxMessageExample } from './ComboBox.message';
-export { default as ComboBoxMessageIconExample } from './ComboBox.messageIcon';
-export { default as ComboBoxMultipleSelectExample } from './ComboBox.multipleSelect';
-export { default as ComboBoxStatusExample } from './ComboBox.status';
-export { default as ComboBoxVirtualizedExample } from './ComboBox.virtualized';
-
-export { default as DatePickerMainExample } from './DatePicker.main';
-export { default as DatePickerMenuExample } from './DatePicker.menu';
-export { default as DatePickerBasicExample } from './DatePicker.basic';
-export { default as DatePickerWithTimeExample } from './DatePicker.withtime';
-export { default as DatePickerWithCombinedTimeExample } from './DatePicker.withcombinedtime';
-export { default as DatePickerDateRangeExample } from './DatePicker.daterange';
-export { default as DatePickerWithYearExample } from './DatePicker.withyear';
-export { default as DatePickerLocalizedExample } from './DatePicker.localized';
-export { default as DatePickerDatesDisabledExample } from './DatePicker.datesdisabled';
-
-export { default as DialogDismissibleExample } from './Dialog.dismissible';
-export { default as DialogDraggableExample } from './Dialog.draggable';
-export { default as DialogFullPageExample } from './Dialog.fullpage';
-export { default as DialogMainExample } from './Dialog.main';
-export { default as DialogModalExample } from './Dialog.modal';
-export { default as DialogNonDismissibleExample } from './Dialog.nondismissible';
-export { default as DialogPlacementExample } from './Dialog.placement';
-
-export { default as DropdownButtonMainExample } from './DropdownButton.main';
-
-export { default as DropdownMenuMainExample } from './DropdownMenu.main';
-export { default as DropdownMenuBasicExample } from './DropdownMenu.basic';
-export { default as DropdownMenuIconExample } from './DropdownMenu.icon';
-export { default as DropdownMenuBadgeExample } from './DropdownMenu.badge';
-export { default as DropdownMenuSublabelExample } from './DropdownMenu.sublabel';
-export { default as DropdownMenuSubmenuExample } from './DropdownMenu.submenu';
-export { default as DropdownMenuSeparatorExample } from './DropdownMenu.separator';
-export { default as DropdownMenuContentExample } from './DropdownMenu.content';
-
-export { default as ExpandableBlockMainExample } from './ExpandableBlock.main';
-export { default as ExpandableBlockWithCaptionExample } from './ExpandableBlock.withcaption';
-export { default as ExpandableBlockAccordionExample } from './ExpandableBlock.accordion';
-export { default as ExpandableBlockStatusExample } from './ExpandableBlock.status';
-export { default as ExpandableBlockSmallExample } from './ExpandableBlock.small';
-export { default as ExpandableBlockBorderlessExample } from './ExpandableBlock.borderless';
-export { default as ExpandableBlockFormExample } from './ExpandableBlock.form';
-export { default as ExpandableBlockDisabledExample } from './ExpandableBlock.disabled';
-
-export { default as FieldsetMainExample } from './Fieldset.main';
-export { default as FieldsetDisabledExample } from './Fieldset.disabled';
-
-export { default as FileUploadMainExample } from './FileUpload.main';
-
-export { default as FlexMainExample } from './Flex.main';
-
-export { default as FooterMainExample } from './Footer.main';
-
-export { default as HeaderMainExample } from './Header.main';
-
-export { default as InformationPanelMainExample } from './InformationPanel.main';
-
-export { default as InputGroupToggleSwitchExample } from './InputGroup.toggleSwitch';
-export { default as InputGroupCheckboxGroupExample } from './InputGroup.checkboxGroup';
-export { default as InputGroupRadioGroupExample } from './InputGroup.radioGroup';
-
-export { default as InputMainExample } from './Input.main';
-export { default as InputSizesExample } from './Input.sizes';
-export { default as InputSeparateLabelExample } from './Input.separatelabel';
-export { default as InputInlineExample } from './Input.inline';
-export { default as InputStatusExample } from './Input.status';
-export { default as InputButtonExample } from './Input.button';
-
-export { default as KeyboardMainExample } from './Keyboard.main';
-
-export { default as LabelMainExample } from './Label.main';
-
-export { default as ListMainExample } from './List.main';
-export { default as ListSubcomponentsExample } from './List.subcomponents';
-export { default as ListLinksExample } from './List.links';
-export { default as ListComboboxExample } from './List.combobox';
-
-export { default as NonIdealStateBadgatewayExample } from './NonIdealState.badgateway';
-export { default as NonIdealStateForbiddenExample } from './NonIdealState.forbidden';
-export { default as NonIdealStateInternalErrorExample } from './NonIdealState.internalerror';
-export { default as NonIdealStatePagenotfoundExample } from './NonIdealState.Pagenotfound';
-export { default as NonIdealStateRedirectExample } from './NonIdealState.redirect';
-export { default as NonIdealStateServiceunavailableExample } from './NonIdealState.serviceunavailable';
-export { default as NonIdealStateTimeoutExample } from './NonIdealState.timeout';
-export { default as NonIdealStateUnauthorizedExample } from './NonIdealState.unauthorized';
-export { default as NonIdealStateErrorExample } from './NonIdealState.error';
-
-export { default as ProgressLinearMainExample } from './ProgressLinear.main';
-export { default as ProgressRadialMainExample } from './ProgressRadial.main';
-
-export { default as RadioMainExample } from './Radio.main';
-export { default as RadioStatusesExample } from './Radio.statuses';
-export { default as RadioTileMainExample } from './RadioTile.main';
-export { default as RadioTileColorExample } from './RadioTile.color';
-
-export { default as SearchBoxMainExample } from './SearchBox.main';
-export { default as SearchBoxBasicExample } from './SearchBox.basic';
-export { default as SearchBoxSizeExample } from './SearchBox.size';
-export { default as SearchBoxExpandableExample } from './SearchBox.expandable';
-export { default as SearchBoxStatusExample } from './SearchBox.status';
-export { default as SearchBoxCustomExample } from './SearchBox.custom';
-export { default as SearchBoxCustomOpenExample } from './SearchBox.customopen';
-
-export { default as SelectDisableExample } from './Select.disable';
-export { default as SelectIconExample } from './Select.icon';
-export { default as SelectMainExample } from './Select.main';
-export { default as SelectStatusesExample } from './Select.statuses';
-export { default as SelectSublabelsExample } from './Select.sublabels';
-export { default as SelectTruncateExample } from './Select.truncate';
-
-export { default as SideNavigationMainExample } from './SideNavigation.main';
-export { default as SideNavigationBasicExample } from './SideNavigation.basic';
-export { default as SideNavigationActiveItemExample } from './SideNavigation.activeitem';
-export { default as SideNavigationSubmenuExample } from './SideNavigation.submenu';
-
-export { default as SliderMainExample } from './Slider.main';
-export { default as SliderRangeExample } from './Slider.range';
-export { default as SliderRangeMultipleExample } from './Slider.rangemultiple';
-export { default as SliderVerticalExample } from './Slider.vertical';
-export { default as SliderLabelsExample } from './Slider.labels';
-export { default as SliderThumbCustomExample } from './Slider.thumbcustom';
-export { default as SliderTooltipCustomExample } from './Slider.tooltipcustom';
-export { default as SliderTooltipNoneExample } from './Slider.tooltipnone';
-
-export { default as StepperMainExample } from './Stepper.main';
-export { default as StepperShortExample } from './Stepper.short';
-export { default as StepperLongExample } from './Stepper.long';
-export { default as StepperTooltipExample } from './Stepper.tooltip';
-export { default as StepperLocalizationExample } from './Stepper.localization';
-export { default as StepperLayoutExample } from './Stepper.layout';
-
-export { default as SurfaceMainExample } from './Surface.main';
-export { default as SurfaceElevationExample } from './Surface.elevation';
-export { default as SurfaceHeaderFooterExample } from './Surface.headerfooter';
-export { default as SurfaceNoPaddingExample } from './Surface.nopadding';
-
-export { default as TableMainExample } from './Table.main';
-
-export { default as TabsMainExample } from './Tabs.main';
-export { default as TabsOverflowExample } from './Tabs.overflow';
-
-export { default as TagMainExample } from './Tag.main';
-export { default as TagBasicExample } from './Tag.basic';
-export { default as TagDefaultExample } from './Tag.default';
-
-export { default as TagContainerMainExample } from './TagContainer.main';
-export { default as TagContainerWrapExample } from './TagContainer.wrap';
-export { default as TagContainerTruncateExample } from './TagContainer.truncate';
-export { default as TagContainerScrollExample } from './TagContainer.scroll';
-
-export { default as TextareaMainExample } from './Textarea.main';
-export { default as TextareaScrollExample } from './Textarea.scroll';
-export { default as TextareaStatusExample } from './Textarea.status';
-export { default as TextareaInlineExample } from './Textarea.inline';
-
-export { default as TextMainExample } from './Text.main';
-
-export { default as TileMainExample } from './Tile.main';
-
-export { default as ToastMainExample } from './Toast.main';
-
-export { default as ToggleSwitchMainExample } from './ToggleSwitch.main';
-export { default as ToggleSwitchSizesExample } from './ToggleSwitch.sizes';
-export { default as ToggleSwitchLabelsExample } from './ToggleSwitch.labels';
-export { default as ToggleSwitchIconExample } from './ToggleSwitch.icon';
-export { default as ToggleSwitchInputGroupExample } from './ToggleSwitch.inputgroup';
-
-export { default as TooltipMainExample } from './Tooltip.main';
-export { default as TooltipPlacementExample } from './Tooltip.placement';
-
-export { default as TransferListMainExample } from './TransferList.main';
-export { default as TransferListWithLabelExample } from './TransferList.withlabel';
-
-export { default as TreeMainExample } from './Tree.main';
-
-export { default as VisuallyHiddenIconExample } from './VisuallyHidden.icon';
-export { default as VisuallyHiddenMoreTextExample } from './VisuallyHidden.moretext';
+import * as React from 'react';
+import { ThemeProvider } from '@itwin/itwinui-react';
+
+const withThemeProvider = (Component: () => React.ReactElement) => () => {
+  return (
+    <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
+      <Component />
+    </ThemeProvider>
+  );
+};
+
+// ----------------------------------------------------------------------------
+
+import { default as AlertMainExampleRaw } from './Alert.main';
+const AlertMainExample = withThemeProvider(AlertMainExampleRaw);
+export { AlertMainExample };
+
+import { default as AlertInlineExampleRaw } from './Alert.inline';
+const AlertInlineExample = withThemeProvider(AlertInlineExampleRaw);
+export { AlertInlineExample };
+
+import { default as AlertInformationalExampleRaw } from './Alert.informational';
+const AlertInformationalExample = withThemeProvider(
+  AlertInformationalExampleRaw,
+);
+export { AlertInformationalExample };
+
+import { default as AlertPositiveExampleRaw } from './Alert.positive';
+const AlertPositiveExample = withThemeProvider(AlertPositiveExampleRaw);
+export { AlertPositiveExample };
+
+import { default as AlertNegativeExampleRaw } from './Alert.negative';
+const AlertNegativeExample = withThemeProvider(AlertNegativeExampleRaw);
+export { AlertNegativeExample };
+
+import { default as AlertStickyExampleRaw } from './Alert.sticky';
+const AlertStickyExample = withThemeProvider(AlertStickyExampleRaw);
+export { AlertStickyExample };
+
+import { default as AlertWarningExampleRaw } from './Alert.warning';
+const AlertWarningExample = withThemeProvider(AlertWarningExampleRaw);
+export { AlertWarningExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as AvatarMainExampleRaw } from './Avatar.main';
+const AvatarMainExample = withThemeProvider(AvatarMainExampleRaw);
+export { AvatarMainExample };
+
+import { default as AvatarGroupExampleRaw } from './Avatar.group';
+const AvatarGroupExample = withThemeProvider(AvatarGroupExampleRaw);
+export { AvatarGroupExample };
+
+import { default as AvatarGroupAnimatedExampleRaw } from './Avatar.groupanimated';
+const AvatarGroupAnimatedExample = withThemeProvider(
+  AvatarGroupAnimatedExampleRaw,
+);
+export { AvatarGroupAnimatedExample };
+
+import { default as AvatarGroupOverflowExampleRaw } from './Avatar.groupoverflow';
+const AvatarGroupOverflowExample = withThemeProvider(
+  AvatarGroupOverflowExampleRaw,
+);
+export { AvatarGroupOverflowExample };
+
+import { default as AvatarGroupOverflowTooltipExampleRaw } from './Avatar.groupoverflowtooltip';
+const AvatarGroupOverflowTooltipExample = withThemeProvider(
+  AvatarGroupOverflowTooltipExampleRaw,
+);
+export { AvatarGroupOverflowTooltipExample };
+
+import { default as AvatarGroupStackedExampleRaw } from './Avatar.groupstacked';
+const AvatarGroupStackedExample = withThemeProvider(
+  AvatarGroupStackedExampleRaw,
+);
+export { AvatarGroupStackedExample };
+
+import { default as AvatarIconExampleRaw } from './Avatar.icon';
+const AvatarIconExample = withThemeProvider(AvatarIconExampleRaw);
+export { AvatarIconExample };
+
+import { default as AvatarInitialsExampleRaw } from './Avatar.initials';
+const AvatarInitialsExample = withThemeProvider(AvatarInitialsExampleRaw);
+export { AvatarInitialsExample };
+
+import { default as AvatarPictureExampleRaw } from './Avatar.picture';
+const AvatarPictureExample = withThemeProvider(AvatarPictureExampleRaw);
+export { AvatarPictureExample };
+
+import { default as AvatarSizesExampleRaw } from './Avatar.sizes';
+const AvatarSizesExample = withThemeProvider(AvatarSizesExampleRaw);
+export { AvatarSizesExample };
+
+import { default as AvatarStatusesExampleRaw } from './Avatar.statuses';
+const AvatarStatusesExample = withThemeProvider(AvatarStatusesExampleRaw);
+export { AvatarStatusesExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as AnchorMainExampleRaw } from './Anchor.main';
+const AnchorMainExample = withThemeProvider(AnchorMainExampleRaw);
+export { AnchorMainExample };
+
+import { default as AnchorAsButtonExampleRaw } from './Anchor.asbutton';
+const AnchorAsButtonExample = withThemeProvider(AnchorAsButtonExampleRaw);
+export { AnchorAsButtonExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as BadgeMainExampleRaw } from './Badge.main';
+const BadgeMainExample = withThemeProvider(BadgeMainExampleRaw);
+export { BadgeMainExample };
+
+import { default as BadgeSoftExampleRaw } from './Badge.soft';
+const BadgeSoftExample = withThemeProvider(BadgeSoftExampleRaw);
+export { BadgeSoftExample };
+
+import { default as BadgeStatusesExampleRaw } from './Badge.statuses';
+const BadgeStatusesExample = withThemeProvider(BadgeStatusesExampleRaw);
+export { BadgeStatusesExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as BlockquoteFooterExampleRaw } from './Blockquote.footer';
+const BlockquoteFooterExample = withThemeProvider(BlockquoteFooterExampleRaw);
+export { BlockquoteFooterExample };
+
+import { default as BlockquoteMainExampleRaw } from './Blockquote.main';
+const BlockquoteMainExample = withThemeProvider(BlockquoteMainExampleRaw);
+export { BlockquoteMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as BreadcrumbsButtonExampleRaw } from './Breadcrumbs.button';
+const BreadcrumbsButtonExample = withThemeProvider(BreadcrumbsButtonExampleRaw);
+export { BreadcrumbsButtonExample };
+
+import { default as BreadcrumbsExtremeTruncationExampleRaw } from './Breadcrumbs.extremeTruncation';
+const BreadcrumbsExtremeTruncationExample = withThemeProvider(
+  BreadcrumbsExtremeTruncationExampleRaw,
+);
+export { BreadcrumbsExtremeTruncationExample };
+
+import { default as BreadcrumbsFolderExampleRaw } from './Breadcrumbs.folder';
+const BreadcrumbsFolderExample = withThemeProvider(BreadcrumbsFolderExampleRaw);
+export { BreadcrumbsFolderExample };
+
+import { default as BreadcrumbsLinkExampleRaw } from './Breadcrumbs.link';
+const BreadcrumbsLinkExample = withThemeProvider(BreadcrumbsLinkExampleRaw);
+export { BreadcrumbsLinkExample };
+
+import { default as BreadcrumbsMainExampleRaw } from './Breadcrumbs.main';
+const BreadcrumbsMainExample = withThemeProvider(BreadcrumbsMainExampleRaw);
+export { BreadcrumbsMainExample };
+
+import { default as BreadcrumbsTruncationExampleRaw } from './Breadcrumbs.truncation';
+const BreadcrumbsTruncationExample = withThemeProvider(
+  BreadcrumbsTruncationExampleRaw,
+);
+export { BreadcrumbsTruncationExample };
+
+import { default as BreadcrumbsCustomOverflowDropdownExampleRaw } from './Breadcrumbs.customOverflowDropdown';
+const BreadcrumbsCustomOverflowDropdownExample = withThemeProvider(
+  BreadcrumbsCustomOverflowDropdownExampleRaw,
+);
+export { BreadcrumbsCustomOverflowDropdownExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ButtonSizeExampleRaw } from './Button.size';
+const ButtonSizeExample = withThemeProvider(ButtonSizeExampleRaw);
+export { ButtonSizeExample };
+
+import { default as ButtonDefaultExampleRaw } from './Button.default';
+const ButtonDefaultExample = withThemeProvider(ButtonDefaultExampleRaw);
+export { ButtonDefaultExample };
+
+import { default as ButtonHighVisibilityExampleRaw } from './Button.highvisibility';
+const ButtonHighVisibilityExample = withThemeProvider(
+  ButtonHighVisibilityExampleRaw,
+);
+export { ButtonHighVisibilityExample };
+
+import { default as ButtonBorderlessExampleRaw } from './Button.borderless';
+const ButtonBorderlessExample = withThemeProvider(ButtonBorderlessExampleRaw);
+export { ButtonBorderlessExample };
+
+import { default as ButtonCTAExampleRaw } from './Button.cta';
+const ButtonCTAExample = withThemeProvider(ButtonCTAExampleRaw);
+export { ButtonCTAExample };
+
+import { default as ButtonMainExampleRaw } from './Button.main';
+const ButtonMainExample = withThemeProvider(ButtonMainExampleRaw);
+export { ButtonMainExample };
+
+import { default as IconButtonMainExampleRaw } from './IconButton.main';
+const IconButtonMainExample = withThemeProvider(IconButtonMainExampleRaw);
+export { IconButtonMainExample };
+
+import { default as IdeasButtonMainExampleRaw } from './IdeasButton.main';
+const IdeasButtonMainExample = withThemeProvider(IdeasButtonMainExampleRaw);
+export { IdeasButtonMainExample };
+
+import { default as SplitButtonMainExampleRaw } from './SplitButton.main';
+const SplitButtonMainExample = withThemeProvider(SplitButtonMainExampleRaw);
+export { SplitButtonMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ButtonGroupMainExampleRaw } from './ButtonGroup.main';
+const ButtonGroupMainExample = withThemeProvider(ButtonGroupMainExampleRaw);
+export { ButtonGroupMainExample };
+
+import { default as ButtonGroupVerticalExampleRaw } from './ButtonGroup.vertical';
+const ButtonGroupVerticalExample = withThemeProvider(
+  ButtonGroupVerticalExampleRaw,
+);
+export { ButtonGroupVerticalExample };
+
+import { default as ButtonGroupOverflowExampleRaw } from './ButtonGroup.overflow';
+const ButtonGroupOverflowExample = withThemeProvider(
+  ButtonGroupOverflowExampleRaw,
+);
+export { ButtonGroupOverflowExample };
+
+import { default as ButtonGroupInputExampleRaw } from './ButtonGroup.input';
+const ButtonGroupInputExample = withThemeProvider(ButtonGroupInputExampleRaw);
+export { ButtonGroupInputExample };
+
+import { default as ButtonGroupUsageExampleRaw } from './ButtonGroup.usage';
+const ButtonGroupUsageExample = withThemeProvider(ButtonGroupUsageExampleRaw);
+export { ButtonGroupUsageExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as CarouselMainExampleRaw } from './Carousel.main';
+const CarouselMainExample = withThemeProvider(CarouselMainExampleRaw);
+export { CarouselMainExample };
+
+import { default as CarouselControlledExampleRaw } from './Carousel.controlled';
+const CarouselControlledExample = withThemeProvider(
+  CarouselControlledExampleRaw,
+);
+export { CarouselControlledExample };
+
+import { default as CarouselOnlyDotsExampleRaw } from './Carousel.onlyDots';
+const CarouselOnlyDotsExample = withThemeProvider(CarouselOnlyDotsExampleRaw);
+export { CarouselOnlyDotsExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as CheckboxMainExampleRaw } from './Checkbox.main';
+const CheckboxMainExample = withThemeProvider(CheckboxMainExampleRaw);
+export { CheckboxMainExample };
+
+import { default as CheckboxIndeterminateExampleRaw } from './Checkbox.indeterminate';
+const CheckboxIndeterminateExample = withThemeProvider(
+  CheckboxIndeterminateExampleRaw,
+);
+export { CheckboxIndeterminateExample };
+
+import { default as CheckboxLoadingExampleRaw } from './Checkbox.loading';
+const CheckboxLoadingExample = withThemeProvider(CheckboxLoadingExampleRaw);
+export { CheckboxLoadingExample };
+
+import { default as CheckboxStatusesExampleRaw } from './Checkbox.statuses';
+const CheckboxStatusesExample = withThemeProvider(CheckboxStatusesExampleRaw);
+export { CheckboxStatusesExample };
+
+import { default as CheckboxVisibilityExampleRaw } from './Checkbox.visibility';
+const CheckboxVisibilityExample = withThemeProvider(
+  CheckboxVisibilityExampleRaw,
+);
+export { CheckboxVisibilityExample };
+
+import { default as CheckboxInputGroupExampleRaw } from './Checkbox.inputgroup';
+const CheckboxInputGroupExample = withThemeProvider(
+  CheckboxInputGroupExampleRaw,
+);
+export { CheckboxInputGroupExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as CodeMainExampleRaw } from './Code.main';
+const CodeMainExample = withThemeProvider(CodeMainExampleRaw);
+export { CodeMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ColorPickerMainExampleRaw } from './ColorPicker.main';
+const ColorPickerMainExample = withThemeProvider(ColorPickerMainExampleRaw);
+export { ColorPickerMainExample };
+
+import { default as ColorPickerBasicExampleRaw } from './ColorPicker.basic';
+const ColorPickerBasicExample = withThemeProvider(ColorPickerBasicExampleRaw);
+export { ColorPickerBasicExample };
+
+import { default as ColorPickerAdvancedExampleRaw } from './ColorPicker.advanced';
+const ColorPickerAdvancedExample = withThemeProvider(
+  ColorPickerAdvancedExampleRaw,
+);
+export { ColorPickerAdvancedExample };
+
+import { default as ColorPickerAdvancedPopoverExampleRaw } from './ColorPicker.advancedPopover';
+const ColorPickerAdvancedPopoverExample = withThemeProvider(
+  ColorPickerAdvancedPopoverExampleRaw,
+);
+export { ColorPickerAdvancedPopoverExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ComboBoxMainExampleRaw } from './ComboBox.main';
+const ComboBoxMainExample = withThemeProvider(ComboBoxMainExampleRaw);
+export { ComboBoxMainExample };
+
+import { default as ComboBoxControlledExampleRaw } from './ComboBox.controlled';
+const ComboBoxControlledExample = withThemeProvider(
+  ComboBoxControlledExampleRaw,
+);
+export { ComboBoxControlledExample };
+
+import { default as ComboBoxCustomExampleRaw } from './ComboBox.custom';
+const ComboBoxCustomExample = withThemeProvider(ComboBoxCustomExampleRaw);
+export { ComboBoxCustomExample };
+
+import { default as ComboBoxDisabledExampleRaw } from './ComboBox.disabled';
+const ComboBoxDisabledExample = withThemeProvider(ComboBoxDisabledExampleRaw);
+export { ComboBoxDisabledExample };
+
+import { default as ComboBoxLabelExampleRaw } from './ComboBox.label';
+const ComboBoxLabelExample = withThemeProvider(ComboBoxLabelExampleRaw);
+export { ComboBoxLabelExample };
+
+import { default as ComboBoxLoadingExampleRaw } from './ComboBox.loading';
+const ComboBoxLoadingExample = withThemeProvider(ComboBoxLoadingExampleRaw);
+export { ComboBoxLoadingExample };
+
+import { default as ComboBoxMessageExampleRaw } from './ComboBox.message';
+const ComboBoxMessageExample = withThemeProvider(ComboBoxMessageExampleRaw);
+export { ComboBoxMessageExample };
+
+import { default as ComboBoxMessageIconExampleRaw } from './ComboBox.messageIcon';
+const ComboBoxMessageIconExample = withThemeProvider(
+  ComboBoxMessageIconExampleRaw,
+);
+export { ComboBoxMessageIconExample };
+
+import { default as ComboBoxMultipleSelectExampleRaw } from './ComboBox.multipleSelect';
+const ComboBoxMultipleSelectExample = withThemeProvider(
+  ComboBoxMultipleSelectExampleRaw,
+);
+export { ComboBoxMultipleSelectExample };
+
+import { default as ComboBoxStatusExampleRaw } from './ComboBox.status';
+const ComboBoxStatusExample = withThemeProvider(ComboBoxStatusExampleRaw);
+export { ComboBoxStatusExample };
+
+import { default as ComboBoxVirtualizedExampleRaw } from './ComboBox.virtualized';
+const ComboBoxVirtualizedExample = withThemeProvider(
+  ComboBoxVirtualizedExampleRaw,
+);
+export { ComboBoxVirtualizedExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as DatePickerMainExampleRaw } from './DatePicker.main';
+const DatePickerMainExample = withThemeProvider(DatePickerMainExampleRaw);
+export { DatePickerMainExample };
+
+import { default as DatePickerMenuExampleRaw } from './DatePicker.menu';
+const DatePickerMenuExample = withThemeProvider(DatePickerMenuExampleRaw);
+export { DatePickerMenuExample };
+
+import { default as DatePickerBasicExampleRaw } from './DatePicker.basic';
+const DatePickerBasicExample = withThemeProvider(DatePickerBasicExampleRaw);
+export { DatePickerBasicExample };
+
+import { default as DatePickerWithTimeExampleRaw } from './DatePicker.withtime';
+const DatePickerWithTimeExample = withThemeProvider(
+  DatePickerWithTimeExampleRaw,
+);
+export { DatePickerWithTimeExample };
+
+import { default as DatePickerWithCombinedTimeExampleRaw } from './DatePicker.withcombinedtime';
+const DatePickerWithCombinedTimeExample = withThemeProvider(
+  DatePickerWithCombinedTimeExampleRaw,
+);
+export { DatePickerWithCombinedTimeExample };
+
+import { default as DatePickerDateRangeExampleRaw } from './DatePicker.daterange';
+const DatePickerDateRangeExample = withThemeProvider(
+  DatePickerDateRangeExampleRaw,
+);
+export { DatePickerDateRangeExample };
+
+import { default as DatePickerWithYearExampleRaw } from './DatePicker.withyear';
+const DatePickerWithYearExample = withThemeProvider(
+  DatePickerWithYearExampleRaw,
+);
+export { DatePickerWithYearExample };
+
+import { default as DatePickerLocalizedExampleRaw } from './DatePicker.localized';
+const DatePickerLocalizedExample = withThemeProvider(
+  DatePickerLocalizedExampleRaw,
+);
+export { DatePickerLocalizedExample };
+
+import { default as DatePickerDatesDisabledExampleRaw } from './DatePicker.datesdisabled';
+const DatePickerDatesDisabledExample = withThemeProvider(
+  DatePickerDatesDisabledExampleRaw,
+);
+export { DatePickerDatesDisabledExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as DialogDismissibleExampleRaw } from './Dialog.dismissible';
+const DialogDismissibleExample = withThemeProvider(DialogDismissibleExampleRaw);
+export { DialogDismissibleExample };
+
+import { default as DialogDraggableExampleRaw } from './Dialog.draggable';
+const DialogDraggableExample = withThemeProvider(DialogDraggableExampleRaw);
+export { DialogDraggableExample };
+
+import { default as DialogFullPageExampleRaw } from './Dialog.fullpage';
+const DialogFullPageExample = withThemeProvider(DialogFullPageExampleRaw);
+export { DialogFullPageExample };
+
+import { default as DialogMainExampleRaw } from './Dialog.main';
+const DialogMainExample = withThemeProvider(DialogMainExampleRaw);
+export { DialogMainExample };
+
+import { default as DialogModalExampleRaw } from './Dialog.modal';
+const DialogModalExample = withThemeProvider(DialogModalExampleRaw);
+export { DialogModalExample };
+
+import { default as DialogNonDismissibleExampleRaw } from './Dialog.nondismissible';
+const DialogNonDismissibleExample = withThemeProvider(
+  DialogNonDismissibleExampleRaw,
+);
+export { DialogNonDismissibleExample };
+
+import { default as DialogPlacementExampleRaw } from './Dialog.placement';
+const DialogPlacementExample = withThemeProvider(DialogPlacementExampleRaw);
+export { DialogPlacementExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as DropdownButtonMainExampleRaw } from './DropdownButton.main';
+const DropdownButtonMainExample = withThemeProvider(
+  DropdownButtonMainExampleRaw,
+);
+export { DropdownButtonMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as DropdownMenuMainExampleRaw } from './DropdownMenu.main';
+const DropdownMenuMainExample = withThemeProvider(DropdownMenuMainExampleRaw);
+export { DropdownMenuMainExample };
+
+import { default as DropdownMenuBasicExampleRaw } from './DropdownMenu.basic';
+const DropdownMenuBasicExample = withThemeProvider(DropdownMenuBasicExampleRaw);
+export { DropdownMenuBasicExample };
+
+import { default as DropdownMenuIconExampleRaw } from './DropdownMenu.icon';
+const DropdownMenuIconExample = withThemeProvider(DropdownMenuIconExampleRaw);
+export { DropdownMenuIconExample };
+
+import { default as DropdownMenuBadgeExampleRaw } from './DropdownMenu.badge';
+const DropdownMenuBadgeExample = withThemeProvider(DropdownMenuBadgeExampleRaw);
+export { DropdownMenuBadgeExample };
+
+import { default as DropdownMenuSublabelExampleRaw } from './DropdownMenu.sublabel';
+const DropdownMenuSublabelExample = withThemeProvider(
+  DropdownMenuSublabelExampleRaw,
+);
+export { DropdownMenuSublabelExample };
+
+import { default as DropdownMenuSubmenuExampleRaw } from './DropdownMenu.submenu';
+const DropdownMenuSubmenuExample = withThemeProvider(
+  DropdownMenuSubmenuExampleRaw,
+);
+export { DropdownMenuSubmenuExample };
+
+import { default as DropdownMenuSeparatorExampleRaw } from './DropdownMenu.separator';
+const DropdownMenuSeparatorExample = withThemeProvider(
+  DropdownMenuSeparatorExampleRaw,
+);
+export { DropdownMenuSeparatorExample };
+
+import { default as DropdownMenuContentExampleRaw } from './DropdownMenu.content';
+const DropdownMenuContentExample = withThemeProvider(
+  DropdownMenuContentExampleRaw,
+);
+export { DropdownMenuContentExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ExpandableBlockMainExampleRaw } from './ExpandableBlock.main';
+const ExpandableBlockMainExample = withThemeProvider(
+  ExpandableBlockMainExampleRaw,
+);
+export { ExpandableBlockMainExample };
+
+import { default as ExpandableBlockWithCaptionExampleRaw } from './ExpandableBlock.withcaption';
+const ExpandableBlockWithCaptionExample = withThemeProvider(
+  ExpandableBlockWithCaptionExampleRaw,
+);
+export { ExpandableBlockWithCaptionExample };
+
+import { default as ExpandableBlockAccordionExampleRaw } from './ExpandableBlock.accordion';
+const ExpandableBlockAccordionExample = withThemeProvider(
+  ExpandableBlockAccordionExampleRaw,
+);
+export { ExpandableBlockAccordionExample };
+
+import { default as ExpandableBlockStatusExampleRaw } from './ExpandableBlock.status';
+const ExpandableBlockStatusExample = withThemeProvider(
+  ExpandableBlockStatusExampleRaw,
+);
+export { ExpandableBlockStatusExample };
+
+import { default as ExpandableBlockSmallExampleRaw } from './ExpandableBlock.small';
+const ExpandableBlockSmallExample = withThemeProvider(
+  ExpandableBlockSmallExampleRaw,
+);
+export { ExpandableBlockSmallExample };
+
+import { default as ExpandableBlockBorderlessExampleRaw } from './ExpandableBlock.borderless';
+const ExpandableBlockBorderlessExample = withThemeProvider(
+  ExpandableBlockBorderlessExampleRaw,
+);
+export { ExpandableBlockBorderlessExample };
+
+import { default as ExpandableBlockFormExampleRaw } from './ExpandableBlock.form';
+const ExpandableBlockFormExample = withThemeProvider(
+  ExpandableBlockFormExampleRaw,
+);
+export { ExpandableBlockFormExample };
+
+import { default as ExpandableBlockDisabledExampleRaw } from './ExpandableBlock.disabled';
+const ExpandableBlockDisabledExample = withThemeProvider(
+  ExpandableBlockDisabledExampleRaw,
+);
+export { ExpandableBlockDisabledExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as FieldsetMainExampleRaw } from './Fieldset.main';
+const FieldsetMainExample = withThemeProvider(FieldsetMainExampleRaw);
+export { FieldsetMainExample };
+
+import { default as FieldsetDisabledExampleRaw } from './Fieldset.disabled';
+const FieldsetDisabledExample = withThemeProvider(FieldsetDisabledExampleRaw);
+export { FieldsetDisabledExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as FileUploadMainExampleRaw } from './FileUpload.main';
+const FileUploadMainExample = withThemeProvider(FileUploadMainExampleRaw);
+export { FileUploadMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as FlexMainExampleRaw } from './Flex.main';
+const FlexMainExample = withThemeProvider(FlexMainExampleRaw);
+export { FlexMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as FooterMainExampleRaw } from './Footer.main';
+const FooterMainExample = withThemeProvider(FooterMainExampleRaw);
+export { FooterMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as HeaderMainExampleRaw } from './Header.main';
+const HeaderMainExample = withThemeProvider(HeaderMainExampleRaw);
+export { HeaderMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as InformationPanelMainExampleRaw } from './InformationPanel.main';
+const InformationPanelMainExample = withThemeProvider(
+  InformationPanelMainExampleRaw,
+);
+export { InformationPanelMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as InputGroupToggleSwitchExampleRaw } from './InputGroup.toggleSwitch';
+const InputGroupToggleSwitchExample = withThemeProvider(
+  InputGroupToggleSwitchExampleRaw,
+);
+export { InputGroupToggleSwitchExample };
+
+import { default as InputGroupCheckboxGroupExampleRaw } from './InputGroup.checkboxGroup';
+const InputGroupCheckboxGroupExample = withThemeProvider(
+  InputGroupCheckboxGroupExampleRaw,
+);
+export { InputGroupCheckboxGroupExample };
+
+import { default as InputGroupRadioGroupExampleRaw } from './InputGroup.radioGroup';
+const InputGroupRadioGroupExample = withThemeProvider(
+  InputGroupRadioGroupExampleRaw,
+);
+export { InputGroupRadioGroupExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as InputMainExampleRaw } from './Input.main';
+const InputMainExample = withThemeProvider(InputMainExampleRaw);
+export { InputMainExample };
+
+import { default as InputSizesExampleRaw } from './Input.sizes';
+const InputSizesExample = withThemeProvider(InputSizesExampleRaw);
+export { InputSizesExample };
+
+import { default as InputSeparateLabelExampleRaw } from './Input.separatelabel';
+const InputSeparateLabelExample = withThemeProvider(
+  InputSeparateLabelExampleRaw,
+);
+export { InputSeparateLabelExample };
+
+import { default as InputInlineExampleRaw } from './Input.inline';
+const InputInlineExample = withThemeProvider(InputInlineExampleRaw);
+export { InputInlineExample };
+
+import { default as InputStatusExampleRaw } from './Input.status';
+const InputStatusExample = withThemeProvider(InputStatusExampleRaw);
+export { InputStatusExample };
+
+import { default as InputButtonExampleRaw } from './Input.button';
+const InputButtonExample = withThemeProvider(InputButtonExampleRaw);
+export { InputButtonExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as KeyboardMainExampleRaw } from './Keyboard.main';
+const KeyboardMainExample = withThemeProvider(KeyboardMainExampleRaw);
+export { KeyboardMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as LabelMainExampleRaw } from './Label.main';
+const LabelMainExample = withThemeProvider(LabelMainExampleRaw);
+export { LabelMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ListMainExampleRaw } from './List.main';
+const ListMainExample = withThemeProvider(ListMainExampleRaw);
+export { ListMainExample };
+
+import { default as ListSubcomponentsExampleRaw } from './List.subcomponents';
+const ListSubcomponentsExample = withThemeProvider(ListSubcomponentsExampleRaw);
+export { ListSubcomponentsExample };
+
+import { default as ListLinksExampleRaw } from './List.links';
+const ListLinksExample = withThemeProvider(ListLinksExampleRaw);
+export { ListLinksExample };
+
+import { default as ListComboboxExampleRaw } from './List.combobox';
+const ListComboboxExample = withThemeProvider(ListComboboxExampleRaw);
+export { ListComboboxExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as NonIdealStateBadgatewayExampleRaw } from './NonIdealState.badgateway';
+const NonIdealStateBadgatewayExample = withThemeProvider(
+  NonIdealStateBadgatewayExampleRaw,
+);
+export { NonIdealStateBadgatewayExample };
+
+import { default as NonIdealStateForbiddenExampleRaw } from './NonIdealState.forbidden';
+const NonIdealStateForbiddenExample = withThemeProvider(
+  NonIdealStateForbiddenExampleRaw,
+);
+export { NonIdealStateForbiddenExample };
+
+import { default as NonIdealStateInternalErrorExampleRaw } from './NonIdealState.internalerror';
+const NonIdealStateInternalErrorExample = withThemeProvider(
+  NonIdealStateInternalErrorExampleRaw,
+);
+export { NonIdealStateInternalErrorExample };
+
+import { default as NonIdealStatePagenotfoundExampleRaw } from './NonIdealState.Pagenotfound';
+const NonIdealStatePagenotfoundExample = withThemeProvider(
+  NonIdealStatePagenotfoundExampleRaw,
+);
+export { NonIdealStatePagenotfoundExample };
+
+import { default as NonIdealStateRedirectExampleRaw } from './NonIdealState.redirect';
+const NonIdealStateRedirectExample = withThemeProvider(
+  NonIdealStateRedirectExampleRaw,
+);
+export { NonIdealStateRedirectExample };
+
+import { default as NonIdealStateServiceunavailableExampleRaw } from './NonIdealState.serviceunavailable';
+const NonIdealStateServiceunavailableExample = withThemeProvider(
+  NonIdealStateServiceunavailableExampleRaw,
+);
+export { NonIdealStateServiceunavailableExample };
+
+import { default as NonIdealStateTimeoutExampleRaw } from './NonIdealState.timeout';
+const NonIdealStateTimeoutExample = withThemeProvider(
+  NonIdealStateTimeoutExampleRaw,
+);
+export { NonIdealStateTimeoutExample };
+
+import { default as NonIdealStateUnauthorizedExampleRaw } from './NonIdealState.unauthorized';
+const NonIdealStateUnauthorizedExample = withThemeProvider(
+  NonIdealStateUnauthorizedExampleRaw,
+);
+export { NonIdealStateUnauthorizedExample };
+
+import { default as NonIdealStateErrorExampleRaw } from './NonIdealState.error';
+const NonIdealStateErrorExample = withThemeProvider(
+  NonIdealStateErrorExampleRaw,
+);
+export { NonIdealStateErrorExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ProgressLinearMainExampleRaw } from './ProgressLinear.main';
+const ProgressLinearMainExample = withThemeProvider(
+  ProgressLinearMainExampleRaw,
+);
+export { ProgressLinearMainExample };
+
+import { default as ProgressRadialMainExampleRaw } from './ProgressRadial.main';
+const ProgressRadialMainExample = withThemeProvider(
+  ProgressRadialMainExampleRaw,
+);
+export { ProgressRadialMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as RadioMainExampleRaw } from './Radio.main';
+const RadioMainExample = withThemeProvider(RadioMainExampleRaw);
+export { RadioMainExample };
+
+import { default as RadioStatusesExampleRaw } from './Radio.statuses';
+const RadioStatusesExample = withThemeProvider(RadioStatusesExampleRaw);
+export { RadioStatusesExample };
+
+import { default as RadioTileMainExampleRaw } from './RadioTile.main';
+const RadioTileMainExample = withThemeProvider(RadioTileMainExampleRaw);
+export { RadioTileMainExample };
+
+import { default as RadioTileColorExampleRaw } from './RadioTile.color';
+const RadioTileColorExample = withThemeProvider(RadioTileColorExampleRaw);
+export { RadioTileColorExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as SearchBoxMainExampleRaw } from './SearchBox.main';
+const SearchBoxMainExample = withThemeProvider(SearchBoxMainExampleRaw);
+export { SearchBoxMainExample };
+
+import { default as SearchBoxBasicExampleRaw } from './SearchBox.basic';
+const SearchBoxBasicExample = withThemeProvider(SearchBoxBasicExampleRaw);
+export { SearchBoxBasicExample };
+
+import { default as SearchBoxSizeExampleRaw } from './SearchBox.size';
+const SearchBoxSizeExample = withThemeProvider(SearchBoxSizeExampleRaw);
+export { SearchBoxSizeExample };
+
+import { default as SearchBoxExpandableExampleRaw } from './SearchBox.expandable';
+const SearchBoxExpandableExample = withThemeProvider(
+  SearchBoxExpandableExampleRaw,
+);
+export { SearchBoxExpandableExample };
+
+import { default as SearchBoxStatusExampleRaw } from './SearchBox.status';
+const SearchBoxStatusExample = withThemeProvider(SearchBoxStatusExampleRaw);
+export { SearchBoxStatusExample };
+
+import { default as SearchBoxCustomExampleRaw } from './SearchBox.custom';
+const SearchBoxCustomExample = withThemeProvider(SearchBoxCustomExampleRaw);
+export { SearchBoxCustomExample };
+
+import { default as SearchBoxCustomOpenExampleRaw } from './SearchBox.customopen';
+const SearchBoxCustomOpenExample = withThemeProvider(
+  SearchBoxCustomOpenExampleRaw,
+);
+export { SearchBoxCustomOpenExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as SelectDisableExampleRaw } from './Select.disable';
+const SelectDisableExample = withThemeProvider(SelectDisableExampleRaw);
+export { SelectDisableExample };
+
+import { default as SelectIconExampleRaw } from './Select.icon';
+const SelectIconExample = withThemeProvider(SelectIconExampleRaw);
+export { SelectIconExample };
+
+import { default as SelectMainExampleRaw } from './Select.main';
+const SelectMainExample = withThemeProvider(SelectMainExampleRaw);
+export { SelectMainExample };
+
+import { default as SelectStatusesExampleRaw } from './Select.statuses';
+const SelectStatusesExample = withThemeProvider(SelectStatusesExampleRaw);
+export { SelectStatusesExample };
+
+import { default as SelectSublabelsExampleRaw } from './Select.sublabels';
+const SelectSublabelsExample = withThemeProvider(SelectSublabelsExampleRaw);
+export { SelectSublabelsExample };
+
+import { default as SelectTruncateExampleRaw } from './Select.truncate';
+const SelectTruncateExample = withThemeProvider(SelectTruncateExampleRaw);
+export { SelectTruncateExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as SideNavigationMainExampleRaw } from './SideNavigation.main';
+const SideNavigationMainExample = withThemeProvider(
+  SideNavigationMainExampleRaw,
+);
+export { SideNavigationMainExample };
+
+import { default as SideNavigationBasicExampleRaw } from './SideNavigation.basic';
+const SideNavigationBasicExample = withThemeProvider(
+  SideNavigationBasicExampleRaw,
+);
+export { SideNavigationBasicExample };
+
+import { default as SideNavigationActiveItemExampleRaw } from './SideNavigation.activeitem';
+const SideNavigationActiveItemExample = withThemeProvider(
+  SideNavigationActiveItemExampleRaw,
+);
+export { SideNavigationActiveItemExample };
+
+import { default as SideNavigationSubmenuExampleRaw } from './SideNavigation.submenu';
+const SideNavigationSubmenuExample = withThemeProvider(
+  SideNavigationSubmenuExampleRaw,
+);
+export { SideNavigationSubmenuExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as SliderMainExampleRaw } from './Slider.main';
+const SliderMainExample = withThemeProvider(SliderMainExampleRaw);
+export { SliderMainExample };
+
+import { default as SliderRangeExampleRaw } from './Slider.range';
+const SliderRangeExample = withThemeProvider(SliderRangeExampleRaw);
+export { SliderRangeExample };
+
+import { default as SliderRangeMultipleExampleRaw } from './Slider.rangemultiple';
+const SliderRangeMultipleExample = withThemeProvider(
+  SliderRangeMultipleExampleRaw,
+);
+export { SliderRangeMultipleExample };
+
+import { default as SliderVerticalExampleRaw } from './Slider.vertical';
+const SliderVerticalExample = withThemeProvider(SliderVerticalExampleRaw);
+export { SliderVerticalExample };
+
+import { default as SliderLabelsExampleRaw } from './Slider.labels';
+const SliderLabelsExample = withThemeProvider(SliderLabelsExampleRaw);
+export { SliderLabelsExample };
+
+import { default as SliderThumbCustomExampleRaw } from './Slider.thumbcustom';
+const SliderThumbCustomExample = withThemeProvider(SliderThumbCustomExampleRaw);
+export { SliderThumbCustomExample };
+
+import { default as SliderTooltipCustomExampleRaw } from './Slider.tooltipcustom';
+const SliderTooltipCustomExample = withThemeProvider(
+  SliderTooltipCustomExampleRaw,
+);
+export { SliderTooltipCustomExample };
+
+import { default as SliderTooltipNoneExampleRaw } from './Slider.tooltipnone';
+const SliderTooltipNoneExample = withThemeProvider(SliderTooltipNoneExampleRaw);
+export { SliderTooltipNoneExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as StepperMainExampleRaw } from './Stepper.main';
+const StepperMainExample = withThemeProvider(StepperMainExampleRaw);
+export { StepperMainExample };
+
+import { default as StepperShortExampleRaw } from './Stepper.short';
+const StepperShortExample = withThemeProvider(StepperShortExampleRaw);
+export { StepperShortExample };
+
+import { default as StepperLongExampleRaw } from './Stepper.long';
+const StepperLongExample = withThemeProvider(StepperLongExampleRaw);
+export { StepperLongExample };
+
+import { default as StepperTooltipExampleRaw } from './Stepper.tooltip';
+const StepperTooltipExample = withThemeProvider(StepperTooltipExampleRaw);
+export { StepperTooltipExample };
+
+import { default as StepperLocalizationExampleRaw } from './Stepper.localization';
+const StepperLocalizationExample = withThemeProvider(
+  StepperLocalizationExampleRaw,
+);
+export { StepperLocalizationExample };
+
+import { default as StepperLayoutExampleRaw } from './Stepper.layout';
+const StepperLayoutExample = withThemeProvider(StepperLayoutExampleRaw);
+export { StepperLayoutExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as SurfaceMainExampleRaw } from './Surface.main';
+const SurfaceMainExample = withThemeProvider(SurfaceMainExampleRaw);
+export { SurfaceMainExample };
+
+import { default as SurfaceElevationExampleRaw } from './Surface.elevation';
+const SurfaceElevationExample = withThemeProvider(SurfaceElevationExampleRaw);
+export { SurfaceElevationExample };
+
+import { default as SurfaceHeaderFooterExampleRaw } from './Surface.headerfooter';
+const SurfaceHeaderFooterExample = withThemeProvider(
+  SurfaceHeaderFooterExampleRaw,
+);
+export { SurfaceHeaderFooterExample };
+
+import { default as SurfaceNoPaddingExampleRaw } from './Surface.nopadding';
+const SurfaceNoPaddingExample = withThemeProvider(SurfaceNoPaddingExampleRaw);
+export { SurfaceNoPaddingExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TableMainExampleRaw } from './Table.main';
+const TableMainExample = withThemeProvider(TableMainExampleRaw);
+export { TableMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TabsMainExampleRaw } from './Tabs.main';
+const TabsMainExample = withThemeProvider(TabsMainExampleRaw);
+export { TabsMainExample };
+
+import { default as TabsOverflowExampleRaw } from './Tabs.overflow';
+const TabsOverflowExample = withThemeProvider(TabsOverflowExampleRaw);
+export { TabsOverflowExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TagMainExampleRaw } from './Tag.main';
+const TagMainExample = withThemeProvider(TagMainExampleRaw);
+export { TagMainExample };
+
+import { default as TagBasicExampleRaw } from './Tag.basic';
+const TagBasicExample = withThemeProvider(TagBasicExampleRaw);
+export { TagBasicExample };
+
+import { default as TagDefaultExampleRaw } from './Tag.default';
+const TagDefaultExample = withThemeProvider(TagDefaultExampleRaw);
+export { TagDefaultExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TagContainerMainExampleRaw } from './TagContainer.main';
+const TagContainerMainExample = withThemeProvider(TagContainerMainExampleRaw);
+export { TagContainerMainExample };
+
+import { default as TagContainerWrapExampleRaw } from './TagContainer.wrap';
+const TagContainerWrapExample = withThemeProvider(TagContainerWrapExampleRaw);
+export { TagContainerWrapExample };
+
+import { default as TagContainerTruncateExampleRaw } from './TagContainer.truncate';
+const TagContainerTruncateExample = withThemeProvider(
+  TagContainerTruncateExampleRaw,
+);
+export { TagContainerTruncateExample };
+
+import { default as TagContainerScrollExampleRaw } from './TagContainer.scroll';
+const TagContainerScrollExample = withThemeProvider(
+  TagContainerScrollExampleRaw,
+);
+export { TagContainerScrollExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TextareaMainExampleRaw } from './Textarea.main';
+const TextareaMainExample = withThemeProvider(TextareaMainExampleRaw);
+export { TextareaMainExample };
+
+import { default as TextareaScrollExampleRaw } from './Textarea.scroll';
+const TextareaScrollExample = withThemeProvider(TextareaScrollExampleRaw);
+export { TextareaScrollExample };
+
+import { default as TextareaStatusExampleRaw } from './Textarea.status';
+const TextareaStatusExample = withThemeProvider(TextareaStatusExampleRaw);
+export { TextareaStatusExample };
+
+import { default as TextareaInlineExampleRaw } from './Textarea.inline';
+const TextareaInlineExample = withThemeProvider(TextareaInlineExampleRaw);
+export { TextareaInlineExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TextMainExampleRaw } from './Text.main';
+const TextMainExample = withThemeProvider(TextMainExampleRaw);
+export { TextMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TileMainExampleRaw } from './Tile.main';
+const TileMainExample = withThemeProvider(TileMainExampleRaw);
+export { TileMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ToastMainExampleRaw } from './Toast.main';
+const ToastMainExample = withThemeProvider(ToastMainExampleRaw);
+export { ToastMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as ToggleSwitchMainExampleRaw } from './ToggleSwitch.main';
+const ToggleSwitchMainExample = withThemeProvider(ToggleSwitchMainExampleRaw);
+export { ToggleSwitchMainExample };
+
+import { default as ToggleSwitchSizesExampleRaw } from './ToggleSwitch.sizes';
+const ToggleSwitchSizesExample = withThemeProvider(ToggleSwitchSizesExampleRaw);
+export { ToggleSwitchSizesExample };
+
+import { default as ToggleSwitchLabelsExampleRaw } from './ToggleSwitch.labels';
+const ToggleSwitchLabelsExample = withThemeProvider(
+  ToggleSwitchLabelsExampleRaw,
+);
+export { ToggleSwitchLabelsExample };
+
+import { default as ToggleSwitchIconExampleRaw } from './ToggleSwitch.icon';
+const ToggleSwitchIconExample = withThemeProvider(ToggleSwitchIconExampleRaw);
+export { ToggleSwitchIconExample };
+
+import { default as ToggleSwitchInputGroupExampleRaw } from './ToggleSwitch.inputgroup';
+const ToggleSwitchInputGroupExample = withThemeProvider(
+  ToggleSwitchInputGroupExampleRaw,
+);
+export { ToggleSwitchInputGroupExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TooltipMainExampleRaw } from './Tooltip.main';
+const TooltipMainExample = withThemeProvider(TooltipMainExampleRaw);
+export { TooltipMainExample };
+
+import { default as TooltipPlacementExampleRaw } from './Tooltip.placement';
+const TooltipPlacementExample = withThemeProvider(TooltipPlacementExampleRaw);
+export { TooltipPlacementExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TransferListMainExampleRaw } from './TransferList.main';
+const TransferListMainExample = withThemeProvider(TransferListMainExampleRaw);
+export { TransferListMainExample };
+
+import { default as TransferListWithLabelExampleRaw } from './TransferList.withlabel';
+const TransferListWithLabelExample = withThemeProvider(
+  TransferListWithLabelExampleRaw,
+);
+export { TransferListWithLabelExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as TreeMainExampleRaw } from './Tree.main';
+const TreeMainExample = withThemeProvider(TreeMainExampleRaw);
+export { TreeMainExample };
+
+// ----------------------------------------------------------------------------
+
+import { default as VisuallyHiddenIconExampleRaw } from './VisuallyHidden.icon';
+const VisuallyHiddenIconExample = withThemeProvider(
+  VisuallyHiddenIconExampleRaw,
+);
+export { VisuallyHiddenIconExample };
+
+import { default as VisuallyHiddenMoreTextExampleRaw } from './VisuallyHidden.moretext';
+const VisuallyHiddenMoreTextExample = withThemeProvider(
+  VisuallyHiddenMoreTextExampleRaw,
+);
+export { VisuallyHiddenMoreTextExample };

From 9acaf2f0e29ac4cf790db90383a69885df281d58 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Tue, 13 Jun 2023 18:03:28 -0400
Subject: [PATCH 2/2] fix styles

---
 apps/website/src/components/LiveExample.astro | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/components/LiveExample.astro b/apps/website/src/components/LiveExample.astro
index a39909fbda0..e928100b28b 100644
--- a/apps/website/src/components/LiveExample.astro
+++ b/apps/website/src/components/LiveExample.astro
@@ -30,9 +30,7 @@ if (code.includes('Copyright (c) Bentley Systems')) {
 ---
 
 <div class='demo-box'>
-  <div class='demo-iui-wrapper'>
-    <slot />
-  </div>
+  <slot />
   <OpenInCodesandbox class='sandbox-link' code={code} />
 </div>
 <demo-code>
@@ -89,7 +87,7 @@ if (code.includes('Copyright (c) Bentley Systems')) {
     border-radius: var(--border-radius-1);
   }
 
-  .demo-iui-wrapper {
+  .demo-box :global([data-iui-theme]) {
     height: 100%;
     width: 100%;
     overflow: auto;