feat(Decorator): new component Decorator (#4170)

* feat: new component decorator

* fix: code and styling updates

* fix: udpate snapshots

* fix: update gallery

* fix: skip some tests (temp)

* fix: minor changes

* fix: updated PropTypes

* fix: updated tests

* fix: update styling

* fix: updated snapshots and galleries

* fix: storybook update

* fix: update code, style, docs

* fix: design review update

* fix: design review update

* fix: added a11y icon borders

* fix: update icons and colors

* fix: tests

* fix: docs

* fix: styling updates

* fix: adds aria label to datagrid toolbar (#4348)

* fix: add aria label to datagrid toolbar

* chore: format

* fix: prop name change

* fix(Dataspreadsheet): Reduce duplication with isHoldingCommandKey #4188 (#4227)

* feat(UserAvatar): implementation of name,size props (#4312)

* feat(useravatar):implementation of name,size props

* fix(useravatar): changed story name

* fix(useravatar): review changes suggested

* fix(useravatar): resolve test-c4p

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): name changes suggested

---------

Co-authored-by: elysia <[email protected]>

* feat:  Tearsheet ai (#4215)

* chore: wip

* feat: tearsheet AI enhancements

* feat: add gradient glow to container

* chore(release): publish [skip ci]

 - [email protected]
 - @carbon/[email protected]
 - @carbon/[email protected]
 - @carbon/[email protected]
 - @carbon/[email protected]

* chore: add new example gallery action (#4352)

* chore: add new example gallery action

* chore: remove gallery check from CI

* chore: remove unused steps

🙃

* feat: Modal ai updates (#4362)

* chore: wip

* feat: tearsheet AI enhancements

* feat: add gradient glow to container

* chore: bump carbon versions

* feat: modal ai v2 updates

* fix: modal body

* feat: modal ai v2 updates

* Merge branch 'main' into modalAIUpdates

* chore: update gallery config

* fix(DataGrid): add support for selectrow and nestedrow (#4354)

Co-authored-by: Matt Gallo <[email protected]>

* feat(Datagrid): add support for multi select filter type (#4361)

* chore: custom filter exploration continued

* fix(DataGrid): add support for selectrow and nestedrow

* chore: custom filter exploration

* feat(Datagrid): add multi select option

* chore: remove onClearFilters from prop types

* chore: revert copyright year

* chore: add multi select example to flyout

* chore: revert nested/selection changes from branch

* chore: update gallery config

---------

Co-authored-by: Ratheesh Rajan <[email protected]>

* feat(Datagrid): apply latest ai gradients to Datagrid (#4377)

* fix(DataGrid): add support for selectrow and nestedrow

* feat(Datagrid): apply latest ai gradients

* chore: remove comments

* chore: revert nested row changes pulled in accidentally

* chore: update snapshot

* chore: refactor how row class names are applied

* fix: remove extra border

---------

Co-authored-by: Ratheesh Rajan <[email protected]>

* feat(useravatar): image implementation (#4355)

* feat(useravatar):implementation of name,size props

* fix(useravatar): changed story name

* fix(useravatar): review changes suggested

* fix(useravatar): resolve test-c4p

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): review changes suggested

* fix(useravatar): name changes suggested

* feat(useravatar): image implementation

* fix(useravatar): resolve lint issue

* fix(useravatar): resolve check-gallery

* fix(useravatar): review changes suggested

---------

Co-authored-by: elysia <[email protected]>

* feat: sort icon appear in the Actions column on Datagrid #4339 (#4346)

* chore(release): publish [skip ci]

 - @carbon/[email protected]
 - @carbon/[email protected]
 - @carbon/[email protected]
 - @carbon/[email protected]

* fix: move ai gradient to content (#4381)

* chore(release): publish [skip ci]

 - @carbon/[email protected]
 - @carbon/[email protected]
 - @carbon/[email protected]

* fix: merge conflicts

* fix: update publish config in community package to public (#4383)

* fix: header border issue introduced with ai slug (#4385)

* chore(deps): bump ip to 2.0.1 (#4386)

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/UserAvatar

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/WebTerminal

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/TruncatedList

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/prefix-example

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip from 2.0.0 to 2.0.1

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat(APIKeyModal): add typescript types (#4336)

* feat: beginning ts changes for APIKeyModal

* chore: add custom typings to address broken types from carbon/react

* fix: address remaining type issues

* chore: refactor pw input import

* chore: refactor customStep types

* chore(deps): bump ip to 2.0.1 (#4401)

* build(deps): bump ip in /examples/carbon-for-ibm-products/ProductiveCard

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/StatusIcon

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/SidePanel

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/TagSet

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/RemoveModal

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/PageHeader

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/Saving

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/Tearsheet

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ip in /examples/carbon-for-ibm-products/SearchBar

Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1.
- [Commits](indutny/node-ip@v2.0.0...v2.0.1)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat: new component status indicator (#4419)

* fix: udpate gallery

* fix: code review updates

* fix: code review updates

* chore: update chromedriver resolutions (#4422)

* chore: add chromedriver to resolutions

Fixes an issue with changed CDN

* chore: remove from resolutions

Keep latest chromedriver in yarn.lock

* fix: tearsheet overlay (#4421)

* fix: tearsheet overlay

* fix: selector for old overlay

---------

Co-authored-by: Matt Gallo <[email protected]>

* fix: side panel slug and close position (#4426)

* feat(Datagrid): add option to specify an initial sortable column (#4423)

* feat(Datagrid): apply initial column sort functionality

* fix: return if not using sortable table

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: David Menendez <[email protected]>
Co-authored-by: Amal K Joy <[email protected]>
Co-authored-by: Anamika T S <[email protected]>
Co-authored-by: elysia <[email protected]>
Co-authored-by: Lee Chase <[email protected]>
Co-authored-by: github-merge-queue <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ratheesh Rajan <[email protected]>
Co-authored-by: Matt Gallo <[email protected]>
Co-authored-by: SeonyuK <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

examples/carbon-for-ibm-products/Decorator/README.md

@@ -0,0 +1,61 @@
+# Carbon for IBM Products `Decorator` example
+
+This example was initially generated by `@carbon/ibm-products` using the script `update-gallery-config` found in `package.json`.
+
+## Adding an example
+
+If using the `generate` script then a base example should be created for you. If for some reason this is not the case do the following:
+
+1. Duplicate an existing example e.g. `examples/carbon-for-ibm-products/AboutModal` and rename it to your match your component e.g. `MyComponent`
+2. Edit `gallery.config.json` which has the following form.
+
+```json
+{
+  "label": "Name of example in gallery",
+  "package-config": {
+    "flags": {
+      "component": {
+        "MyComponent": true
+      },
+      "feature": {
+        "MyFeature": true
+      }
+      "prefix": "alt-prefix",
+    },
+    "templates-variation": "templates-react-16"
+  }
+}
+```
+
+NOTE: All fields are optional, although most specify a label.
+
+The `package-config` section is used to specify the config used with the example, including prefix and any flags enabled.
+
+The `template-variation` is used to specify an alternative to the default template. This is currently used for React versions only.
+
+3. Edit the `src/Example` folder to show your component.
+4. Run the example and replace `thumbnail.png` with a picture of your example.
+
+NOTE 2: The only files retained after each run of the update script are `thumbnail.png`, `gallery.config.json`, and those in `src/Example`, so ensure all of your example source sits in the `src/Example` folder.
+
+## Updating examples
+
+Skip step 1 for `Adding an example` otherwise the same.
+
+## Adding / Updating a template or variant
+
+The simplest way to update a template is as follows.
+
+1. Copy the a generated example to the `scripts/example-gallery-builder/update-example` folder.
+2. Update it as necessary.
+3. Test that it works.
+4. Remove the folder `scripts/example-gallery-builder/update-example/templates` and rename your folder to this.
+5. Review the changes made and restore/rectify the template TAGS typically in capitals. These are replaced as part of the build process. E.g. Decorator, 2024, import './config'
+. For a full set of current tags review the code in `scripts/example-gallery-builder/update-example/index.js`.
+6. Remove the files `gallery.config.json`, `thumbnail.png` and the folder `src/Example`.
+
+### If a variant
+
+To reduce maintenance variants only need files which differ from the core `templates` folder. Delete any new files you did not intend to add.
+
+Variants are selected by folder name in the `gallery.config.json` file.

examples/carbon-for-ibm-products/Decorator/gallery.config.json

@@ -0,0 +1,12 @@
+{
+  "label": "Decorator",
+  "package-config": {
+    "flags": {
+      "component": {
+        "Decorator": true
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

examples/carbon-for-ibm-products/Decorator/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

examples/carbon-for-ibm-products/Decorator/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "Decorator-component-example",
+  "description": "An example showing use of the Decorator component from the @carbon/ibm-products component library.",
+  "keywords": [
+    "carbon",
+    "ibm",
+    "ibm-products",
+    "component",
+    "decorator"
+  ],
+  "license": "Apache-2.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/ibm-products": "^2.21.0",
+    "@carbon/react": "^1.51.0",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.70.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^4.5.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  }
+}

examples/carbon-for-ibm-products/Decorator/src/App.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ThemeProvider } from './ThemeSelector/ThemeContext';
+import { ThemeDropdown } from './ThemeSelector/ThemeDropdown';
+import './config';
+import Example from './Example/Example';
+
+function App() {
+  return (
+    <div>
+      <ThemeProvider>
+        <Example />
+        <ThemeDropdown />
+      </ThemeProvider>
+    </div>
+  );
+}
+
+export default App;

examples/carbon-for-ibm-products/Decorator/src/Example/Example.jsx

@@ -0,0 +1,19 @@
+// cspell:words grafana
+
+import React from 'react';
+
+// ----------------------------------------------------
+// This is an example showing use of the
+// AboutModal component
+// from the @carbon/ibm-products component library.
+// ----------------------------------------------------
+
+import { Decorator } from '@carbon/ibm-products';
+
+import './_example.scss';
+
+export const Example = () => {
+  return <Decorator />;
+};
+
+export default Example;

examples/carbon-for-ibm-products/Decorator/src/Example/_example.scss

@@ -0,0 +1,3 @@
+@use '@carbon/react/scss/spacing' as *;
+
+/* example SCSS */

examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/ThemeContext.jsx

@@ -0,0 +1,54 @@
+import React, { createContext, useReducer } from 'react';
+
+export const themeData = [
+  {
+    text: 'White',
+    value: 'carbon-theme--white',
+  },
+  {
+    text: 'Gray 10',
+    value: 'carbon-theme--g10',
+  },
+  {
+    text: 'Gray 90',
+    value: 'carbon-theme--g90',
+  },
+  {
+    text: 'Gray 100',
+    value: 'carbon-theme--g100',
+  },
+];
+
+export const ThemeContext = createContext();
+
+const initialState = {
+  currentTheme: themeData[0],
+};
+
+const themeReducer = (state, action) => {
+  switch (action.type.value) {
+    case 'carbon-theme--white':
+      return { currentTheme: action.type };
+    case 'carbon-theme--g10':
+      return { currentTheme: action.type };
+    case 'carbon-theme--g90':
+      return { currentTheme: action.type };
+    case 'carbon-theme--g100':
+      return { currentTheme: action.type };
+    default:
+      return state;
+  }
+};
+
+export function ThemeProvider(props) {
+  const [state, dispatch] = useReducer(themeReducer, initialState);
+
+  return (
+    <ThemeContext.Provider value={{ state, dispatch }}>
+      {
+        // eslint-disable-next-line react/prop-types
+        props.children
+      }
+    </ThemeContext.Provider>
+  );
+}

examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/ThemeDropdown.jsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { Dropdown } from '@carbon/react';
+import { ThemeContext, themeData } from './ThemeContext';
+
+import './_theme-dropdown.scss';
+
+export const ThemeDropdown = () => {
+  const theme = useContext(ThemeContext);
+
+  const setTheme = (selectedItem) => {
+    const bodyElement = document.body;
+    bodyElement.className = selectedItem.value;
+    theme.dispatch({ type: selectedItem });
+  };
+
+  return (
+    <div className="carbon-theme-dropdown">
+      <Dropdown
+        direction="top"
+        ariaLabel="Theme dropdown"
+        id="theme-dropdown"
+        items={themeData}
+        itemToString={(item) => (item ? item.text : '')}
+        onChange={(event) => setTheme(event.selectedItem)}
+        selectedItem={theme.state.currentTheme}
+        label="Select a Carbon theme"
+        titleText="Select a Carbon theme"
+      />
+    </div>
+  );
+};

examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss

@@ -0,0 +1,31 @@
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config';
+
+.carbon-theme--white {
+  @include theme(themes.$white, true);
+}
+
+.carbon-theme--g10 {
+  @include theme(themes.$g10, true);
+}
+
+.carbon-theme--g90 {
+  @include theme(themes.$g90, true);
+}
+
+.carbon-theme--g100 {
+  @include theme(themes.$g100, true);
+}
+
+.carbon-theme-dropdown {
+  position: fixed;
+  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
+  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  min-width: 11.5rem;
+}
+
+.carbon-theme-dropdown .#{config.$prefix}--label {
+  @include type.type-style('label-01');
+}

examples/carbon-for-ibm-products/Decorator/src/config.js

@@ -0,0 +1,3 @@
+import { pkg } from '@carbon/ibm-products';
+
+pkg.component.Decorator = true;

examples/carbon-for-ibm-products/Decorator/src/index.scss

@@ -0,0 +1,4 @@
+@use '@carbon/react' with (
+  $font-path: '@ibm/plex'
+);
+@use '@carbon/ibm-products/css/index';

examples/carbon-for-ibm-products/Decorator/src/main.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom';
+import App from './App.jsx';
+import './index.scss';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

examples/carbon-for-ibm-products/Decorator/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+});