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

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

@@ -16,9 +16,9 @@ This component has been recently updated with new props. The props have been mar
 
 [](./iframe.html?id=components-stack--default)
 
-```
+Hide codedrawOpen in CodeSandbox
 
-<IressStack gap\="spacing.100"\>
+<IressStack gap\="spacing.1"\>
   <IressPlaceholder height\="50" />
   <IressPlaceholder height\="50" />
   <IressPlaceholder height\="50" />
@@ -60,7 +60,7 @@ ResponsiveProp
 
  | \- | 
 
-"spacing.100"
+"spacing.1"
 
  |
 | horizontalAlign | 
@@ -78,7 +78,7 @@ Examples
 
 ### Gap
 
-Vertical spacing is applied to the direct children of the `IressStack` component. The amount of spacing is controlled by the gap prop which accepts from `spacing.000` to `spacing.1200`.
+Vertical spacing is applied to the direct children of the `IressStack` component. The amount of spacing is controlled by the gap prop which accepts from `spacing.0` to `spacing.10`.
 
 #### What happened to `gutter`?
 
@@ -86,53 +86,35 @@ The previous `gutter` prop has been replaced by `gap`, which uses the latest set
 
 [](./iframe.html?id=components-stack--gap)
 
-spacing.000
------------
-
-spacing.050
------------
-
-spacing.100
------------
-
-spacing.150
------------
-
-spacing.200
------------
-
-spacing.250
------------
+spacing.0
+---------
 
-spacing.300
------------
+spacing.1
+---------
 
-spacing.350
------------
+spacing.2
+---------
 
-spacing.400
------------
+spacing.3
+---------
 
-spacing.500
------------
+spacing.4
+---------
 
-spacing.600
------------
+spacing.5
+---------
 
-spacing.700
------------
+spacing.6
+---------
 
-spacing.800
------------
+spacing.7
+---------
 
-spacing.900
------------
+spacing.8
+---------
 
-spacing.1000
-------------
-
-spacing.1200
-------------
+spacing.10
+----------
 
 none
 ----
@@ -152,30 +134,13 @@ lg
 xl
 --
 
-field.footer
-------------
-
-slider.tick
------------
+Hide codedrawOpen in CodeSandbox
 
-```
-
-<IressStack gap\="spacing.400"\>
-  <IressText\>
-    <h2\>
-      spacing.000    </h2\>
-    <IressStack gap\="spacing.000"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
+<IressStack gap\="spacing.4"\>
   <IressText\>
     <h2\>
-      spacing.050    </h2\>
-    <IressStack gap\="spacing.050"\>
+      spacing.0    </h2\>
+    <IressStack gap\="spacing.0"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -185,8 +150,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.100    </h2\>
-    <IressStack gap\="spacing.100"\>
+      spacing.1    </h2\>
+    <IressStack gap\="spacing.1"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -196,8 +161,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.150    </h2\>
-    <IressStack gap\="spacing.150"\>
+      spacing.2    </h2\>
+    <IressStack gap\="spacing.2"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -207,8 +172,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.200    </h2\>
-    <IressStack gap\="spacing.200"\>
+      spacing.3    </h2\>
+    <IressStack gap\="spacing.3"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -218,8 +183,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.250    </h2\>
-    <IressStack gap\="spacing.250"\>
+      spacing.4    </h2\>
+    <IressStack gap\="spacing.4"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -229,8 +194,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.300    </h2\>
-    <IressStack gap\="spacing.300"\>
+      spacing.5    </h2\>
+    <IressStack gap\="spacing.5"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -240,8 +205,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.350    </h2\>
-    <IressStack gap\="spacing.350"\>
+      spacing.6    </h2\>
+    <IressStack gap\="spacing.6"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -251,8 +216,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.400    </h2\>
-    <IressStack gap\="spacing.400"\>
+      spacing.7    </h2\>
+    <IressStack gap\="spacing.7"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -262,8 +227,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.500    </h2\>
-    <IressStack gap\="spacing.500"\>
+      spacing.8    </h2\>
+    <IressStack gap\="spacing.8"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -273,63 +238,8 @@ slider.tick
   </IressText\>
   <IressText\>
     <h2\>
