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

package/generated/docs/foundations-tokens-introduction-docs.md

@@ -1,190 +0,0 @@
-[](#tokens)Tokens
-=================
-
-Design tokens are an integral part of the design system. They help us create consistency across components by sharing common design decisions and simplify our theming ecosystem.
-
-[](#what-are-tokens)What are tokens?
-------------------------------------
-
-Tokens are a set of variables that define the design properties of a component. They are used to define the visual properties of a component, such as colours, typography, spacing, and more.
-
-[](#token-list)Token list
--------------------------
-
-The table below shows all the new and old tokens in the design system. Use the filters to narrow down the list of tokens.
-
-Columns: 4 selected
-
-labelaliasdescriptionreadonly
-
-* * *
-
-typedefaultValuedeprecated
-
-None selected
-
-Show deprecated tokens
-
-Tokens (88)
-| Name
- | Alias
-
- | Description
-
- | Themeable
-
- |
-| --- | --- | --- | --- |
-| colour.primary.fill |  | Used for primary buttons and the active state of form controls such as checkboxes and radio buttons. Also used for the border of tags when they have a custom button. |  |
-| colour.primary.fillHover |  | Used for the hover state of primary buttons as well as hovering over active form controls. |  |
-| colour.primary.onFill |  | Used as the foreground colour on primary buttons and active form controls. |  |
-| colour.primary.surface |  | Used as the background colour for secondary buttons and the focused state of menu and tab items. Also used as the background colour of active buttons. |  |
-| colour.primary.surfaceHover |  | Used for the hover state of secondary buttons, form controls and hovering over focused menu and tab items. Also used when hovering over table rows. |  |
-| colour.primary.text |  | Used for text on primary buttons, active form controls and focused tab and menu items. Also used for the link text colour and tertiary buttons. |  |
-| colour.neutral.10 |  | Used as the default background colour for most components. For tooltips, it is used as the foreground colour for the tooltip content. |  |
-| colour.neutral.20 |  | Used as the alternating background colour for components such as tables. Used as the background colour behind panels and cards for highly interactive screens. |  |
-| colour.neutral.30 |  | Used as the border colour for dividers, and the default divider colour for components with in-built headers and footers such as cards. |  |
-| colour.neutral.40 |  | Used for borders in subtle interactive components, such as checkboxes and radios with hidden controls and the progress bar. |  |
-| colour.neutral.50 |  | Used as the background colour for interactive components such as the slider. |  |
-| colour.neutral.60 |  | Used for placeholder text in form controls and disabled states. |  |
-| colour.neutral.70 |  | Used for muted text such as hints and descriptions to allow for content hierarchy. |  |
-| colour.neutral.80 |  | Used as the default text colour for most components. For tooltips, it is used as the background colour. |  |
-| colour.accent.brand |  | The brand accent is useful for grabbing attention and to support your primary/brand colour. It should be used sparingly to draw attention to key elements. |  |
-| colour.system.success.fill |  | Used for the background colour of primary success buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts. |  |
-| colour.system.success.fillHover |  | Used for the hover state of primary success buttons. |  |
-| colour.system.success.onFill |  | Used for the foreground colour of primary success buttons and badges. |  |
-| colour.system.success.surface |  | Used for the background colour of success alerts and toasts, and the background of secondary success buttons. |  |
-| colour.system.success.surfaceHover |  | Used for the hover state of secondary success buttons. |  |
-| colour.system.success.text |  | Used for the text colour of success alerts and toasts, and success tertiary buttons. |  |
-| colour.system.danger.fill |  | Used for the background colour of primary danger buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts. |  |
-| colour.system.danger.fillHover |  | Used for the hover state of primary danger buttons. |  |
-| colour.system.danger.onFill |  | Used for the foreground colour of primary danger buttons and badges. |  |
-| colour.system.danger.surface |  | Used for the background colour of danger alerts and toasts, and the background of secondary danger buttons. |  |
-| colour.system.danger.surfaceHover |  | Used for the hover state of secondary danger buttons. |  |
-| colour.system.danger.text |  | Used for the text colour of danger alerts and toasts, and danger tertiary buttons. |  |
-| colour.system.warning.fill |  | Used for the border of warning alerts and the background of warning badges. |  |
-| colour.system.warning.onFill |  | Used for the foreground colour of warning badges. |  |
-| colour.system.warning.surface |  | Used for the background colour of warning alerts. |  |
-| colour.system.warning.text |  | Used for the text colour of warning alerts. |  |
-| colour.system.info.fill |  | Used for the border of info alerts and toasts and the background of info badges. |  |
-| colour.system.info.onFill |  | Used for the foreground colour of info badges. |  |
-| colour.system.info.surface |  | Used for the background colour of info alerts and toasts. |  |
-| colour.system.info.text |  | Used for the text colour of info alerts and toasts. |  |
-| colour.system.backdrop.fill |  | Used for the background colour of the backdrop. |  |
-| elevation.raised.shadow |  | Shadow for raised elevations |  |
-| elevation.raised.border |  | Border for raised elevations |  |
-| elevation.floating.shadow |  | Shadow for floating elevations |  |
-| elevation.floating.border |  | Border for floating elevations |  |
-| elevation.overflow.shadow |  | Shadow for overflow elevations |  |
-| elevation.overflow.border |  | Border for overflow elevations |  |
-| elevation.focus.shadow |  | Shadow for focus elevations |  |
-| elevation.focusCompact.shadow |  | Shadow for focus compact elevations |  |
-| elevation.focusCompact.borderColor |  | Border color for focus compact elevations |  |
-| radius.100 |  | The base unit for radius. The fallback for all other values will be calculated from this value. |  |
-| radius.000 | none | No radius |  |
-| radius.025 |  | 25% (0.25x) radius |  |
-| radius.050 |  | 50% (0.5x) radius |  |
-| radius.075 |  | 75% (0.75x) radius |  |
-| radius.system.badge |  | Applies to badges and tags (that have not been designated to be a circle). |  |
-| radius.system.button |  | Applies to buttons and other interactive elements such as the hover state of links. |  |
-| radius.system.form |  | Applies to form inputs and alerts. |  |
-| radius.system.layout |  | Applies to panels, modals and slideouts. |  |
-| spacing.100 | xs | The base unit for spacing. The fallback for all other values will be calculated from this value. |  |
-| spacing.150 |  | 150% (1.5x) spacing |  |
-| spacing.200 | sm | 200% (2x) spacing |  |
-| spacing.250 |  | 250% (2.5x) spacing |  |
-| spacing.300 |  | 300% (3x) spacing |  |
-| spacing.350 |  | 350% (3.5x) spacing |  |
-| spacing.400 | md | 400% (4x) spacing |  |
-| spacing.500 |  | 500% (5x) spacing |  |
-| spacing.600 | lg | 600% (6x) spacing |  |
-| spacing.700 |  | 700% (7x) spacing |  |
-| spacing.800 |  | 800% (8x) spacing |  |
-| spacing.900 |  | 900% (9x) spacing |  |
-| spacing.1000 |  | 1000% (10x) spacing |  |
-| spacing.1200 | xl | 1200% (12x) spacing |  |
-| spacing.000 | none | No spacing |  |
-| spacing.050 |  | 50% (0.5x) spacing |  |
-| typography.base.size |  | This is the base font size, and is used to calculate the font sizes of each token. |  |
-| typography.base.headingFont |  | This is the base font family for headings, used for heading tokens. |  |
-| typography.base.bodyFont |  | This is the base font family for body, used for body tokens. |  |
-| typography.heading.1 |  | Use for the main page title to establish a clear hierarchy. There is only one H1 per screen, emphasising the primary purpose or context of the page. |  |
-| typography.heading.2 |  | Use for \*\*primary section headings\*\* within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with: body.md or body.lg. |  |
-| typography.heading.3 |  | Use for: sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts. |  |
-| typography.heading.4 |  | Use for: supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout. |  |
-| typography.heading.5 |  | Use for: minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy. |  |
-| typography.body.sm.regular |  | The default small text, most commonly used to display text in small components and compact tables and lists. |  |
-| typography.body.sm.strong |  | Strong text is used to highlight important information in a paragraph of text. |  |
-| typography.body.sm.em |  | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |  |
-| typography.body.md.regular |  | The default medium text, most commonly used to display text across all products. |  |
-| typography.body.md.strong |  | Strong text is used to highlight important information in a paragraph of text. |  |
-| typography.body.md.em |  | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |  |
-| typography.body.lg.regular |  | The default large text, most commonly used to display large text across all products. |  |
-| typography.body.lg.strong |  | Strong text is used to highlight important information in a paragraph of text. |  |
-| typography.body.lg.em |  | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |  |
-| typography.code |  | Used to display code snippets in the product, such as in the API documentation. |  |
-
-* * *
-
-[](#for-developers)For developers
----------------------------------
-
-If you are using the IDS components, the tokens have already been mapped out to their respective components. You can use the tokens in the component props to change the visual properties of the component.
-
-[
-
-Learn more about styling props
-
-](/?path=/docs/styling-props-reference--docs)
-
-\[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 { IressText } from '@iress-oss/ids-components';
-<IressText color\="colour.primary.text"\>I am branded text</IressText\>;
-
-Copy
-
-If you are not using the IDS components, you can use the tokens directly by using the `cssVars` object from `@iress-oss/ids-tokens`.
-
-\[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 { cssVars } from '@iress-oss/ids-tokens';
-<div style\={{ color: cssVars.colour.primary.text }}\>I am branded text</div\>;
-
-Copy
-
-On this page
-
-*   [What are tokens?](#what-are-tokens)
-*   [Token list](#token-list)
-*   [For developers](#for-developers)

package/generated/docs/foundations-tokens-radius-docs.md

@@ -1,71 +0,0 @@
-[](#radius)Radius
-=================
-
-Radius is the curvature of the corners of elements. It is used to soften the appearance of elements and make them more visually appealing.
-
-Radius tokens
-| Token Name | Alias | Description | Visual |
-| --- | --- | --- | --- |
-| radius.000 | none | No radius | 
-0px
-
- |
-| radius.025 |  | 25% (0.25x) radius | 
-
-4px
-
- |
-| radius.050 |  | 50% (0.5x) radius | 
-
-8px
-
- |
-| radius.075 |  | 75% (0.75x) radius | 
-
-12px
-
- |
-| radius.100 |  | The base unit for radius. The fallback for all other values will be calculated from this value. | 
-
-16px
-
- |
-
-[](#system)System
------------------
-
-Some components have a default radius to better align to a brand. Although usually they inherit from the base units, for some brands you may need to customise this to further emphasise their identity.
-
-### Badge
-
-Applies to badges and tags (that have not been designated to be a circle).
-
-radius.system.badge
-
-* * *
-
-### Button
-
-Applies to buttons and other interactive elements such as the hover state of links.
-
-radius.system.button
-
-* * *
-
-### Form
-
-Applies to form inputs and alerts.
-
-radius.system.form
-
-* * *
-
-### Layout
-
-Applies to panels, modals and slideouts.
-
-radius.system.layout
-
-On this page
-
-*   [System](#system)

package/generated/docs/foundations-tokens-spacing-docs.md

@@ -1,89 +0,0 @@
-[](#spacing)Spacing
-===================
-
-Spacing is the distance between elements. It is used to create visual balance and hierarchy in the UI to ensure a cohesive experience for the user.
-
-Spacing tokens
-| Token Name | Alias | Description | Visual |
-| --- | --- | --- | --- |
-| spacing.000 | none | No spacing | 
-0px
-
- |
-| spacing.050 |  | 50% (0.5x) spacing | 
-
-2px
-
- |
-| spacing.100 | xs | The base unit for spacing. The fallback for all other values will be calculated from this value. | 
-
-4px
-
- |
-| spacing.150 |  | 150% (1.5x) spacing | 
-
-6px
-
- |
-| spacing.200 | sm | 200% (2x) spacing | 
-
-8px
-
- |
-| spacing.250 |  | 250% (2.5x) spacing | 
-
-10px
-
- |
-| spacing.300 |  | 300% (3x) spacing | 
-
-12px
-
- |
-| spacing.350 |  | 350% (3.5x) spacing | 
-
-14px
-
- |
-| spacing.400 | md | 400% (4x) spacing | 
-
-16px
-
- |
-| spacing.500 |  | 500% (5x) spacing | 
-
-20px
-
- |
-| spacing.600 | lg | 600% (6x) spacing | 
-
-24px
-
- |
-| spacing.700 |  | 700% (7x) spacing | 
-
-28px
-
- |
-| spacing.800 |  | 800% (8x) spacing | 
-
-32px
-
- |
-| spacing.900 |  | 900% (9x) spacing | 
-
-36px
-
- |
-| spacing.1000 |  | 1000% (10x) spacing | 
-
-40px
-
- |
-| spacing.1200 | xl | 1200% (12x) spacing | 
-
-48px
-
- |
-
-On this page

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

@@ -1,322 +0,0 @@
-[](#typography)Typography
-=========================
-
-Typography is controlled by the `IressText` component, or the `textStyle` prop on other components. They implement consistent line heights and font weights.
-
-[](#body)Body
--------------
-
-This is the default text variant, and is designed to be clear and easy to read. This high level token also styles other tags beneath it such as `ul`, `ol`, `em` and `strong`, so that they inherit the same styling as the body text.
-
-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,{' '}
-    <strong\>
-      harum provident    </strong\>
-    {' '}deleniti molestiae dolorum aliquid tempora optio accusamus dolore{' '}
-    <em\>
-      porro voluptatibus    </em\>
-    . 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
-
-### [](#sizes)Sizes
-
-Body text can be set in a variety of sizes, from small to large. The size of the text should be chosen based on the context and importance of the content.
-
-typography.body.sm Used for small components such as badges and field hints, as well as compact variations of tables and lists.
-
-typography.body.md The most commonly used body text size, used for most text content in the product.
-
-typography.body.lg Used for tag lines, subtitles, and other large text content in the product.
-
-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 gap\="md"\>
-  <IressText textStyle\="typography.body.sm"\>
-    <TokenTag\>
-      typography.body.sm    </TokenTag\>
-    {' '}Used for small components such as badges and field hints, as well as compact variations of tables and lists.
-  </IressText\>
-  <IressText textStyle\="typography.body.md"\>
-    <TokenTag\>
-      typography.body.md    </TokenTag\>
-    {' '}The most commonly used body text size, used for most text content in the product.
-  </IressText\>
-  <IressText textStyle\="typography.body.lg"\>
-    <TokenTag\>
-      typography.body.lg    </TokenTag\>
-    {' '}Used for tag lines, subtitles, and other large text content in the product.
-  </IressText\>
-</IressStack\>
-
-Copy
-
-### [](#variants)Variants
-
-Body text can be combined with bold (strong) and italic (emphasis) text to create emphasis or hierarchy within the content.
-
-*   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.
-
-#### Strong
-
-Strong variant is used to draw attention to certain text, making a large block of text easier to scan. This token is used to style the <strong /> tag in a body of text.
-
-typography.body.sm.strongStrong text is used to highlight important information in a paragraph of text.
-
-typography.body.md.strongStrong text is used to highlight important information in a paragraph of text.
-
-typography.body.lg.strongStrong text is used to highlight important information in a paragraph of text.
-
-* * *
-
-#### Emphasis
-
-Emphasis (em) variant is used to emphasise certain text to indicate they make a reference to a standard/legal term. This token is used to style the <em /> tag in a body of text.
-
-typography.body.sm.em Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-
-typography.body.md.em Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-
-typography.body.lg.em Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-
-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 gap\="md"\>
-  <IressText\>
-    <h4\>
-      Strong    </h4\>
-    <p\>
-      {\`Strong variant is used to draw attention to certain text, making a large block of text easier to scan. This token is used to style the <strong /> tag in a body of text.\`}
-    </p\>
-  </IressText\>
-  <IressText textStyle\="typography.body.sm.strong"\>
-    <TokenTag\>
-      typography.body.sm.strong    </TokenTag\>
-    Strong text is used to highlight important information in a paragraph of text.  </IressText\>
-  <IressText textStyle\="typography.body.md.strong"\>
-    <TokenTag\>
-      typography.body.md.strong    </TokenTag\>
-    Strong text is used to highlight important information in a paragraph of text.  </IressText\>
-  <IressText textStyle\="typography.body.lg.strong"\>
-    <TokenTag\>
-      typography.body.lg.strong    </TokenTag\>
-    Strong text is used to highlight important information in a paragraph of text.  </IressText\>
-  <IressDivider />
-  <IressText\>
-    <h4\>
-      Emphasis    </h4\>
-    <p\>
-      {\`Emphasis (em) variant is used to emphasise certain text to indicate they make a reference to a standard/legal term. This token is used to style the <em /> tag in a body of text.\`}
-    </p\>
-  </IressText\>
-  <IressText textStyle\="typography.body.sm.em"\>
-    <TokenTag\>
-      typography.body.sm.em    </TokenTag\>
-    {' '}Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-  </IressText\>
-  <IressText textStyle\="typography.body.md.em"\>
-    <TokenTag\>
-      typography.body.md.em    </TokenTag\>
-    {' '}Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-  </IressText\>
-  <IressText textStyle\="typography.body.lg.em"\>
-    <TokenTag\>
-      typography.body.lg.em    </TokenTag\>
-    {' '}Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-  </IressText\>
-</IressStack\>
-
-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).
-
-Heading 1 `<h1 />`
-==================
-
-typography.heading.1
-
-Use for the main page title to establish a clear hierarchy. There is only one H1 per screen, emphasising the primary purpose or context of the page.
-
-Heading 2 `<h2 />`
-------------------
-
-typography.heading.2
-
-Use for \*\*primary section headings\*\* within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with: body.md or body.lg.
-
-### Heading 3 `<h3 />`
-
-typography.heading.3
-
-Use for: sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-
-#### Heading 4 `<h4 />`
-
-typography.heading.4
-
-Use for: supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-
-##### Heading 5 `<h5 />`
-
-typography.heading.5
-
-Use for: minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-
-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 gap\="lg"\>
-  <IressText\>
-    <h1\>
-      Heading 1{' '}
-      <code\>
-        {\`<h1 />\`}
-      </code\>
-    </h1\>
-    <IressText
-      mb\="sm"
-      mt\="\-sm"
-    \>
-      <TokenTag\>
-        typography.heading.1      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for the main page title to establish a clear hierarchy. There is only one H1 per screen, emphasising the primary purpose or context of the page.    </p\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      Heading 2{' '}
-      <code\>
-        {\`<h2 />\`}
-      </code\>
-    </h2\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.2      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for \*\*primary section headings\*\* within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with: body.md or body.lg.    </p\>
-  </IressText\>
-  <IressText\>
-    <h3\>
-      Heading 3{' '}
-      <code\>
-        {\`<h3 />\`}
-      </code\>
-    </h3\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.3      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for: sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.    </p\>
-  </IressText\>
-  <IressText\>
-    <h4\>
-      Heading 4{' '}
-      <code\>
-        {\`<h4 />\`}
-      </code\>
-    </h4\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.4      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for: supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.    </p\>
-  </IressText\>
-  <IressText\>
-    <h5\>
-      Heading 5{' '}
-      <code\>
-        {\`<h5 />\`}
-      </code\>
-    </h5\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.5      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for: minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.    </p\>
-  </IressText\>
-  <IressText
-    element\="h2"
-    textStyle\="typography.heading.3"
-  \>
-    An H2 styled as an H3.  </IressText\>
-</IressStack\>
-
-Copy
-
-[](#code)Code
--------------
-
-The code variant is used to display code snippets or other monospaced text. It is designed to be clear and easy to read, with a fixed-width font that makes it easy to distinguish between characters.
-
-typography.code Used to display code snippets in the product, such as in the API documentation.
-
-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 gap\="md"\>
-  <IressText textStyle\="typography.code"\>
-    <TokenTag\>
-      typography.code    </TokenTag\>
-    {' '}Used to display code snippets in the product, such as in the API documentation.
-  </IressText\>
-</IressStack\>
-
-Copy
-
-On this page
-
-*   [Body](#body)
-    *   [Sizes](#sizes)
-    *   [Variants](#variants)
-*   [Headings](#headings)
-*   [Code](#code)