@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/foundations-typography-docs.md

@@ -1,191 +0,0 @@
-[](#typography)Typography
-=========================
-
-Typography is set up as part of the theming. Typography is controlled by the `IressText` component and the `iress-u-text` utility class. They implement consistent line heights and font weights.
-
-Typography styles are designed to be encapsulated. If you want text to pick up the Iress styling, you'll need to wrap it in an `IressText` component.
-
-[](#body)Body
--------------
-
-This is the default text variant, and is designed to be clear and easy to read.
-
-Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
-
-*   Voluptatem assumenda soluta!
-*   Illum et atque alias possimus maiores rem in corrupti consectetur!
-*   Dolorum, repellat expedita!
-
-Hide code
-
-\[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; }
-
-<IressText\>
-  <p\>
-    Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.  </p\>
-  <ul\>
-    <li\>
-      Voluptatem assumenda soluta!    </li\>
-    <li\>
-      Illum et atque alias possimus maiores rem in corrupti consectetur!    </li\>
-    <li\>
-      Dolorum, repellat expedita!    </li\>
-  </ul\>
-</IressText\>
-
-Copy
-
-[](#headings)Headings
----------------------
-
-Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes based on systematic font sizing with native heading scales (H1-H6).
-
-Hello, we are a company that puts clients first.
-================================================
-
-Hello, we are a company that puts clients first.
-------------------------------------------------
-
-### Hello, we are a company that puts clients first.
-
-#### Hello, we are a company that puts clients first.
-
-##### Hello, we are a company that puts clients first.
-
-An H2 styled as an H3.
-----------------------
-
-Hide code
-
-\[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; }
-
-<IressStack gutter\="md"\>
-  <IressText element\="h1"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText element\="h2"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText element\="h3"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText element\="h4"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText element\="h5"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText
-    element\="h2"
-    variant\="h3"
-  \>
-    An H2 styled as an H3.  </IressText\>
-</IressStack\>
-
-Copy
-
-[](#display)Display
--------------------
-
-Display text is used to draw attention to specific pieces of content, like introductory text on a landing page. It has larger font sizes than the heading variants, and a lighter font weight.
-
-Hello, we are a company that puts clients first.
-
-Hello, we are a company that puts clients first.
-
-Hello, we are a company that puts clients first.
-
-Hello, we are a company that puts clients first.
-
-Hide code
-
-\[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; }
-
-<IressStack gutter\="md"\>
-  <IressText variant\="display1"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText variant\="display2"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText variant\="display3"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-  <IressText variant\="display4"\>
-    Hello, we are a company that puts clients first.  </IressText\>
-</IressStack\>
-
-Copy
-
-[](#lead)Lead
--------------
-
-Lead text is used to introduce users to a new section, and often gives a brief summary of a section. It has a larger font size than body text, but a lighter font weight so that it doesn't clash with headings.
-
-Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
-
-Hide code
-
-\[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; }
-
-<IressText
-  element\="p"
-  variant\="lead"
-\>
-  Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
-</IressText\>
-
-Copy
-
-[](#caption)Caption
--------------------
-
-The caption variant is used for small text that provides additional information about a table or image. It has a smaller font size than body text, and a lighter font weight.
-
-Example caption
-
-Hide code
-
-\[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; }
-
-<IressText element\="caption"\>
-  Example caption
-</IressText\>
-
-Copy
-
-[](#other-variants)Other variants
----------------------------------
-
-IDS also includes bold, italic and small text variants.
-
-*   Bold text should be used to **draw attention** to part of a sentence, or to provide a visual label for readonly text.
-*   Italic text should be used to add _emphasis_ to content, or to add stress to part of a sentence.
-*   Small text is used for side comments or for text that's secondary to the main content.
-*   Muted text is used to de-emphasise content, such as when displaying informative text that is not critical to the user experience.
-
-Bold text
-
-Italic text
-
-Small text
-
-Muted text
-
-Hide code
-
-\[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; }
-
-<IressStack gutter\="md"\>
-  <IressText variant\="bold"\>
-    Bold text  </IressText\>
-  <IressText variant\="italic"\>
-    Italic text  </IressText\>
-  <IressText variant\="small"\>
-    Small text  </IressText\>
-  <IressText mode\="muted"\>
-    Muted text  </IressText\>
-</IressStack\>
-
-Copy
-
-On this page
-
-*   [Body](#body)
-*   [Headings](#headings)
-*   [Display](#display)
-*   [Lead](#lead)
-*   [Caption](#caption)
-*   [Other variants](#other-variants)

package/generated/docs/get-started-develop-docs.md

@@ -1,209 +0,0 @@
-[](#develop)Develop
-===================
-
-Set up your environment to use the latest version of the Iress Design System (IDS). You can use this library to build React applications that align to IDS, and ensure a consistent and modern look and feel across all Iress products.
-
-[](#requirements)Requirements
------------------------------
-
-*   [React 17 or later](https://reactjs.org/)
-*   Access to Iress Artifactory
-
-[](#set-up-the-component-library)Set up the component library
--------------------------------------------------------------
-
-1.  Install using the command line:
-    
-    \[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
-    
-    Copy
-    
-2.  Import the styles:
-    
-    \[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
-    
-3.  Import the components. The provider is optional, but recommended for most applications. It sets up the design system and provides a consistent container for components like modals, slideouts, and toasts.
-    
-    \[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 { IressProvider, IressButton } from '@iress-oss/ids-components';
-    
-    Copy
-    
-4.  Use 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;
-    }
-    
-    const App \= () \=> (
-      <IressButton onClick\={() \=> success({ children: 'Toast triggered' })}\>
-        Trigger toast  </IressButton\>
-    );
-    ReactDOM.createRoot(document.getElementById('root')!).render(
-      <IressProvider\>
-        <App />
-      </IressProvider\>,
-    );
-    
-    Copy
-    
-
-* * *
-
-[](#set-up-the-theme)Set up the theme
--------------------------------------
-
-The component library comes with the white label theme by default. You can add a theme by importing the theme file and including it in your application.
-
-Microfrontends
---------------
-
-If you are building a React App that is intended to be used as a microfrontend, please skip this step. Microfrontends should inherit the parent application's theme, and not define a theme itself, as it may conflict with other microfrontends in the same parent application.
-
-1.  Install using the command line:
-    
-    \[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/ids-themes
-    
-    Copy
-    
-2.  Import the component:
-    
-    \[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 { IressTheme } from '@iress-oss/ids-components';
-    
-    Copy
-    
-3.  Add the component to 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;
-    }
-    
-    ReactDOM.createRoot(document.getElementById('root')!).render(
-      <IressProvider\>
-        <IressTheme />
-        <App />
-      </IressProvider\>,
-    );
-    
-    Copy
-    
-
-For alternative ways to import the theme, see the [Themes documentation](./?path=/docs/themes-introduction--docs).
-
-On this page
-
-*   [Requirements](#requirements)
-*   [Set up the component library](#set-up-the-component-library)
-*   [Set up the theme](#set-up-the-theme)

package/generated/docs/get-started-using-storybook-docs.md

@@ -1,68 +0,0 @@
-[](#using-storybook)Using Storybook
-===================================
-
-The IDS team uses Storybook to develop and document our components. Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. It is most likely what you are looking at right now.
-
-Here we have just highlighted a few of our top tips on how you can use Storybook more efficiently. We have separated it by different stages of the product delivery cycle, but you can use these tips at any stage.
-
-* * *
-
-[](#first-time-users)First-time users
--------------------------------------
-
-When you first come to the IDS Storybook, you may notice the pages look un-styled. This is the default theme of IDS. You can change the theme to the theme you normally use in your product by clicking the `brush` icon in the top left, right above this page.
-
-You can also change to use the dark theme of Storybook itself by clicking the `moon` icon in the top left, right above this page.
-
-These settings are saved so the next time you come back to Storybook, it will remember your preferences.
-
-[](#scoping-work)Scoping work
------------------------------
-
-If you are scoping work, you can use Storybook to see what components are available to you. You can also see how they are used and what states they can be in. This can help you to understand what is possible and what is not.
-
-Every IDS component has a `Docs` page and a `Guidelines` (coming soon) page. The `Docs` page will show you how to use the component and what props it accepts, helping you understand what is available, and how each property behaves to allow you to understand the final user experience of your feature.
-
-The `Guidelines` page will show you how to use the component in a way that is consistent with other Iress applications. It covers things like accessibility, usability, and design principles, as well as which scenario to use which component and common pitfalls.
-
-[](#design)Design
------------------
-
-When designing a new feature, you can use Storybook to see how your designs will look and behave in a real application.
-
-`Docs` and `Guidelines` (coming soon) pages will help you understand how to use the components and what is possible, and help you align to any design decisions made previously.
-
-`Examples` are a good way to see how variations of a component look and behave. You can see how a component looks in different states, and how it behaves with different props. If there is a variation that is not shown in the `Examples`, you can use the `Controls` tab to change the props of the component to see how it behaves with different values. You can also toggle how each component looks at different breakpoints (screen sizes/devices), how they look to users with certain eyesight conditions, and how they look in different states.
-
-Storybook is a starting point for your designs. It is the language developers will be using as they convert your designs into live user experiences. However, not everything is covered here. It is good to discuss your designs with developers to understand what is possible and what is not.
-
-[](#development)Development
----------------------------
-
-During development, you can refer to Storybook for code examples and understand the API available to you.
-
-If you are using Typescript, majority of the API is available in your IDE. However, Storybook provides more than just the API. It provides examples of how to use and combine the properties, as well as which components were designed to work with each other.
-
-`Docs` covers the API of the component, and also discusses `Examples` in detail. Code examples are shown here as well.
-
-`Examples` in the sidebar actually allow you to toggle the props in the `Controls` tab to see how combinations look and behave. The `Actions` tab will show you what events are being emitted by the component, and the `Accessibility` tab will show you whether the combination of props is accessible or not in this component. You can also toggle how each component looks at different breakpoints (screen sizes/devices), how they look to users with certain eyesight conditions, and how they look in different states.
-
-IDS is a starting point for your application development. It provides the foundations to make your application look and behave in a consistent way to other Iress products. However, not everything is covered here. It is good to discuss with designers and other developers to understand any constraints or guidelines that are not covered by IDS.
-
-* * *
-
-[](#common-issues)Common issues
--------------------------------
-
-### [](#i-cant-find-the-controls-actions-or-accessibility-tab)I can't find the `Controls`, `Actions` or `Accessibility` tab
-
-These tabs are only shown in the `Examples` area of the component. Some tabs are not applicable to some components. If you click on an example and still cannot see it, you may need to toggle the orientation of the addon. You can do this by tapping the `d` key twice, or using the settings as shown in the video.
-
-On this page
-
-*   [First-time users](#first-time-users)
-*   [Scoping work](#scoping-work)
-*   [Design](#design)
-*   [Development](#development)
-*   [Common issues](#common-issues)
-    *   [I can't find the Controls, Actions or Accessibility tab](#i-cant-find-the-controls-actions-or-accessibility-tab)

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

@@ -1,6 +0,0 @@
-[](#changelog)Changelog
-=======================
-
-To view the changelog, you can check the Iress repository.
-
-On this page

package/generated/docs/themes-available-themes-docs.md

@@ -1,66 +0,0 @@
-[](#available-themes)Available themes
-=====================================
-
-These are the available themes you can apply to Iress products. If you are using the component library, these themes will automatically style the components to match the theme.
-
-[](#versions)Versions
----------------------
-
-Themes are no longer connected to the version of IDS you are using. Instead they will support a range of IDS versions.
-
-| `@iress/ids-themes` | `@iress-oss/ids-components` |
-| --- | --- |
-| 5.x | 5.x |
-| 4.x | 3.x - 4.x |
-| 3.x | 3.x - 4.x |
-
-[](#list)List
--------------
-
-Version: 5.5.0-29845
-
-* * *
-
-5.5.0-29845Latest5.4.8-262445.4.7-261205.4.6-260525.4.5-260275.4.4-260225.4.3-259955.4.2-259585.4.1-259415.4.0-294265.3.2-290865.3.1-29028
-
-None selected
-
-Latest build only
-
-* * *
-
-### Version: 5.5.0-29845
-
-*   [css/demo-theme-1--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-1--touch.css)
-*   [css/demo-theme-1.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-1.css)
-*   [css/demo-theme-2--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-2--touch.css)
-*   [css/demo-theme-2.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-2.css)
-*   [css/demo-theme-3--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-3--touch.css)
-*   [css/demo-theme-3.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-3.css)
-*   [css/demo-theme-4--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-4--touch.css)
-*   [css/demo-theme-4.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-4.css)
-*   [css/demo-theme-5--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-5--touch.css)
-*   [css/demo-theme-5.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-5.css)
-*   [css/demo-theme-6--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-6--touch.css)
-*   [css/demo-theme-6.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/demo-theme-6.css)
-*   [css/hostplus-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/hostplus-theme-light--touch.css)
-*   [css/hostplus-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/hostplus-theme-light.css)
-*   [css/iress-beta-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-beta-theme-dark--touch.css)
-*   [css/iress-beta-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-beta-theme-dark.css)
-*   [css/iress-beta-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-beta-theme-light--touch.css)
-*   [css/iress-beta-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-beta-theme-light.css)
-*   [css/iress-theme-dark--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-theme-dark--touch.css)
-*   [css/iress-theme-dark.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-theme-dark.css)
-*   [css/iress-theme-light--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-theme-light--touch.css)
-*   [css/iress-theme-light.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-theme-light.css)
-*   [css/iress-theme-wealth--touch.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-theme-wealth--touch.css)
-*   [css/iress-theme-wealth.css](https://cdn-staging.iress.com/ids/5.5.0-29845/themes/css/iress-theme-wealth.css)
-
-#### Theme mappings
-
-*   [ag-theme-iress-lite.css](https://cdn-staging.iress.com/ids/5.5.0-29845/ag-theme-iress-lite.css)
-
-On this page
-
-*   [Versions](#versions)
-*   [List](#list)

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

@@ -1,121 +0,0 @@
-[](#themes)Themes
-=================
-
-The Iress Design System is designed to be white-labelled, allowing you to change the look and feel of the components to match your brand. This is done by using a theme.
-
-* * *
-
-Beta
-
-New component
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-[](#what-are-themes)What are themes?
-------------------------------------
-
-Themes are a collection of [design tokens](./?path=/docs/themes-tokens--docs) that are used to style the components to match a certain brand. These tokens are used to define the colours, typography, spacing, and other styles of the components.
-
-You can see the current themes available by using the theme switcher in the top left corner of this page.
-
-[](#using-a-theme)Using a theme
--------------------------------
-
-To start using a theme in your own application, you can use the `IressTheme` component from the `@iress/ids-themes` package. This component takes the name of a theme and imports the theme CSS (via the Iress CDN) to display the components in that 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;
-}
-
-import { IressTheme } from '@iress/ids-themes';
-<IressTheme name\="iress-beta-theme-light" />;
-
-Copy
-
-If you cannot use the Iress CDN, you can also use the dynamic `IressThemeImport` component to import the theme CSS from your dependencies. It will import the theme CSS from the `@iress/ids-themes` package.
-
-**Note:** This component dynamically injects CSS into the document, and may throw errors in your tests. Please see the [Testing](#testing) section for more information.
-
-\[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 { IressThemeImport } from '@iress/ids-themes';
-<IressThemeImport
-  name\="iress-beta-theme-light"
-  fallback\={<IressSpinner screenReaderText\="Loading theme..." />}
-\>
-  <App />
-</IressThemeImport\>;
-
-Copy
-
-[](#testing)Testing
--------------------
-
-Due to the CSS being loaded dynamically, you will need to set up your test configuration to handle the dynamic CSS loading.
-
-### [](#vitest)Vitest
-
-This will force the CSS from the `@iress/ids-themes` package to be loaded inline in the test environment.
-
-\[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;
-}
-
-test: {
-  // the rest of your Vitest configuration here
-  server: {
-    deps: {
-      inline: \['@iress/ids-themes'\],
-    },
-  },
-},
-
-Copy
-
-On this page
-
-*   [What are themes?](#what-are-themes)
-*   [Using a theme](#using-a-theme)
-*   [Testing](#testing)
-    *   [Vitest](#vitest)