-      spacing.600    </h2\>
-    <IressStack gap\="spacing.600"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      spacing.700    </h2\>
-    <IressStack gap\="spacing.700"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      spacing.800    </h2\>
-    <IressStack gap\="spacing.800"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      spacing.900    </h2\>
-    <IressStack gap\="spacing.900"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      spacing.1000    </h2\>
-    <IressStack gap\="spacing.1000"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      spacing.1200    </h2\>
-    <IressStack gap\="spacing.1200"\>
+      spacing.10    </h2\>
+    <IressStack gap\="spacing.10"\>
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
       <IressPlaceholder height\="50" />
@@ -403,28 +313,6 @@ slider.tick
       <IressPlaceholder height\="50" />
     </IressStack\>
   </IressText\>
-  <IressText\>
-    <h2\>
-      field.footer    </h2\>
-    <IressStack gap\="field.footer"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      slider.tick    </h2\>
-    <IressStack gap\="slider.tick"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
 </IressStack\>
 
 ```
@@ -477,27 +365,27 @@ The `gap` prop can take an object that takes five key/value pairs that correlate
 
 Current breakpoint: **xl** breakpoint (1200px - 1499px).
 
-`gap={{"xs":"spacing.100","sm":"spacing.200","md":"spacing.400"}}`
+`gap={{"xs":"spacing.1","sm":"spacing.2","md":"spacing.4"}}`
 
-```
+Hide codedrawOpen in CodeSandbox
 
-<IressStack gap\="spacing.400"\>
+<IressStack gap\="spacing.4"\>
   <IressPanel\>
     <p\>
       Current breakpoint:{' '}
-      <kn />
+      <Ln />
       .    </p\>
     <p\>
       <code\>
