@iress-oss/ids-mcp-server 6.0.0-alpha.2 → 6.0.0-alpha.4

package/generated/docs/components_components-tabset-docs.md

@@ -28,7 +28,7 @@ Employment information goes here
 
 Medical history goes here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTabSet\>
   <IressTab label\="Address"\>
@@ -130,7 +130,7 @@ You can use the `IressTabSet` component to create tab navigation to control an a
 
 [Google](https://google.com)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTabSet\>
   <IressTab
@@ -236,7 +236,7 @@ Employment information goes here
 
 Medical history goes here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTabSet\>
   <IressTab label\="Address"\>
@@ -335,7 +335,7 @@ If you would like to set a tab by default, use the `defaultSelected` prop.
 
 [Google](https://google.com)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTabSet defaultSelected\={1}\>
   <IressTab
@@ -447,7 +447,7 @@ Employment information goes here
 
 Medical history goes here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
@@ -455,7 +455,7 @@ import {
   IressTab,
   IressTabSet,
   type IressTabSetProps,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 export const TabsUsingState \= () \=> {
   const \[selected, setSelected\] \= useState<number\>();
@@ -603,7 +603,7 @@ Employment information goes here
 
 Medical history goes here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressPanel\>
@@ -723,7 +723,7 @@ Tabs can be lazy loaded via state, allowing you to add/remove tabs as needed.
 
 Toggle tabs
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
@@ -731,7 +731,7 @@ import {
   IressTab,
   IressTabSet,
   type IressTabSetProps,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 export const TabsLazyLoading \= () \=> {
   const \[loadTabs, setLoadTabs\] \= useState<boolean\>();
@@ -864,7 +864,7 @@ Employment information goes here
 
 Medical history goes here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTabSet\>
   <IressBadge

package/generated/docs/components_components-tabset-tab-docs.md

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 Tab
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTab label\="Tab" />
 
@@ -100,7 +100,7 @@ The tab can be set to active using the `active` prop.
 
 Tab
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTab
   active
@@ -179,7 +179,7 @@ A tab can have a unique value set to it, used to determine its active state in a
 
 Tab with value
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTabSet\>
   <IressTab
@@ -266,7 +266,7 @@ Tab
 
 Some content for this tab
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTabSet\>
   <IressTab label\="Tab"\>

package/generated/docs/components_components-tag-docs.md

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 Tag
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTag\>
   Tag
@@ -93,8 +93,17 @@ The text a screen reader will announce defaults to "Delete" but can be changed u
 
 Tag 1Tag 2Tag 3
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  type IressButtonProps,
+  IressIcon,
+  IressInline,
+  IressTag,
+  type IressTagProps,
+} from '@/main';
+import { useState } from 'react';
 export const TagDeletion \= (args: IressTagProps) \=> {
   const \[tags, setTags\] \= useState(\['Tag 1', 'Tag 2', 'Tag 3'\]);
   const handleAdd: IressButtonProps\['onClick'\] \= () \=> {
@@ -185,7 +194,7 @@ Tag
 
 Some actions go in here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTag deleteButton\={<IressPopover activator\={<IressButton mode\="tertiary"\><IressIcon name\="chevron-circle-down" screenreaderText\="Actions"/></IressButton\>} align\="bottom-start"\><IressPanel\>Some actions go in here</IressPanel\></IressPopover\>}\>
   Tag
@@ -289,7 +298,7 @@ If you need to manage tags that are selected from a existing list, use `IressRic
 
 Tag
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTagInput
   defaultValue\={\[

package/generated/docs/components_components-text-docs.md

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 The quick brown fox jumps over the lazy dog
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressText\>
   The quick brown fox jumps over the lazy dog
@@ -75,9 +75,9 @@ This is a h2 element.
 
 This is a pre element.
 
-```
+Hide codedrawOpen in CodeSandbox
 
-<IressStack gap\="spacing.100"\>
+<IressStack gap\="spacing.1"\>
   <IressText element\="p"\>
     This is a p element.  </IressText\>
   <IressText element\="div"\>
@@ -142,6 +142,8 @@ This is the typography.body.sm text style.
 
 This is the typography.body.sm.regular text style.
 
+This is the typography.body.sm.medium text style.
+
 This is the typography.body.sm.strong text style.
 
 This is the typography.body.sm.em text style.
@@ -150,6 +152,8 @@ This is the typography.body.md.regular text style.
 
 This is the typography.body.md text style.
 
+This is the typography.body.md.medium text style.
+
 This is the typography.body.md.strong text style.
 
 This is the typography.body.md.em text style.
@@ -158,13 +162,15 @@ This is the typography.body.lg text style.
 
 This is the typography.body.lg.regular text style.
 
+This is the typography.body.lg.medium text style.
+
 This is the typography.body.lg.strong text style.
 
 This is the typography.body.lg.em text style.
 
 This is the typography.code text style.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressText textStyle\="typography.heading.1"\>
@@ -181,6 +187,8 @@ This is the typography.code text style.
     This is the typography.body.sm text style.  </IressText\>
   <IressText textStyle\="typography.body.sm.regular"\>
     This is the typography.body.sm.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.sm.medium"\>
+    This is the typography.body.sm.medium text style.  </IressText\>
   <IressText textStyle\="typography.body.sm.strong"\>
     This is the typography.body.sm.strong text style.  </IressText\>
   <IressText textStyle\="typography.body.sm.em"\>
@@ -189,6 +197,8 @@ This is the typography.code text style.
     This is the typography.body.md.regular text style.  </IressText\>
   <IressText textStyle\="typography.body.md"\>
     This is the typography.body.md text style.  </IressText\>
+  <IressText textStyle\="typography.body.md.medium"\>
+    This is the typography.body.md.medium text style.  </IressText\>
   <IressText textStyle\="typography.body.md.strong"\>
     This is the typography.body.md.strong text style.  </IressText\>
   <IressText textStyle\="typography.body.md.em"\>
@@ -197,6 +207,8 @@ This is the typography.code text style.
     This is the typography.body.lg text style.  </IressText\>
   <IressText textStyle\="typography.body.lg.regular"\>
     This is the typography.body.lg.regular text style.  </IressText\>
+  <IressText textStyle\="typography.body.lg.medium"\>
+    This is the typography.body.lg.medium text style.  </IressText\>
   <IressText textStyle\="typography.body.lg.strong"\>
     This is the typography.body.lg.strong text style.  </IressText\>
   <IressText textStyle\="typography.body.lg.em"\>
@@ -301,7 +313,7 @@ Nested text mode demonstration:
 
 I am nested, and return to the original colour
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressText color\="colour.primary.fill"\>
@@ -413,7 +425,7 @@ The quick brown fox jumps over the lazy dog
 
 The quick brown fox jumps over the lazy dog
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressText textAlign\="left"\>
@@ -457,7 +469,7 @@ H2 heading with icons
 
 ###### H6 heading with icons
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack\>
   <IressText element\="h1"\>
@@ -538,12 +550,12 @@ Iress has continued to innovate with cloud-based solutions, artificial intellige
 
 Some code in here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressText
   maxWidth\="container.md"
   mx\="auto"
-  px\="spacing.200"
+  px\="spacing.2"
 \>
   <h2\>
     History  </h2\>

package/generated/docs/components_components-toaster-docs.md

@@ -20,14 +20,14 @@ This component has been recently updated with new props. The props have been mar
 
 Show toast using provider
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
   IressToasterProvider,
   type IressToasterProviderProps,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 const ToastWithTrigger \= () \=> {
   const toaster \= useToaster();
   return (
@@ -85,14 +85,14 @@ You can use the `success`, `info` and `error` methods from the hook to trigger t
 
 Show toast using provider
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
   IressToasterProvider,
   type IressToasterProviderProps,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 const ToastWithTrigger \= () \=> {
   const toaster \= useToaster();
   return (
@@ -144,7 +144,7 @@ If you want to dismiss a toast programmatically, you can use the `close` method
 
 Show toast using provider
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
@@ -152,7 +152,7 @@ import {
   IressToasterProvider,
   type IressToasterProviderProps,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 const ToastWithTrigger \= () \=> {
   const toaster \= useToaster();
@@ -217,7 +217,7 @@ The toast offers three status that set a distinctive colour and icon. They can b
 
 errorinfosuccess
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
@@ -226,7 +226,7 @@ import {
   type IressToasterProviderProps,
   type ToastStatus,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 const ToastWithTrigger \= ({ status }: { status: ToastStatus }) \=> {
   const toaster \= useToaster();
   return (
@@ -281,14 +281,14 @@ Timeouts must be set in milliseconds; as an example, if you want a timeout of fi
 
 1000ms timeout
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
   IressToasterProvider,
   type IressToasterProviderProps,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 const ToastWithTrigger \= () \=> {
   const toaster \= useToaster();
   return (
@@ -345,7 +345,7 @@ Toaster positions
 
 bottom-startbottom-centerbottom-end
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
@@ -357,7 +357,7 @@ import {
   type IressToasterProviderProps,
   type NewToast,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 const DEFAULT\_TOAST: NewToast \= {
   content: 'Message sent successfully',
   heading: 'Success',

package/generated/docs/components_components-toggle-docs.md

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 Toggle
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressToggle
   layout\="inline"
@@ -117,7 +117,7 @@ Toggles should always have a label, which is set via its `children`.
 
 Toggle
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressToggle
   layout\="inline"
@@ -203,7 +203,7 @@ Labels can be hidden via the `hiddenLabel` prop; this will hide the label from v
 
 Toggle
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressToggle
   hiddenLabel
@@ -290,9 +290,9 @@ The on / off state of the toggle can be controlled by setting the `checked` prop
 
 Controlled Toggle
 
-```
+Hide codedrawOpen in CodeSandbox
 
-import { IressToggle, type IressToggleProps } from '@iress-oss/ids-components';
+import { IressToggle, type IressToggleProps } from '@/main';
 import { useState } from 'react';
 export const ControlledToggle \= (props: IressToggleProps) \=> {
   const \[isChecked, setIsChecked\] \= useState(true);
@@ -402,7 +402,7 @@ Toggle
 
 Toggle
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressText\>

package/generated/docs/components_components-tooltip-docs.md

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 Hover me
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTooltip tooltipText\="Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
   <IressButton\>
@@ -108,7 +108,7 @@ Single line
 
 Multi line
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <div
   style\={{
@@ -256,7 +256,7 @@ Bottom
 
 Bottom End
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <div
   style\={{
@@ -458,7 +458,7 @@ The `delay` prop requires a number that is the number of milliseconds that pass
 
 2000ms
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <div
   style\={{

package/generated/docs/components_components-validationmessage-docs.md

@@ -20,7 +20,7 @@ Error:
 
 Validation message
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressValidationMessage\>
   Validation message
@@ -124,7 +124,7 @@ Warning:
 
 Something could go wrong.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack\>
   <IressValidationMessage status\="danger"\>
@@ -230,7 +230,7 @@ Prefix:
 
 Something could go wrong.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack\>
   <IressValidationMessage
@@ -366,7 +366,7 @@ Something could go wrong.
 
 * * *
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressStack\>
@@ -492,7 +492,7 @@ Messages can be passed programmatically as a `ValidationMessageObj[]` using the
     Something went right.
     
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressValidationSummary
  messages\={\[

package/generated/docs/components_foundations-responsive-layout-docs.md

@@ -24,7 +24,7 @@ Breakpoints
 | xl | 1200px - 1499px | (min-width: 1200px) and (max-width: 1499px) | 1280px | 1366px width |
 | xxl | 1500px and above | (min-width: 1500px) | 1280px | 1920px width |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\={<IressText element\="h3" textAlign\="left"\>Breakpoints supported by IDS</IressText\>}
@@ -306,7 +306,7 @@ To ensure the best usability and accessibility, please do not use grids with mor
 
 You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressInline
@@ -360,7 +360,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
     <p\>
       To ensure the best usability and accessibility, please do not use grids with more than 4 columns maximum on extra small screens. For developers, this means the minimum span on mobile devices is 3.    </p\>
     <IressPanel bg\="alt"\>
-      <kn renderLabel\="viewing" />
+      <Ln renderLabel\="viewing" />
     </IressPanel\>
   </IressText\>
   <IressContainer
@@ -563,7 +563,7 @@ To ensure the best usability and accessibility, please do not use grids with mor
 
 You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressInline
@@ -617,7 +617,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
     <p\>
       To ensure the best usability and accessibility, please do not use grids with more than 4 columns maximum on small screens. For developers, this means the minimum span on mobile devices is 3.    </p\>
     <IressPanel bg\="alt"\>
-      <kn renderLabel\="viewing" />
+      <Ln renderLabel\="viewing" />
     </IressPanel\>
   </IressText\>
   <IressContainer
@@ -855,7 +855,7 @@ To ensure the best usability and accessibility, please do not use grids with mor
 
 You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressInline
@@ -909,7 +909,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
     <p\>
       To ensure the best usability and accessibility, please do not use grids with more than 6 columns maximum on medium screens. For developers, this means the minimum span on medium screems is 2.    </p\>
     <IressPanel bg\="alt"\>
-      <kn renderLabel\="viewing" />
+      <Ln renderLabel\="viewing" />
     </IressPanel\>
   </IressText\>
   <IressContainer
@@ -1187,7 +1187,7 @@ From large screens onwards, all 12 columns of the grid can be used. For develope
 
 You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressInline
@@ -1241,7 +1241,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
     <p\>
       From large screens onwards, all 12 columns of the grid can be used. For developers, this means the minimum span on large screens is 1.    </p\>
     <IressPanel bg\="alt"\>
-      <kn renderLabel\="viewing" />
+      <Ln renderLabel\="viewing" />
     </IressPanel\>
   </IressText\>
   <IressContainer
@@ -1615,7 +1615,7 @@ From large screens onwards, all 12 columns of the grid can be used. For develope
 
 You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressInline
@@ -1673,7 +1673,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
       {' '}prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
     </p\>
     <IressPanel bg\="alt"\>
-      <kn renderLabel\="viewing" />
+      <Ln renderLabel\="viewing" />
     </IressPanel\>
   </IressText\>
   <IressContainer\>
@@ -2043,7 +2043,7 @@ From large screens onwards, all 12 columns of the grid can be used. For develope
 
 You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressInline
@@ -2101,7 +2101,7 @@ You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your s
       {' '}prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
     </p\>
     <IressPanel bg\="alt"\>
-      <kn renderLabel\="viewing" />
+      <Ln renderLabel\="viewing" />
     </IressPanel\>
   </IressText\>
   <IressContainer\>
@@ -2463,7 +2463,7 @@ For developers
 If you are using the IDS components, the breakpoints have already been mapped out to their respective props. You can use props such as `gap` to change the visual properties of the component at certain breakpoints.
 
 import { IressStack } from '@iress-oss/ids-components';
-<IressStack gap\={{ xs: 'spacing.100', md: 'spacing.200' }} />;
+<IressStack gap\={{ xs: 'spacing.1', md: 'spacing.2' }} />;
 
 ```
 
@@ -2509,8 +2509,9 @@ Resize the screen to see the columns change
 | Princess Leia | 19 |
 | Han Solo | 32 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import { IressText, useResponsiveProps, IressTable } from '@/main';
 export const ResponsiveTableColumns \= () \=> {
   const { value } \= useResponsiveProps({
     base: \[{ key: 'name', label: 'Name' }\],

package/generated/docs/components_foundations-z-index-stacking-docs.md

@@ -18,7 +18,7 @@ Reference
 | TOAST | Used for IressToast. Can be combined with floating elevation. | 500 |
 | TOOLTIP | Used for IressTooltip. Can be combined with floating elevation. | 600 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   columns\={\[

package/generated/docs/components_introduction-docs.md

@@ -1,7 +1,7 @@
 Iress Design System
 ===================
 
-6.0.0-alpha.1
+6.0.0-alpha.4
 
 The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.