@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/resources-code-katas-docs.md

@@ -1,29 +0,0 @@
-[](#code-katas)Code Katas
-=========================
-
-A code kata is an exercise in programming that helps a programmer hone their skills through practice and repetition. Code katas are a great way to learn a new language, practice a new technique, or just to keep your skills fresh. They are also a great way to get a team to practice working together.
-
-In our case, we will be using code katas to help you practice using the Iress Design System (IDS) components.
-
-1.  Lightsaber Order Form: This code kata was created specifically to introduce version five to Iress product engineering teams. It allows you to practice using the latest `IressForm` and its controlled elements, as well as practice writing tests efficiently using React Testing Library out-of-the-box.
-2.  Pizza Ordering: This is an older kata that is great for practicing UI in general.
-
-The code katas can be found in the Code Katas repository.
-
-[](#want-more-code-katas)Want more code katas?
-----------------------------------------------
-
-If you want to do some more code katas, check out the following resources. You can even use IDS for the UI based ones to put in some more practice.
-
-*   [Iress code katas](https://github.com/oneiresslab/code-katas)
-*   [Codurance](https://www.codurance.com/katas)
-*   [TDD Buddy](https://tddbuddy.com/katas.html)
-*   [Code Kata](http://codekata.com/)
-*   [Awesome Katas](https://github.com/gamontal/awesome-katas)
-*   [CSS Battle](https://cssbattle.dev/)
-*   [Code Chef](https://www.codechef.com/)
-*   [Project Euler](https://projecteuler.net/)
-
-On this page
-
-*   [Want more code katas?](#want-more-code-katas)

package/generated/docs/resources-introduction-docs.md

@@ -1,38 +0,0 @@
-[](#resources)Resources
-=======================
-
-These are additional resources to help you make the most of the Iress Design System.
-
-[](#migration-guides)Migration guides
--------------------------------------
-
-These guides help you transition from previous versions of the Iress Design System to the latest version. They provide step-by-step instructions and highlight the changes made in each version.
-
-1.  [Version 5 to 6](https://docs.google.com/document/d/17K81rHBZjjF_tsrC8QFrSsmjrC0IJu_bpU4sB2N7PSQ/edit?usp=sharing)
-2.  [Version 4 to 5](./?path=/docs/resources-migration-guides-from-v4-to-v5--docs)
-
-[](#mcp-server)MCP Server
--------------------------
-
-The MCP Server provides AI agents with contextual information about the Iress Design System (IDS) components, allowing them to assist with development tasks such as writing code and UIs consistently, generating documentation, and answering questions about the design system, and all according to best practice.
-
-[](/?path=/docs/resources-mcp-server--docs)
-
-[View MCP Server](/?path=/docs/resources-mcp-server--docs)
-
-[](#code-katas)Code katas
--------------------------
-
-These are exercises to help you practice and improve your skills with the Iress Design System. They cover various components and patterns, providing a hands-on way to learn.
-
-You can even try using the [MCP Server](./?path=/?path=/docs/resources-mcp-server--docs) to help you complete the code katas by asking questions about the components and patterns.
-
-[](/?path=/docs/resources-code-katas--docs)
-
-[View code katas](/?path=/docs/resources-code-katas--docs)
-
-On this page
-
-*   [Migration guides](#migration-guides)
-*   [MCP Server](#mcp-server)
-*   [Code katas](#code-katas)

package/generated/docs/resources-mcp-server-docs.md

@@ -1,27 +0,0 @@
-[](#mcp-server)MCP Server
-=========================
-
-The MCP Server provides AI agents with contextual information about the Iress Design System (IDS) components, allowing them to assist with development tasks such as writing code and UIs consistently, generating documentation, and answering questions about the design system, and all according to best practice.
-
-[
-
-View MCP Server on NPM
-
-](https://www.npmjs.com/package/@iress-oss/ids-mcp-server)
-
-* * *
-
-[](#installation)Installation
------------------------------
-
-[
-
-Install on Visual Studio Code
-
-](vscode:mcp/install?%7B%22name%22%3A%22iress-design-system%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40iress-oss%2Fids-mcp-server%22%5D%7D)
-
-For other MCP clients or manual configuration, check the [MCP Server README](https://www.npmjs.com/package/@iress-oss/ids-mcp-server)
-
-On this page
-
-*   [Installation](#installation)

package/generated/docs/resources-migration-guides-from-v4-to-v5-docs.md

@@ -1,437 +0,0 @@
-[](#migration-from-v4-to-v5)Migration from v4 to v5
-===================================================
-
-This is a step-by-step guide for upgrading your application from IDS v4 to v5. To learn more about the benefits of upgrading, see the [IDS v5 initiative Atlas post](https://team.atlassian.com/project/IRESS4-19/about).
-
-[](#updating-your-dependencies)Updating your dependencies
----------------------------------------------------------
-
-### [](#upgrade-ids-and-themes)Upgrade IDS and themes
-
-Update your dependencies in your `package.json` file to the following:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-"dependencies": {
-  "@iress-oss/ids-components": "^5.0.0",
-  "@iress/themes": "^5.0.0"
-}
-
-Copy
-
-or run:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-yarn add @iress-oss/ids-components@^5.0.0 @iress/themes@^5.0.0
-
-Copy
-
-### [](#upgrade-react)Upgrade React
-
-The minimum required version of React is 17. If you are using an older version of React, you will need to update it.
-
-[](#updating-imports)Updating imports
--------------------------------------
-
-### [](#changing-components)Changing components
-
-Update your imports to the new package name:
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressButton } from '@iress/components-react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressButton } from '@iress-oss/ids-components';</pre></td></tr></tbody></table>
-
-You can run both packages together, so you can migrate components one by one.
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressModal, IressButton } from '@iress/components-react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressModal } from '@iress/components-react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressButton } from '@iress-oss/ids-components';</pre></td></tr></tbody></table>
-
-### [](#importing-component-styles)Importing component styles
-
-IDS v5 no longer injects CSS into the DOM. You will need to import the stylesheet directly into your application.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import '@iress-oss/ids-components/dist/style.css';
-
-Copy
-
-[](#update-jest-configuration)Update Jest configuration
--------------------------------------------------------
-
-If you are using Jest, you will need to update your Jest configuration to add the new IDS package to your `transformIgnorePatterns`.
-
-**Note:** If you are using version 4 and version 5 in parallel, you will need to keep the old IDS packages in your `transformIgnorePatterns` until you have completely migrated over your components.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-"transformIgnorePatterns": \[
-  "/node\_modules/(?!@iress-oss/ids-components)"
-\]
-
-Copy
-
-If you are mocking CSS files for your tests, you'll also need to make sure the new stylesheet is matched by your `moduleNameMapper`:
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  "moduleNameMapper": {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    "^.+\.(scss|less)$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    "ids-web-components.css$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    "global.css$": "&lt;rootDir&gt;/test/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    "global.css$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    "@iress-oss/ids-components/(.*).css": "&lt;rootDir&gt;/test/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  },</pre></td></tr></tbody></table>
-
-[](#handling-breaking-changes)Handling breaking changes
--------------------------------------------------------
-
-### [](#components)Components
-
-Since the move to React, the majority of the components have been simplified to improve developer experience. We have listed the changes in this google doc by component, so you can attend to each component separately.
-
-[](https://docs.google.com/document/d/1H3-zFDftCHDjwaFkwFxVo1uziPsOj8qJn7p3NFG3aUg/edit)
-
-[Google doc](https://docs.google.com/document/d/1H3-zFDftCHDjwaFkwFxVo1uziPsOj8qJn7p3NFG3aUg/edit)
-
-### [](#testing)Testing
-
-Components are no longer loaded asynchronously, so you can test them as you would any other React component. The testing utilities have been removed from the package, so you will need to update your tests to use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) or another testing library.
-
-Below is an example of a changed test using React Testing Library.
-
-Mode
-
-DiffOldNew
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { render } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { render, fireEvent } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { idsFireEvent } from '@iress/ids-react-test-utils';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">test('login form', () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">test('login form', async () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    const loginMock = jest.fn();</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    const screen = render(&lt;LoginForm loginUser={loginMock}/&gt;);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    const usernameInput = await screen.findByTestId('username__input');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    const usernameInput = screen.getByRole('textbox', { name: 'Username' });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    const passwordInput = await screen.findByTestId('password__input');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    const passwordInput = screen.getByRole('textbox', { name: 'Password' });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    const submitBtn = await screen.findByTestId('submit-btn__button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    const submitBtn = screen.getByRole('button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    idsFireEvent.change(usernameInput, { target: { value: 'joe.bloggs' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    fireEvent.change(usernameInput, { target: { value: 'joe.bloggs' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    idsFireEvent.change(passwordInput, { target: { value: '1234' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    fireEvent.change(passwordInput, { target: { value: '1234' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    idsFireEvent.click(submitBtn);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    fireEvent.click(submitBtn);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    expect(loginMock).toHaveBeenCalledWith("joe.bloggs", "1234");</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">});</pre></td></tr></tbody></table>
-
-#### [](#component-specific-testing)Component specific testing
-
-Some components have additional testing requirements. The changed testing requirements will be listed on each component's docs page.
-
-These include:
-
-*   [Form](./?path=/docs/components-form--docs#testing)
-*   [Modal](./?path=/docs/components-modal--docs#testing)
-*   [Slideout](./?path=/docs/components-slideout--docs#testing)
-
-### [](#styling)Styling
-
-The original CSS framework used for IDS was based on the Stencil library. It was lightly scoped (no shadow DOM) using CSS classes like: `sc-iress-radio-h sc-iress-radio-s`.
-
-These classes have been removed from version 5. If you are targeting components using these classes, it will be good for you review if you should adapt the CSS in a different way (ie. using design tokens/CSS variables instead, which should work no matter the class name, or adding custom classes to the IDS components). If targeting elements is still required, the new classes will be formatted as: `.ids-radio-${ids-version}`, and nested elements will use a modified BEM naming convention: `.ids-radio--label-${ids-version}`. The version number will be exposed; you can import it via Javascript, SASS and CSS module values to make future upgrades easier.
-
-#### [](#option-1-use-design-tokens-and-custom-classes)Option 1: Use design tokens and custom classes
-
-This is the recommended approach. You can use design tokens and custom classes to style the components.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-.custom-radio {
-  \--iress-text-color: red;
-  align-self: center;
-}
-
-Copy
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<IressRadio className\="custom-radio" />
-
-Copy
-
-#### [](#option-2-target-the-new-classes)Option 2: Target the new classes
-
-This option is **not recommended** and should be used as a last resort, as the class names can change in future, in which case your stylesheet will no longer have any effect. It is recommended to use design tokens or custom classes instead.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-@use '@iress-oss/ids-components/dist/constants/index.scss' as \*;
-.ids-radio-#{$ids-version} {
-  align-self: center;
-}
-
-.ids-radio--label-#{$ids-version} {
-  color: red;
-}
-
-Copy
-
-### [](#theme-tokens)Theme tokens
-
-There are a few token changes that have changed (though this has been relatively minor). The version 5 themes have been updated to use the new design tokens, however if you are using version 4 in parallel with version 5, you may notice that the version 4 styles can no longer find the removed/changed tokens.
-
-To fix this issue, please backfill the tokens in your application until you have finished your migration.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-/\* TODO: Will be removed once we have moved to IDS version 5 \*/
-/\* Change to the name(s) of the themes you want to back fill. \*/
-.iress-theme-light {
-  --iress-alert-error-text-color: var(--iress-alert-danger-text-color);
-  --iress-alert-error-background-color: var(
-    --iress-alert-danger-background-color
-  );
-  --iress-alert-error-border-color: var(--iress-alert-danger-border-color);
-  --iress-alert-error-heading-icon-text-color: var(
-    --iress-alert-danger-heading-icon-text-color
-  );
-
-  --iress-button-margin-right: var(--iress-g-spacing-xs);
-
-  --iress-combobox-option-meta-font-weight: var(
-    --iress-a-muted-font-weight,
-    var(--iress-g-font-weight, normal)
-  );
-  --iress-combobox-option-meta-text-color: var(
-    --iress-g-muted-text-color,
-    var(--iress-default-text-color--light)
-  );
-
-  --iress-filter-option-meta-font-weight: var(
-    --iress-a-muted-font-weight,
-    var(--iress-g-font-weight, normal)
-  );
-  --iress-filter-option-meta-text-color: var(
-    --iress-g-muted-text-color,
-    var(--iress-default-text-color--light)
-  );
-
-  --iress-form-field-margin-bottom: var(
-    --iress-a-vertical-spacing-lg,
-    var(--iress-g-spacing-lg)
-  );
-
-  --iress-table-cell-buy-text-color: var(
-    --iress-table-cell-positive-text-color
-  );
-  --iress-table-cell-sell-text-color: var(
-    --iress-table-cell-negative-text-color
-  );
-  --iress-table-cell-selected-buy-text-color: var(
-    --iress-table-cell-selected-positive-text-color
-  );
-  --iress-table-cell-selected-sell-text-color: var(
-    --iress-table-cell-selected-negative-text-color
-  );
-
-  --iress-validation-message-error-text-color: var(
-    --iress-validation-message-danger-text-color
-  );
-}
-
-Copy
-
-[](#ag-grid-theme)AG grid theme
--------------------------------
-
-As of version 5, we only support the lite AG grid theme, which is used in conjunction with the default alpine theme. In version 5, its imports have changed slightly.
-
-Run the following command to install the AG grid lite theme:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-yarn add @iress/ag-grid-theme@^5.0.0
-
-Copy
-
-Then you can import the AG Grid theme CSS, import the relevant IDS theme, and hook up the styles by setting a class of ag-theme-alpine ag-theme-iress-lite on your grid wrapper.
-
-Mode
-
-DiffOldNew
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">import "@iress/themes/build/css/iress-theme-dark.css";</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import "@iress/themes/global.css";</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">import 'ag-grid-community/styles/ag-grid.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">import 'ag-grid-community/styles/ag-theme-alpine.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import '@iress/ag-grid-theme/dist/lite/css/all.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import '@iress/ag-grid-theme/dist/ag-theme-iress-lite.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">// You can also include variables, styles and utilities separately for easy debugging</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/lite/css/variables.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/css/variables.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/lite/css/styles.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/css/styles.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/lite/css/utilities.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/css/utilities.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">&lt;div className="ag-theme-alpine ag-theme-iress-lite"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  &lt;AgGridReact /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">&lt;/div&gt;</pre></td></tr></tbody></table>
-
-[](#removing-version-4)Removing version 4
------------------------------------------
-
-Version 5 and version 4 can be run in parallel, but it is recommended to remove version 4 to avoid any conflicts once you have completely migrated over your components.
-
-Run the following to remove version 4 and its related packages:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-yarn remove @iress/components @iress/components-react @iress/components-react-custom-elements @iress/ids-react-test-utils
-
-Copy
-
-### [](#remove-globalcss)Remove `global.css`
-
-The `global.css` file has been removed, it is now recommended to include the Roboto font directly using Google Fonts.
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import '@iress/themes/global.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">&lt;link</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&amp;display=swap"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  rel="stylesheet"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">/&gt;</pre></td></tr></tbody></table>
-
-### [](#remove-from-jest-configuration)Remove from Jest configuration
-
-If you are using Jest, you will need to update your Jest configuration to remove the old IDS packages from your `transformIgnorePatterns`.
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">"transformIgnorePatterns": [</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  "node_modules/(?!(@iress/components-react|@iress/components|@iress/components-react-custom-elements|@stencil/core)/)"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  "/node_modules/(?!@iress-oss/ids-components)"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">]</pre></td></tr></tbody></table>
-
-You can also remove the `mockLazyLoadedComponents` function from your Jest setup.
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { mockLazyLoadedComponents } from '@iress/ids-react-test-utils/dist/react-test-utils/src/mocks/mockLazyLoadedComponents';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">mockLazyLoadedComponents();</pre></td></tr></tbody></table>
-
-You should also be able to remove the style mocks from your Jest configuration's `moduleNameMapper`, unless you are using CSS-in-JS, as IDS no longer injects CSS into the DOM.
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">"moduleNameMapper": {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  "\.css$": "&lt;rootDir&gt;/PATH/TO/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">}</pre></td></tr></tbody></table>
-
-On this page
-
-*   [Updating your dependencies](#updating-your-dependencies)
-    *   [Upgrade IDS and themes](#upgrade-ids-and-themes)
-    *   [Upgrade React](#upgrade-react)
-*   [Updating imports](#updating-imports)
-    *   [Changing components](#changing-components)
-    *   [Importing component styles](#importing-component-styles)
-*   [Update Jest configuration](#update-jest-configuration)
-*   [Handling breaking changes](#handling-breaking-changes)
-    *   [Components](#components)
-    *   [Testing](#testing)
-    *   [Styling](#styling)
-    *   [Theme tokens](#theme-tokens)
-*   [AG grid theme](#ag-grid-theme)
-*   [Removing version 4](#removing-version-4)
-    *   [Remove global.css](#remove-globalcss)
-    *   [Remove from Jest configuration](#remove-from-jest-configuration)