-        {\`gap={{"xs":"spacing.100","sm":"spacing.200","md":"spacing.400"}}\`}
+        {\`gap={{"xs":"spacing.1","sm":"spacing.2","md":"spacing.4"}}\`}
       </code\>
     </p\>
   </IressPanel\>
   <IressStack
     gap\={{
-      md: 'spacing.400',
-      sm: 'spacing.200',
-      xs: 'spacing.100'
+      md: 'spacing.4',
+      sm: 'spacing.2',
+      xs: 'spacing.1'
     }}
   \>
     <IressPlaceholder height\="50" />
@@ -547,9 +435,9 @@ gap :
 
 {
 
-*   xs : "spacing.100"
-*   sm : "spacing.200"
-*   md : "spacing.400"
+*   xs : "spacing.1"
+*   sm : "spacing.2"
+*   md : "spacing.4"
 
 }
 
@@ -588,9 +476,9 @@ Button 1Button 2Button 3
 
 Panel 3 (block)
 
-```
+Hide codedrawOpen in CodeSandbox
 
-<IressStack gap\="spacing.400"\>
+<IressStack gap\="spacing.4"\>
   <IressPanel bg\="alt"\>
     Panel 1 (block)  </IressPanel\>
   <span\>
@@ -642,7 +530,7 @@ ResponsiveProp
 
  | \- | 
 
-"spacing.400"
+"spacing.4"
 
  |
 | horizontalAlign | 
@@ -665,11 +553,11 @@ HorizontalAligns
 *   List item 2
 *   List item 3
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack
   element\="ul"
-  gap\="spacing.700"
+  gap\="spacing.7"
 \>
   <li\>
     List item 1  </li\>
@@ -716,7 +604,7 @@ ResponsiveProp
 
  | \- | 
 
-"spacing.700"
+"spacing.7"
 
  |
 | horizontalAlign | 

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

@@ -23,7 +23,7 @@ My investments
 | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
 | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -232,7 +232,7 @@ My investments
 | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
 | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -436,14 +436,14 @@ My investments
 | CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
 | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressBadge,
   IressTable,
   IressTableFormattedValue,
   type IressTableProps,
-} from '@iress-oss/ids-components';
+} from '@/main';
 type Props \= Partial<IressTableProps<object, never\>>;
 const renderColumn \= (value: number) \=> (
   <IressBadge mode\={value \> 30000 ? 'success' : 'danger'}\>
@@ -693,11 +693,11 @@ To completely customise it, you can also send in a function that returns a React
 Available formats
 | String | Number | Date | Short date | ISO Date & Time | Relative time | Currency (AUD) | Percent | Custom |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-| Hello, world! | 123456 | 28/06/2020 | 28 Jun 2020 | 2020-06-28 00:00:00 (UTC) | 22 seconds ago | $123,456.78 | 12% | Custom |
+| Hello, world! | 123456 | 28/06/2020 | 28 Jun 2020 | 2020-06-28 00:00:00 (UTC) | 13 seconds ago | $123,456.78 | 12% | Custom |
 
-```
+Hide codedrawOpen in CodeSandbox
 
-import { IressBadge, IressTable, type IressTableProps } from '@iress-oss/ids-components';
+import { IressBadge, IressTable, type IressTableProps } from '@/main';
 type Props \= Partial<IressTableProps<object, never\>>;
 const renderColumn \= (value: string) \=> (
   <IressBadge mode\="info"\>{value}</IressBadge\>
@@ -898,14 +898,14 @@ My investments
 | CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
 | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressBadge,
   IressTable,
   IressTableFormattedValue,
   type IressTableProps,
-} from '@iress-oss/ids-components';
+} from '@/main';
 type Props \= Partial<IressTableProps<object, never\>>;
 const renderColumn \= (value: number) \=> (
   <IressBadge mode\={value \> 30000 ? 'success' : 'danger'}\>
@@ -1117,14 +1117,14 @@ My investments
 | CASH.CASH | 28/06/2020 | 49% | $49,751.40 (net: $20,000.00) |
 | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 (net: N/A) |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressTable,
   IressTableFormattedValue,
   type IressTableProps,
   type TableColumn,
-} from '@iress-oss/ids-components';
+} from '@/main';
 type Props \= Partial<IressTableProps<Row, never\>>;
 interface Row {
   investment\_name: string;
@@ -1355,7 +1355,7 @@ My investments
 | CASH.CASH | 49751.4 | 2020-06-28 | 49% |
 | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2% |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -1611,7 +1611,7 @@ My investments
 | CASH.CASH | $49,751.40 | 28/06/2020 | 49% |
 | VODAFONE GRP | $26,382.46 | 05/02/2019 | 26.2% |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -1870,7 +1870,7 @@ My investments
 | CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
 | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -2124,7 +2124,7 @@ My investments
 | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
 | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -2327,7 +2327,7 @@ My investments
 | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
 | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -2525,7 +2525,7 @@ For very simple tabular data, you have the option to hide the table header with
 
 <table class="table__table table__table--compact_false table__table--hover_false table__table--sortButtonNoWrap_false table__table--tableBodyOpen_false table__table--alternate_false table__table--removeRowBorders_false ids-table" id="_r_v_"><caption id="_r_v_--caption" class="table__caption table__caption--compact_false table__caption--hover_false table__caption--sortButtonNoWrap_false table__caption--tableBodyOpen_false table__caption--alternate_false table__caption--removeRowBorders_false">My investments</caption><tbody><tr id="_r_v_--rows--0" class=""><th data-column="investment_name" id="_r_v___0_investment_name" scope="row">Artemis Fund Managers Limited</th><td data-column="cost" headers="_r_v___0_investment_name" id="_r_v___0_cost">23898</td><td data-column="investmentDate" headers="_r_v___0_investment_name" id="_r_v___0_investmentDate">2019-09-23</td><td data-column="totalPercentage" headers="_r_v___0_investment_name" id="_r_v___0_totalPercentage">24.8</td></tr><tr id="_r_v_--rows--1" class=""><th data-column="investment_name" id="_r_v___1_investment_name" scope="row">CASH.CASH</th><td data-column="cost" headers="_r_v___1_investment_name" id="_r_v___1_cost">49751.4</td><td data-column="investmentDate" headers="_r_v___1_investment_name" id="_r_v___1_investmentDate">2020-06-28</td><td data-column="totalPercentage" headers="_r_v___1_investment_name" id="_r_v___1_totalPercentage">49</td></tr><tr id="_r_v_--rows--2" class=""><th data-column="investment_name" id="_r_v___2_investment_name" scope="row">VODAFONE GRP</th><td data-column="cost" headers="_r_v___2_investment_name" id="_r_v___2_cost">26382.456</td><td data-column="investmentDate" headers="_r_v___2_investment_name" id="_r_v___2_investmentDate">2019-02-05</td><td data-column="totalPercentage" headers="_r_v___2_investment_name" id="_r_v___2_totalPercentage">26.2</td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -2730,7 +2730,7 @@ My rich investments
 | CASH.CASH | $49,751.40 | 2020/06/28 | 49% |
 | VODAFONE GRP | $26,382.46 | 2019/02/05 | 26.2% |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My rich investments"
@@ -2931,7 +2931,7 @@ This is reliant on `columns` prop to provide the information for the table heade
 | --- | --- | --- | --- |
 | This table has no data |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   columns\={\[
@@ -3158,7 +3158,7 @@ My investments
 | CASH.CASH | $49,751.40 | 2020/06/28 | 49% |
 | VODAFONE GRP | $26,382.46 | 2019/02/05 | 26.2% |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable caption\="My investments"\>
   <thead\>
@@ -3357,7 +3357,7 @@ My investments
 | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
 | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -3564,7 +3564,7 @@ My investments
 | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
 | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressTable
   caption\="My investments"
@@ -3763,8 +3763,15 @@ In some cases you may have a table with multiple groups of rows inside it, howev
 
 <table class="table__table table__table--compact_false table__table--hover_false table__table--sortButtonNoWrap_false table__table--tableBodyOpen_false table__table--alternate_false table__table--removeRowBorders_false ids-table" id="_r_18_"><caption id="_r_18_--caption" class="table__caption table__caption--compact_false table__caption--hover_false table__caption--sortButtonNoWrap_false table__caption--tableBodyOpen_false table__caption--alternate_false table__caption--removeRowBorders_false">My liabilities</caption><tbody aria-labelledby="_r_19_--caption" class=""><tr><th aria-expanded="true" colspan="8" class="table__rowGroupHeader table__rowGroupHeader--compact_false table__rowGroupHeader--hover_false table__rowGroupHeader--sortButtonNoWrap_false table__rowGroupHeader--tableBodyOpen_true" id="_r_19_--caption" scope="rowgroup" aria-controls="_r_19_--header--0 _r_19_--rows--0 _r_19_--children"><button class="table__activator table__activator--compact_false table__activator--hover_false table__activator--sortButtonNoWrap_false table__activator--tableBodyOpen_true" type="button">Current liabilities</button></th></tr><tr id="_r_19_--header--0"><th id="_r_19___owner" headers="_r_19_--caption" class="ta_start" style="width: 75px; min-width: 75px;">Owner</th><th id="_r_19___type" headers="_r_19_--caption" class="ta_start" style="width: 100px; min-width: 100px;">Type</th><th id="_r_19___provider" headers="_r_19_--caption" class="ta_start">Provider</th><th id="_r_19___status" headers="_r_19_--caption" class="ta_start bd-e_table">Status</th><th id="_r_19___frequency" headers="_r_19_--caption" class="ta_start">Frequency</th><th id="_r_19___outstanding" headers="_r_19_--caption" aria-sort="none" class="ta_start [&amp;&amp;]:ta_end"><button type="button" class="table__sortHeader table__sortHeader--compact_false table__sortHeader--hover_false table__sortHeader--sortButtonNoWrap_true table__sortHeader--tableBodyOpen_false">Outstanding (GBP)<span role="img" class="ids-icon fal fa-sort table__sortIcon table__sortIcon--compact_false table__sortIcon--hover_false table__sortIcon--sortButtonNoWrap_true table__sortIcon--tableBodyOpen_false" aria-hidden="false" aria-label="sortable"></span></button></th><th id="_r_19___interestRate" headers="_r_19_--caption" aria-sort="none" class="ta_right"><button type="button" class="table__sortHeader table__sortHeader--compact_false table__sortHeader--hover_false table__sortHeader--sortButtonNoWrap_true table__sortHeader--tableBodyOpen_false">Interest rate p.a.<span role="img" class="ids-icon fal fa-sort table__sortIcon table__sortIcon--compact_false table__sortIcon--hover_false table__sortIcon--sortButtonNoWrap_true table__sortIcon--tableBodyOpen_false" aria-hidden="false" aria-label="sortable"></span></button></th><th id="_r_19___repayment" headers="_r_19_--caption" aria-sort="none" class="ta_start [&amp;&amp;]:ta_end"><button type="button" class="table__sortHeader table__sortHeader--compact_false table__sortHeader--hover_false table__sortHeader--sortButtonNoWrap_true table__sortHeader--tableBodyOpen_false">Repayment (GBP)<span role="img" class="ids-icon fal fa-sort table__sortIcon table__sortIcon--compact_false table__sortIcon--hover_false table__sortIcon--sortButtonNoWrap_true table__sortIcon--tableBodyOpen_false" aria-hidden="false" aria-label="sortable"></span></button></th></tr><tr id="_r_19_--rows--0" class=""><td data-column="owner" headers="_r_19___owner _r_19_--caption" id="_r_19___0_owner" class="ta_start" style="width: 75px; min-width: 75px;">Client</td><td data-column="type" headers="_r_19___type _r_19_--caption" id="_r_19___0_type" class="ta_start" style="width: 100px; min-width: 100px;">Credit card</td><td data-column="provider" headers="_r_19___provider _r_19_--caption" id="_r_19___0_provider" class="ta_start"></td><td data-column="status" headers="_r_19___status _r_19_--caption" id="_r_19___0_status" class="ta_start bd-e_table">Current</td><td data-column="frequency" headers="_r_19___frequency _r_19_--caption" id="_r_19___0_frequency" class="ta_start">Monthly</td><td data-column="outstanding" headers="_r_19___outstanding _r_19_--caption" id="_r_19___0_outstanding" class="ta_start [&amp;&amp;]:ta_end">$5,000.00</td><td data-column="interestRate" headers="_r_19___interestRate _r_19_--caption" id="_r_19___0_interestRate" class="ta_right">0%</td><td data-column="repayment" headers="_r_19___repayment _r_19_--caption" id="_r_19___0_repayment" class="ta_start [&amp;&amp;]:ta_end">$300.00</td></tr><tr id="_r_19_--children"><td colspan="8"><button type="button" class="iress-form-element iress-form-element__inner button__root button__root--inButtonGroup_false button__root--mode_secondary button__root--loading_false button__root--noWrap_false ids-button"><span class="button__prepend button__prepend--inButtonGroup_false button__prepend--mode_secondary button__prepend--loading_false button__prepend--noWrap_false"><span role="img" class="ids-icon fal fa-plus-circle" aria-hidden="true"></span></span>Add current liability</button></td></tr></tbody><tbody aria-labelledby="_r_1b_--caption" class=""><tr><th aria-expanded="false" colspan="8" class="table__rowGroupHeader table__rowGroupHeader--compact_false table__rowGroupHeader--hover_false table__rowGroupHeader--sortButtonNoWrap_false table__rowGroupHeader--tableBodyOpen_false" id="_r_1b_--caption" scope="rowgroup"><button class="table__activator table__activator--compact_false table__activator--hover_false table__activator--sortButtonNoWrap_false table__activator--tableBodyOpen_false" type="button">Long term liabilities</button></th></tr></tbody><tbody aria-labelledby="_r_1c_--caption" class=""><tr><th aria-expanded="false" colspan="8" class="table__rowGroupHeader table__rowGroupHeader--compact_false table__rowGroupHeader--hover_false table__rowGroupHeader--sortButtonNoWrap_false table__rowGroupHeader--tableBodyOpen_false" id="_r_1c_--caption" scope="rowgroup"><button class="table__activator table__activator--compact_false table__activator--hover_false table__activator--sortButtonNoWrap_false table__activator--tableBodyOpen_false" type="button">Contingent liabilities</button></th></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressIcon,
+  IressTable,
+  IressTableBody,
+  type TableColumn,
+} from '@/main';
 interface Liability {
   owner: string;
   type: string;
@@ -3983,7 +3990,7 @@ IressTableFormattedValue
 | currency | $10,000.00 |
 | percent | 50% |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   args: {