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

package/generated/docs/styling-props-colour-docs.md

@@ -1,172 +0,0 @@
-[](#colour)Colour
-=================
-
-These are all styling props related to changing the foreground and background colours of a component.
-
-[](#bg)`bg`
------------
-
-The `bg` prop allows you to change the background of any component to the value of a colour token. It should be used sparingly, and usually alongside the `color` prop to ensure accessibility.
-
-Below is an example of a component using `bg` and `color` to create a featured panel that changes colour depending on the theme.
-
-##### Featured panel
-
-This is a featured panel, in case you want to highlight something important or draw attention to a specific piece of content.
-
-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; }
-
-<IressPanel
-  bg\="colour.primary.fill"
-  color\="colour.primary.onFill"
-\>
-  <h5\>
-    Featured panel  </h5\>
-  <p\>
-    This is a featured panel, in case you want to highlight something important or draw attention to a specific piece of content.  </p\>
-</IressPanel\>
-
-Copy
-
-#### [](#bg-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| bg | 
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | 
-
-"colour.primary.fill"
-
- |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | 
-
-"colour.primary.onFill"
-
- |
-
-[](#color)`color`
------------------
-
-The `color` prop allows you to change the foreground of any component to the value of a colour token. It should be used sparingly, and usually alongside the `bg` prop to ensure accessibility.
-
-Below is an example of using the `color` prop to highlight text throughout a component.
-
-Sometimes actions are **successful**, and sometimes they are **dangerous**.
-
-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; }
-
-<IressPanel\>
-  <p\>
-    Sometimes actions are{' '}
-    <IressText
-      color\="colour.system.success.text"
-      element\="strong"
-    \>
-      successful    </IressText\>
-    , and sometimes they are{' '}
-    <IressText
-      color\="colour.system.danger.text"
-      element\="strong"
-    \>
-      dangerous    </IressText\>
-    .  </p\>
-</IressPanel\>
-
-Copy
-
-#### [](#color-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| bg | 
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-
-On this page
-
-*   [bg](#bg)
-*   [color](#color)

package/generated/docs/styling-props-elevation-docs.md

@@ -1,88 +0,0 @@
-[](#elevation)Elevation
-=======================
-
-These are all styling props related to changing the elevation of a component to help guide visual hierarchy.
-
-[](#layerstyle)`layerStyle`
----------------------------
-
-The `layerStyle` prop allows you to draw attention to certain parts of the screen, making a screen easier to scan. The following styles are available:
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
-
-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; }
-
-<IressPanel layerStyle\="elevation.raised"\>
-  This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
-</IressPanel\>
-
-Copy
-
-#### [](#layerStyle-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| layerStyle | 
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | 
-
-"elevation.raised"
-
- |
-
-[](#focusable)`focusable`
--------------------------
-
-The `focusable` prop allows you to set the focus state of a component. This is useful for components that need to be interactive via keyboard, but are not necessarily a button or input.
-
-It can be set to `true` to enable focus styles when the element is focused using keyboard navigation, or `within` to show focus styles when an element within is focused.
-
-This element will have focus styles applied when it is focused. This is useful for accessibility and keyboard navigation.
-
-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; }
-
-<IressPanel
-  focusable\="true"
-  tabIndex\={0}
-\>
-  This element will have focus styles applied when it is focused. This is useful for accessibility and keyboard navigation.
-</IressPanel\>
-
-Copy
-
-#### [](#focusable-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| focusable | 
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | 
-
-"true"
-
- |
-
-On this page
-
-*   [layerStyle](#layerstyle)
-*   [focusable](#focusable)

package/generated/docs/styling-props-radius-docs.md

@@ -1,86 +0,0 @@
-[](#radius)Radius
-=================
-
-These are all styling props related to changing the radius of a component affects the visual softness and perceived friendliness of the interface, influencing the overall user experience.
-
-[](#borderradius)`borderRadius`
--------------------------------
-
-The `borderRadius` prop allows you to change the border radius of any component. It should be used sparingly, and often used when creating custom components that are not part of the design system, however you still want to retain the look and feel of the rest of the system.
-
-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; }
-
-<IressInput
-  borderRadius\="radius.system.layout"
-  p\="spacing.400"
-  placeholder\="Search everything"
-  textStyle\="typography.body.lg"
-/>
-
-Copy
-
-#### [](#borderRadius-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| borderRadius | 
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | 
-
-"radius.system.layout"
-
- |
-
-### [](#removing-border-radius)Removing border radius
-
-In some cases you may need to remove the border-radius to achieve design requirements. This can be done using `radius.000` or `none`.
-
-No radius here
-
-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; }
-
-<IressPanel
-  bg\="alt"
-  borderRadius\="none"
-\>
-  No radius here
-</IressPanel\>
-
-Copy
-
-#### [](#noBorderRadius-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| borderRadius | 
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | 
-
-"none"
-
- |
-
-On this page
-
-*   [borderRadius](#borderradius)
-    *   [Removing border radius](#removing-border-radius)

package/generated/docs/styling-props-reference-docs.md

@@ -1,160 +0,0 @@
-[](#styling-props)Styling props
-===============================
-
-This page lists all the custom styling properties available in our components, which design tokens they are mapped to and which CSS properties they affect.
-
-Styling properties are the recommended way of customising components for your needs, as they ensure your styles are compatible when any theme is applied to your application. If you need further customisation, you can use regular CSS and reference the tokens directly.
-
-These replace the utility classes and internal component tokens provided by previous versions of the design system.
-
-[](#reference)Reference
------------------------
-
-Styling props reference
-| JSX prop | CSS property | Token mapping | Responsive |
-| --- | --- | --- | --- |
-| [bg](/?path=/docs/styling-props-colour--docs#bg) | background | [Colour](/?path=/docs/foundations-tokens-colour--docs) | Yes |
-| [borderRadius](/?path=/docs/styling-props-radius--docs#borderradius) | border-radius | [Radius](/?path=/docs/foundations-tokens-radius--docs) | Yes |
-| [color](/?path=/docs/styling-props-colour--docs#color) | color | [Colour](/?path=/docs/foundations-tokens-colour--docs) | Yes |
-| [focusable](/?path=/docs/styling-props-elevation--docs#focusable) | border and box-shadow | [Elevation](/?path=/docs/foundations-tokens-elevation--docs) | No |
-| [layerStyle](/?path=/docs/styling-props-elevation--docs#layerstyle) | border and box-shadow | [Elevation](/?path=/docs/foundations-tokens-elevation--docs) | Yes |
-| [maxWidth](/?path=/docs/styling-props-sizing--docs#container-widths) | max-width | N/A | Yes |
-| [m](/?path=/docs/styling-props-spacing--docs#margin) | margin | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [mx](/?path=/docs/styling-props-spacing--docs#margin) | margin-inline | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [my](/?path=/docs/styling-props-spacing--docs#margin) | margin-block | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [mb](/?path=/docs/styling-props-spacing--docs#margin) | margin-bottom | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [ml](/?path=/docs/styling-props-spacing--docs#margin) | margin-left | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [mr](/?path=/docs/styling-props-spacing--docs#margin) | margin-right | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [mt](/?path=/docs/styling-props-spacing--docs#margin) | margin-top | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [noGutter](/?path=/docs/styling-props-spacing--docs#nogutter) | margin-block-end | N/A | No |
-| [p](/?path=/docs/styling-props-spacing--docs#padding) | padding | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [px](/?path=/docs/styling-props-spacing--docs#padding) | padding-inline | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [py](/?path=/docs/styling-props-spacing--docs#padding) | padding-block | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [pb](/?path=/docs/styling-props-spacing--docs#padding) | padding-bottom | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [pl](/?path=/docs/styling-props-spacing--docs#padding) | padding-left | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [pr](/?path=/docs/styling-props-spacing--docs#padding) | padding-right | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [pt](/?path=/docs/styling-props-spacing--docs#padding) | padding-top | [Spacing](/?path=/docs/foundations-tokens-spacing--docs) | Yes |
-| [srOnly](/?path=/docs/styling-props-screen-readers--docs#sronly) | Multiple properties | N/A | Yes |
-| [stretch](/?path=/docs/styling-props-spacing--docs#stretch) | align-self: stretch and height: 100% | N/A | No |
-| [textAlign](/?path=/docs/styling-props-typography--docs#textalign) | text-align | N/A | Yes |
-| [textStyle](/?path=/docs/styling-props-typography--docs#textStyle) | font | [Typography](/?path=/docs/foundations-tokens-typography--docs) | Yes |
-| [width](/?path=/docs/styling-props-sizing--docs#inputwidths) | width | N/A | Yes |
-
-[](#responsive)Responsive
--------------------------
-
-Props marked responsive can accept either a single value that affects all breakpoints, or a responsive object map that sets a different value based on breakpoint.
-
-\[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;
-}
-
-<IressPanel p\="xs" /> // applies extra small padding to all breakpoints
-<IressPanel p\={{ base: 'lg', md: 'sm' }} /> // applies large padding by default, and changes to small padding once on medium sized screens.
-
-Copy
-
-[](#iresscss)`iressCss`
------------------------
-
-In some cases you may need to apply styling props to a non-IDS component. You can do this by using the `iressCss` prop, which accepts an object of styling props and returns a string of class names that can be applied to any element.
-
-This will also work without JSX, allowing you to apply styling props to any element in 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;
-}
-
-<div className\={iressCss({ p: 'xs', bg: 'colour.primary.surface' })}\>
-  This div has extra small padding and a primary background colour.
-</div\>
-
-Copy
-
-[](#iressstyled)`iressStyled`
------------------------------
-
-If you need your own component or a third-party component to accept styling props, you can use the `iressStyled` function to create a styled component that accepts styling props. This is similar to how you would use `styled-components` or `emotion`.
-
-\[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 MyComponent \= iressStyled('div', {
-  p: 'xs',
-  bg: 'colour.primary.surface',
-});
-<MyComponent\>
-  This div has extra small padding and a primary background colour.
-</MyComponent\>;
-
-Copy
-
-[](#migrating-from-version-5)Migrating from version 5
------------------------------------------------------
-
-### [](#utility-classes)Utility classes
-
-If you have been using the utility classes from previous versions of IDS (eg. `iress-p--xs`), you will need to replace them with the new styling props. The utility classes are no longer supported in version 6.
-
-<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">&lt;IressPanel className="iress-m--sm" /&gt;</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;IressPanel m="sm" /&gt;</pre></td></tr></tbody></table>
-
-### [](#internal-component-tokens)Internal component tokens
-
-If you have been using the internal component tokens (eg. `--iress-background-color`), you will need to replace them with the new styling props. The internal component tokens are no longer supported in version 6.
-
-#### [](#note)Note
-
-*   Not every single internal component token has a direct mapping to a styling prop. For example, things like border width are no longer customisable. This helps ensure a consistent and accessible experience for all applications no matter the theme that is applied to them.
-*   Styling props only allow token values, not custom values (eg. `colour.system.status.danger` is allowed but not `red`). This is to ensure that the styling props are theme agnostic and can be used with any theme. If you need to use a custom value, you can use custom CSS or inline styles.
-
-<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">&lt;IressPanel style={{ '--iress-background-color': 'var(--iress-g-success-color)' }} /&gt;</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;IressPanel bg="colour.system.success.fill" /&gt;</pre></td></tr></tbody></table>
-
-On this page
-
-*   [Reference](#reference)
-*   [Responsive](#responsive)
-*   [iressCss](#iresscss)
-*   [iressStyled](#iressstyled)
-*   [Migrating from version 5](#migrating-from-version-5)
-    *   [Utility classes](#utility-classes)
-    *   [Internal component tokens](#internal-component-tokens)

package/generated/docs/styling-props-screen-readers-docs.md

@@ -1,71 +0,0 @@
-[](#screen-readers)Screen readers
-=================================
-
-These are all styling props related to adjusting components for screen readers.
-
-[](#sronly)`srOnly`
--------------------
-
-The `srOnly` prop allows you to set a component to be only visible on screen readers. It is used to ensure the screen reader has context of the screen to help the user understand the tasks required of them.
-
-Hello screen readers
-
-Show code
-
-#### [](#srOnly-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| srOnly | 
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | 
-
-true
-
- |
-
-### [](#responsive)Responsive
-
-The `srOnly` prop is responsive, allowing you to show content on larger screens and hiding them on smaller ones, enabling screen readers to have the same context as larger screens as they are not limited by device size.
-
-This content is visible on large screens and screen readers
-
-Show code
-
-#### [](#srOnlyResponsive-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| srOnly | 
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | 
-
-RAW
-
-srOnly : {
-
-*   base : true
-*   lg : false
-
-}
-
-
-
-
-
- |
-
-On this page
-
-*   [srOnly](#sronly)
-    *   [Responsive](#responsive)