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

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

@@ -1,11 +1,13 @@
-[](#row)Row
-===========
+Row
+===
 
 Overview
 --------
 
 Used in conjunction with the `IressCol` component to lay out page content.
 
+[](./iframe.html?id=components-row--default)
+
 Child 1  
 Slightly taller
 
@@ -13,9 +15,7 @@ Child 2
 
 Child 3
 
-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
 
 <IressRow
   gutter\="lg"
@@ -52,19 +52,91 @@ Hide code
   </IressPlaceholder\>
 </IressRow\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactReactNode
+
+
+
+ | \- | childrenChoose option...nonetwoBasicPlaceholdersthreeDifferentSizedPlaceholders |
+| gutter | 
+
+The amount of space between columns. If a single value is provided, this will be applied to all viewport sizes. If multiple values are provided, the first will apply to the small viewport upwards, the second to the medium viewport upwards, the third (if set) to the large viewport upwards, and the fourth (if set) to the extra large viewport.
+
+union
+
+
+
+ | \- | 
+
+"lg"
+
+ |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+union
+
+
+
+ | 
+
+'left'
+
+ | 
 
-[](#usage)Usage
----------------
+"left"
+
+ |
+| useColGap | 
+
+Remove negative gutter and uses column gap. This is useful for cases where you are not using `IressCol`.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+union
+
+
+
+ | 
+
+'top'
+
+ | 
+
+"top"
+
+ |
+
+Usage
+-----
 
 `IressRow` supports visual hierarchy by allowing you to add multiple columns in your layout, allowing the user to see more content on the screen at the same time.
 
 It works best alongside the `IressContainer` and `IressCol` components. In version 5, the `useColGap` prop was introduced, allowing you to opt-in to using the column gap property in cases where you are not using the `IressCol` component.
 
-### [](#gutter)Gutter
+### Gutter
 
 The spacing between columns is controlled by the `gutter` prop.
 
+[](./iframe.html?id=components-row--gutter)
+
 1 of 4  
 Slightly taller
 
@@ -144,9 +216,7 @@ Slightly taller
 
 4 of 4
 
-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 className\="iress-u-stack iress--gutter--md"\>
   <IressRow\>
@@ -386,12 +456,71 @@ Hide code
   </React.Fragment\>
 </IressContainer\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactReactNode
+
 
-### [](#responsive-gutter)Responsive gutter
+
+ | \- | \- |
+| gutter | 
+
+The amount of space between columns. If a single value is provided, this will be applied to all viewport sizes. If multiple values are provided, the first will apply to the small viewport upwards, the second to the medium viewport upwards, the third (if set) to the large viewport upwards, and the fourth (if set) to the extra large viewport.
+
+union
+
+
+
+ | \- | \- |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+union
+
+
+
+ | 
+
+'left'
+
+ | Set object |
+| useColGap | 
+
+Remove negative gutter and uses column gap. This is useful for cases where you are not using `IressCol`.
+
+boolean
+
+
+
+ | \- | \- |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+union
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+
+### Responsive gutter
 
 The `gutter` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
 
+[](./iframe.html?id=components-row--responsive-gutter)
+
 Current breakpoint: **xl** breakpoint (1200px - 1499px)
 
 1 of 4  
@@ -403,14 +532,12 @@ Slightly taller
 
 4 of 4
 
-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 className\="iress-u-stack iress--gutter--md"\>
   <IressPanel background\="alt"\>
     Current breakpoint:{' '}
-    <CurrentBreakpoint />
+    <Ln />
   </IressPanel\>
   <IressRow
     gutter\={{
@@ -458,14 +585,96 @@ Hide code
   </IressRow\>
 </IressContainer\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| gutter | 
+
+The amount of space between columns. If a single value is provided, this will be applied to all viewport sizes. If multiple values are provided, the first will apply to the small viewport upwards, the second to the medium viewport upwards, the third (if set) to the large viewport upwards, and the fourth (if set) to the extra large viewport.
+
+union
+
+
+
+ | \- | 
+
+Edit JSON
+
+gutter :
+
+{
+
+*   xs : "xs"
+*   sm : "sm"
+*   md : "md"
+*   lg : "lg"
+*   xl : "xl"
+*   xxl : "xs"
+
+}
 
-### [](#alignment)Alignment
 
-### [](#horizontal-alignment)Horizontal alignment
+
+
+
+
+
+ |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+union
+
+
+
+ | 
+
+'left'
+
+ | Set object |
+| useColGap | 
+
+Remove negative gutter and uses column gap. This is useful for cases where you are not using `IressCol`.
+
+boolean
+
+
+
+ | \- | \- |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+union
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+
+### Alignment
+
+### Horizontal alignment
 
 `IressRow` can be set to align horizontally using the `horizontalAlign` prop.
 
+[](./iframe.html?id=components-row--horizontal-alignment)
+
 Horizontal align: around
 ------------------------
 
@@ -530,9 +739,7 @@ Horizontal align: right
 
 3 of 3
 
-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 className\="iress-u-stack iress--gutter--md"\>
   <React.Fragment key\=".0"\>
@@ -698,12 +905,71 @@ Hide code
   </React.Fragment\>
 </IressContainer\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| gutter | 
+
+The amount of space between columns. If a single value is provided, this will be applied to all viewport sizes. If multiple values are provided, the first will apply to the small viewport upwards, the second to the medium viewport upwards, the third (if set) to the large viewport upwards, and the fourth (if set) to the extra large viewport.
+
+union
+
+
+
+ | \- | Set object |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+union
+
+
+
+ | 
 
-### [](#vertical-alignment)Vertical alignment
+'left'
+
+ | \- |
+| useColGap | 
+
+Remove negative gutter and uses column gap. This is useful for cases where you are not using `IressCol`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+union
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+
+### Vertical alignment
 
 `IressRow` can be set to align vertically using the `verticalAlign` prop.
 
+[](./iframe.html?id=components-row--vertical-alignment)
+
 Vertical align: top
 -------------------
 
@@ -740,16 +1006,14 @@ Vertical align: stretch
 
 3 of 3
 
-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 className\="iress-u-stack iress--gutter--lg"\>
   <div\>
     <IressText element\="h2"\>
       Vertical align: top    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5203"
       verticalAlign\="top"
     \>
       <React.Fragment key\=".0"\>
@@ -778,7 +1042,7 @@ Hide code
     <IressText element\="h2"\>
       Vertical align: middle    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5203"
       verticalAlign\="middle"
     \>
       <React.Fragment key\=".0"\>
@@ -807,7 +1071,7 @@ Hide code
     <IressText element\="h2"\>
       Vertical align: bottom    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5203"
       verticalAlign\="bottom"
     \>
       <React.Fragment key\=".0"\>
@@ -836,7 +1100,7 @@ Hide code
     <IressText element\="h2"\>
       Vertical align: stretch    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5203"
       verticalAlign\="stretch"
     \>
       <React.Fragment key\=".0"\>
@@ -863,15 +1127,61 @@ Hide code
   </div\>
 </IressContainer\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactReactNode
+
+
+
+ | \- | \- |
+| gutter | 
+
+The amount of space between columns. If a single value is provided, this will be applied to all viewport sizes. If multiple values are provided, the first will apply to the small viewport upwards, the second to the medium viewport upwards, the third (if set) to the large viewport upwards, and the fourth (if set) to the extra large viewport.
+
+union
+
+
+
+ | \- | Set object |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+union
+
+
+
+ | 
+
+'left'
+
+ | Set object |
+| useColGap | 
+
+Remove negative gutter and uses column gap. This is useful for cases where you are not using `IressCol`.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+union
+
+
+
+ | 
 
-On this page
+'top'
 
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Gutter](#gutter)
-    *   [Responsive gutter](#responsive-gutter)
-    *   [Alignment](#alignment)
-    *   [Horizontal alignment](#horizontal-alignment)
-    *   [Vertical alignment](#vertical-alignment)
+ | \- |