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

package/generated/docs/{components-container-docs.md → components_components-container-docs.md}

@@ -1,11 +1,13 @@
-[](#container)Container
-=======================
+Container
+=========
 
 Overview
 --------
 
 `IressContainer` provides a means to center and horizontally pad your site’s contents.
 
+[](./iframe.html?id=components-container--container)
+
 IressContainer improves the scannability and visual hierarchy of a user interface by snapping the layout to fixed max widths at different breakpoints.
 
 Try resizing the screen to see the difference.
@@ -13,11 +15,9 @@ Try resizing the screen to see the difference.
 Your screen size is showing the container for the **xl** breakpoint.
 
 *   Screen width range: 1200px - 1499px
-*   Max width: 1160px
-
-Hide code
+*   Max width: 1280px
 
-\[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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressContainer\>
   <p\>
@@ -25,14 +25,37 @@ Hide code
   <p\>
     Try resizing the screen to see the difference.  </p\>
   <IressPanel\>
-    <CurrentBreakpoint renderLabel\="container" />
+    <Ln renderLabel\="container" />
   </IressPanel\>
 </IressContainer\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressRow` and `IressCol`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| fluid | 
+
+Container stretches to fill the width of the browser window if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
 
-[](#behaviour)Behaviour
------------------------
+Behaviour
+---------
 
 The `IressContainer` snaps to fixed max widths at different breakpoints. Those max widths are as follows:
 
@@ -46,13 +69,15 @@ Container breakpoints
 | xl | 1200px - 1499px | 1160px |
 | xxl | 1500px and above | 1160px |
 
-[](#examples)Examples
----------------------
+Examples
+--------
 
-### [](#fluid)Fluid
+### Fluid
 
 If you want the `IressContainer` to fill its containing element, you can set the `fluid` prop. Resize the example below to see how the IressContainer is 100% for all screen sizes.
 
+[](./iframe.html?id=components-container--fluid)
+
 IressContainer improves the scannability and visual hierarchy of a user interface by snapping the layout to fixed max widths at different breakpoints.
 
 When the `fluid` prop is enabled, the container will span the full width of its containing element. Try resizing the screen to see how the IressContainer is 100% for all screen sizes.
@@ -62,9 +87,7 @@ Your screen size is showing the container for the **xl** breakpoint.
 *   Screen width range: 1200px - 1499px
 *   Max width: 100%
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressContainer fluid\>
   <p\>
@@ -76,16 +99,30 @@ Hide code
     {' '}prop is enabled, the container will span the full width of its containing element. Try resizing the screen to see how the IressContainer is 100% for all screen sizes.
   </p\>
   <IressPanel\>
-    <CurrentBreakpoint renderLabel\="container-fluid" />
+    <Ln renderLabel\="container-fluid" />
   </IressPanel\>
 </IressContainer\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressRow` and `IressCol`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| fluid | 
+
+Container stretches to fill the width of the browser window if true.
+
+boolean
+
 
-On this page
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Fluid](#fluid)
+ | \- | FalseTrue |

package/generated/docs/{components-divider-docs.md → components_components-divider-docs.md}

@@ -1,37 +1,60 @@
-[](#divider)Divider
-===================
+Divider
+=======
 
 Overview
 --------
 
 A divider is a UI element that separates content in lists and layouts.
 
-* * *
+[](./iframe.html?id=components-divider--horizontal)
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressDivider />
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| gutter | 
+Sets gutter of the divider.
+
+GutterSizes
+
+
+
+ | \- | Set object |
+| vertical | 
+
+Change to a vertical divider.
+
+boolean
 
-[](#examples)Examples
----------------------
 
-### [](#vertical-divider)Vertical divider
+
+ | \- | Set boolean |
+
+Examples
+--------
+
+### Vertical divider
 
 Use the `vertical` prop to change the divider from horizontal to vertical.
 
+[](./iframe.html?id=components-divider--vertical)
+
 Separate
 
 * * *
 
 this
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressInline
   gutter\="md"
@@ -44,12 +67,36 @@ Hide code
     this  </IressText\>
 </IressInline\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| gutter | 
+Sets gutter of the divider.
+
+GutterSizes
 
-### [](#gutter)Gutter
+
+
+ | \- | Set object |
+| vertical | 
+
+Change to a vertical divider.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+### Gutter
 
 You can customise the gutter by using the `gutter` prop. By default, the divider uses the theme's default spacing as the gutter.
 
+[](./iframe.html?id=components-divider--gutter)
+
 none
 ----
 
@@ -104,9 +151,7 @@ Separate
 
 this
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressInline gutter\="md"\>
   <IressPanel\>
@@ -165,12 +210,26 @@ Hide code
   </IressPanel\>
 </IressInline\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| gutter | 
+Sets gutter of the divider.
+
+GutterSizes
+
+
+
+ | \- | \- |
+| vertical | 
+
+Change to a vertical divider.
+
+boolean
+
 
-On this page
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Vertical divider](#vertical-divider)
-    *   [Gutter](#gutter)
+ | \- | Set boolean |

package/generated/docs/{components-expander-docs.md → components_components-expander-docs.md}

@@ -1,37 +1,103 @@
-[](#expander)Expander
-=====================
+Expander
+========
 
 Overview
 --------
 
 Expanders are commonly used to reveal more information or details about an element or content on a page.
 
+[](./iframe.html?id=components-expander--default)
+
 Expander activator
 
 Expander content will go here (it is unformatted by default, use IressText to format the text)
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressExpander activator\="Expander activator"\>
   Expander content will go here (it is unformatted by default, use IressText to format the text)
 </IressExpander\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander activator"
+
+ |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander content will go here (it is unformatted by default, use IressText to format the text)"
+
+ |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | Set object |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: ExpanderActivatorClickEventDetail) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
+
+
+ | 
+
+false
 
-[](#accessibility)Accessibility
--------------------------------
+ | Set boolean |
+
+Accessibility
+-------------
 
 For Accessibility guidelines refer to [W3 ARIA Patterns Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/), [W3 ARIA Patterns Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
 
-[](#examples)Examples
----------------------
+Examples
+--------
 
-### [](#mode)Mode
+### Mode
 
 Expander has a `mode` prop which can be used to change how the expander is displayed. There are 3 modes `section` (default), `heading` and `link`.
 
+[](./iframe.html?id=components-expander--mode)
+
 section mode
 ------------
 
@@ -53,9 +119,7 @@ link mode
 
 Okay, so 9:00 you are strolling through the parking lot, you see us struggling in the car, you walk up, you open the door and you say, your line, George.
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
 <div className\="iress-u-stack iress--gutter--md"\>
   <div\>
@@ -135,19 +199,74 @@ Hide code
   </div\>
 </div\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | \- |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | \- |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | \- |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: ExpanderActivatorClickEventDetail) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
 
-### [](#open)Open
+### Open
 
 The `open` prop can be used to control the open state of the expander as can be seen below.
 
+[](./iframe.html?id=components-expander--open)
+
 Expander activator
 
 Expander content will go here (it is unformatted by default, use IressText to format the text)
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressExpander
   activator\="Expander activator"
@@ -157,12 +276,81 @@ Hide code
   Expander content will go here (it is unformatted by default, use IressText to format the text)
 </IressExpander\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander activator"
+
+ |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Expander content will go here (it is unformatted by default, use IressText to format the text)"
+
+ |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | 
+
+"heading"
+
+ |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: ExpanderActivatorClickEventDetail) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
 
-### [](#multiple-expanders-accordion)Multiple expanders (accordion)
+
+ | 
+
+false
+
+ | FalseTrue |
+
+### Multiple expanders (accordion)
 
 You can use multiple expanders to create an accordion, where al expander closes when another is opened.
 
+[](./iframe.html?id=components-expander--multiple)
+
 top
 
 Top
@@ -173,10 +361,10 @@ bottom
 Bottom
 ------
 
-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; }
+Hide codedrawOpen in CodeSandbox
 
+import { IressExpander } from '@/main';
+import { useState } from 'react';
 export const MultipleExpander \= () \=> {
   const \[openActivator, setOpenActivator\] \= useState('');
   const handleChange \= (newOpenActivator: string, open?: boolean) \=> {
@@ -202,14 +390,59 @@ export const MultipleExpander \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| activator\* | 
+The element used to activate the expandable container.
+
+ReactNode
+
+
+
+ | \- | \- |
+| children | 
+
+Contents that will be expanded/collapsed when the expander is activated.
+
+ReactNode
+
+
+
+ | \- | \- |
+| mode | 
+
+Controls the display mode of the activator element. Can be Section, Heading or Link.
+
+union
+
+
+
+ | 
+
+'section'
+
+ | \- |
+| onChange | 
+
+Emitted when the open state changes.
+
+(newValue: ExpanderActivatorClickEventDetail) => void
+
+ | \- | \- |
+| open | 
+
+When true the expandable container will be visible and the activator will display as open.
+
+boolean
+
+
+
+ | 
 
-On this page
+false
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Accessibility](#accessibility)
-*   [Examples](#examples)
-    *   [Mode](#mode)
-    *   [Open](#open)
-    *   [Multiple expanders (accordion)](#multiple-expanders-accordion)
+ | \- |