@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/guidelines.md

@@ -0,0 +1,3083 @@
+# Design Guidelines
+
+This document contains all design foundations and guidelines for the design system.
+
+## React components / Introduction
+
+Introduction
+============
+
+The IDS and product design team use the foundations to create a consistent user experience across all Iress products. This includes design principles and guidelines that ensure a cohesive look and feel.
+
+1.  [Principles](/?path=/docs/foundations-principles--docs)
+2.  [Accessibility](/?path=/docs/foundations-accessibility--docs)
+3.  [Tokens](/?path=/docs/foundations-tokens-introduction--docs)
+4.  [Breakpoints](/?path=/docs/foundations-breakpoints--docs)
+5.  [Consistency](/?path=/docs/foundations-consistency--docs)
+6.  [Grid](/?path=/docs/foundations-grid--docs)
+7.  [Content](/?path=/docs/foundations-content--docs)
+8.  [User Experience](/?path=/docs/foundations-user-experience--docs)
+9.  [Visual Design](/?path=/docs/foundations-visual-design--docs)
+10.  [Z-index (stacking)](/?path=/docs/foundations-z-index-stacking--docs)
+
+_This document is a living standard. Revisit and revise regularly to reflect evolving needs, technologies, and user expectations._
+
+## React components / Principles
+
+Core Design Principles
+======================
+
+Consistency
+-----------
+
+*   Maintain brand consistency across all applications and experiences
+*   Use standardised component naming conventions (all components start with `Iress` prefix)
+*   Leverage shared design tokens for spacing, colours, typography, and interactive states
+*   Ensure consistent behaviour patterns across similar components
+
+Accessibility First
+-------------------
+
+*   Meet or exceed WCAG 2.1 Level AA Accessibility Guidelines
+*   Provide proper colour contrast ratios (minimum 4.5:1 for AA, 7:1 for AAA)
+*   Implement comprehensive keyboard navigation support
+*   Include screen reader compatibility with appropriate ARIA attributes
+*   Support focus management and skip navigation patterns
+*   Document accessibility considerations and requirements
+
+Clarity and Usability
+---------------------
+
+*   Prioritise clear visual hierarchy through typography scales and spacing systems
+*   Use progressive disclosure to manage complexity
+*   Provide immediate feedback for user actions (loading states, validation, etc.)
+*   Design for touch-friendly interfaces with adequate target sizes
+
+Developer Experience
+--------------------
+
+*   Maintain clean component APIs with predictable prop patterns
+*   Provide comprehensive documentation with usage examples
+*   Include common patterns and anti-patterns
+*   Support both controlled and uncontrolled component patterns
+*   Enable efficient testing strategies with semantic roles and accessible queries
+*   Maintain up-to-date prop documentation and type definitions
+
+Quality assurance
+-----------------
+
+*   Test components across supported browsers and devices
+*   Validate accessibility compliance with automated and manual testing
+*   Ensure proper keyboard navigation functionality
+*   Test with assistive technologies (screen readers, voice control)
+
+### Code Standards
+
+*   Follow consistent naming conventions for CSS classes and component props
+*   Use semantic HTML elements where appropriate
+*   Implement proper TypeScript typing for better developer experience
+*   Maintain clean separation between presentation and logic
+
+### Performance Considerations
+
+*   Optimise component rendering and re-rendering
+*   Implement appropriate code splitting strategies
+*   Use efficient animation and transition patterns
+*   Consider bundle size impact of component dependencies
+
+## React components / Accessibility
+
+Accessibility
+=============
+
+Accessibility is everyone's responsibility. It ensures that all users, regardless of their abilities or disabilities, can access and interact with our components effectively. This document outlines the key practices for building accessible components we follow within IDS.
+
+Please note: The default behaviour of our components is to be accessible, but it is the responsibility of the product to ensure that they are used correctly in accessibile context, or any modifications made to them do not compromise accessibility.
+
+Interaction Patterns
+--------------------
+
+### Keyboard Navigation
+
+*   Support standard keyboard shortcuts (Tab, Arrow keys, Enter, Space, Escape)
+*   Implement proper focus order and visual focus indicators
+*   Provide keyboard alternatives for mouse-only interactions
+*   Follow established ARIA patterns for complex widgets
+
+### Touch Interactions
+
+*   Provide adequate touch target sizes (minimum 44px)
+*   Implement touch-friendly spacing between interactive elements
+*   Support gesture-based interactions where appropriate
+*   Ensure consistent behaviour across device types
+
+### Loading and Feedback
+
+*   Use appropriate loading patterns based on context:
+    *   **Page**: Full page loading states
+    *   **Component**: Local loading within sections
+    *   **Button**: Inline loading for form submissions
+    *   **Validate**: Server-side validation feedback
+*   Provide clear success and error feedback
+*   Use progressive enhancement for better perceived performance
+
+## React components / Responsive layout
+
+Responsive layout
+=================
+
+The Iress Design System (IDS) is built with responsive design principles in mind. This means that our components are designed to adapt to different screen sizes and orientations, ensuring a consistent user experience across devices.
+
+Breakpoints
+-----------
+
+*   Implement mobile-first responsive design
+*   Use consistent breakpoint values across all components
+*   Provide appropriate component variants for different screen sizes
+*   Consider content priority and progressive disclosure on smaller screens
+
+[](./iframe.html?id=foundations-responsive-layout--breakpoints)
+
+### Breakpoints supported by IDS
+
+| Size | Screen Width | Media Query | Active Viewport | Example Viewport |
+| --- | --- | --- | --- | --- |
+| xs | 0 - 575px | (min-width: 0) and (max-width: 575px) | 100% | 360px width |
+| sm | 576px - 767px | (min-width: 576px) and (max-width: 767px) | 100% | 767px width |
+| md | 768px - 1023px | (min-width: 768px) and (max-width: 1023px) | 100% | 962px width |
+| lg | 1024px - 1199px | (min-width: 1024px) and (max-width: 1199px) | 100% | 1180px width |
+| xl | 1200px - 1499px | (min-width: 1200px) and (max-width: 1499px) | 1280px | 1366px width |
+| xxl | 1500px and above | (min-width: 1500px) | 1280px | 1920px width |
+
+```
+
+<IressTable
+  caption\={<IressText element\="h3" textAlign\="left"\>Breakpoints supported by IDS</IressText\>}
+  rows\={\[
+    {
+      activeViewport: '100%',
+      exampleViewport: '360px width',
+      mediaQuery: '(min-width: 0) and (max-width: 575px)',
+      screenWidth: '0 - 575px',
+      size: 'xs'
+    },
+    {
+      activeViewport: '100%',
+      exampleViewport: '767px width',
+      mediaQuery: '(min-width: 576px) and (max-width: 767px)',
+      screenWidth: '576px - 767px',
+      size: 'sm'
+    },
+    {
+      activeViewport: '100%',
+      exampleViewport: '962px width',
+      mediaQuery: '(min-width: 768px) and (max-width: 1023px)',
+      screenWidth: '768px - 1023px',
+      size: 'md'
+    },
+    {
+      activeViewport: '100%',
+      exampleViewport: '1180px width',
+      mediaQuery: '(min-width: 1024px) and (max-width: 1199px)',
+      screenWidth: '1024px - 1199px',
+      size: 'lg'
+    },
+    {
+      activeViewport: '1280px',
+      exampleViewport: '1366px width',
+      mediaQuery: '(min-width: 1200px) and (max-width: 1499px)',
+      screenWidth: '1200px - 1499px',
+      size: 'xl'
+    },
+    {
+      activeViewport: '1280px',
+      exampleViewport: '1920px width',
+      mediaQuery: '(min-width: 1500px)',
+      screenWidth: '1500px and above',
+      size: 'xxl'
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | 
+
+RAW
+
+caption :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => { \_s(); const Component = useMemo( () => styled(restProps.element ?? "div", text), \[restProps.element\] ); return /\* @\_\_PURE\_\_ \*/ jsxDEV( Component, { ...restProps, className: cx(className, GlobalCSSClass.Text) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 46, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 5 keys
+        
+    *   1 :
+        
+        {...} 5 keys
+        
+    *   2 :
+        
+        {...} 5 keys
+        
+    *   3 :
+        
+        {...} 5 keys
+        
+    *   4 :
+        
+        {...} 5 keys
+        
+    *   5 :
+        
+        {...} 5 keys
+        
+    
+    \]
+    
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Extra-small screens (`xs`)
+
+[](./iframe.html?id=foundations-responsive-layout--xs)
+
+**0 - 575px**  
+The mobile breakpoint is used for small mobile devices.
+
+**Min screen width**
+
+0px
+
+**Max screen width**
+
+575px
+
+**Example viewport**
+
+100%
+
+**Margin**
+
+16px
+
+* * *
+
+Grid example
+------------
+
+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.
+
+You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
+
+```
+
+<IressStack gap\="lg"\>
+  <IressInline
+    gap\="md"
+    verticalAlign\="bottom"
+  \>
+    <IressStack
+      gap\="xs"
+      maxWidth\="input.16"
+    \>
+      <React.Suspense\>
+        <React.Lazy />
+      </React.Suspense\>
+      <IressText\>
+        <strong\>
+          0 - 575px        </strong\>
+        <br />
+        The mobile breakpoint is used for small mobile devices.      </IressText\>
+    </IressStack\>
+    <IressStack gap\="xs"\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Min screen width        </IressText\>
+        <IressText\>
+          0px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Max screen width        </IressText\>
+        <IressText\>
+          575px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Example viewport        </IressText\>
+        <IressText\>
+          100%        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Margin        </IressText\>
+        <IressText\>
+          16px        </IressText\>
+      </IressInline\>
+    </IressStack\>
+  </IressInline\>
+  <IressDivider />
+  <IressText\>
+    <h2\>
+      Grid example    </h2\>
+    <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" />
+    </IressPanel\>
+  </IressText\>
+  <IressContainer
+    style\={{
+      maxWidth: '360px'
+    }}
+  \>
+    <IressRow gutter\="md"\>
+      <IressCol span\={12}\>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol span\={6}\>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol span\={6}\>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol span\={3}\>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol span\={3}\>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol span\={3}\>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol span\={3}\>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+    </IressRow\>
+  </IressContainer\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | 
+
+"0 - 575px"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Small screens (`sm`)
+
+[](./iframe.html?id=foundations-responsive-layout--sm)
+
+**576px - 767px**  
+Small breakpoint, for larger mobile devices and tablet portrait.
+
+**Min screen width**
+
+576px
+
+**Max screen width**
+
+767px
+
+**Example viewport**
+
+100%
+
+**Margin**
+
+16px
+
+* * *
+
+Grid example
+------------
+
+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.
+
+You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
+
+```
+
+<IressStack gap\="lg"\>
+  <IressInline
+    gap\="md"
+    verticalAlign\="bottom"
+  \>
+    <IressStack
+      gap\="xs"
+      maxWidth\="input.16"
+    \>
+      <React.Suspense\>
+        <React.Lazy />
+      </React.Suspense\>
+      <IressText\>
+        <strong\>
+          576px - 767px        </strong\>
+        <br />
+        Small breakpoint, for larger mobile devices and tablet portrait.      </IressText\>
+    </IressStack\>
+    <IressStack gap\="xs"\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Min screen width        </IressText\>
+        <IressText\>
+          576px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Max screen width        </IressText\>
+        <IressText\>
+          767px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Example viewport        </IressText\>
+        <IressText\>
+          100%        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Margin        </IressText\>
+        <IressText\>
+          16px        </IressText\>
+      </IressInline\>
+    </IressStack\>
+  </IressInline\>
+  <IressDivider />
+  <IressText\>
+    <h2\>
+      Grid example    </h2\>
+    <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" />
+    </IressPanel\>
+  </IressText\>
+  <IressContainer
+    style\={{
+      maxWidth: '767px'
+    }}
+  \>
+    <IressRow gutter\="md"\>
+      <IressCol
+        span\={{
+          base: 12,
+          sm: 12
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          sm: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          sm: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          sm: 3
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          sm: 3
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          sm: 3
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          sm: 3
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+    </IressRow\>
+  </IressContainer\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | 
+
+"576px - 767px"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Medium screens (`md`)
+
+[](./iframe.html?id=foundations-responsive-layout--md)
+
+**768px - 1023px**  
+Medium breakpoint for tablets and small laptops such as Chromebooks.
+
+**Min screen width**
+
+768px
+
+**Max screen width**
+
+1023px
+
+**Example viewport**
+
+100%
+
+**Margin**
+
+16px
+
+* * *
+
+Grid example
+------------
+
+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.
+
+You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
+
+```
+
+<IressStack gap\="lg"\>
+  <IressInline
+    gap\="md"
+    verticalAlign\="bottom"
+  \>
+    <IressStack
+      gap\="xs"
+      maxWidth\="input.16"
+    \>
+      <React.Suspense\>
+        <React.Lazy />
+      </React.Suspense\>
+      <IressText\>
+        <strong\>
+          768px - 1023px        </strong\>
+        <br />
+        Medium breakpoint for tablets and small laptops such as Chromebooks.      </IressText\>
+    </IressStack\>
+    <IressStack gap\="xs"\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Min screen width        </IressText\>
+        <IressText\>
+          768px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Max screen width        </IressText\>
+        <IressText\>
+          1023px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Example viewport        </IressText\>
+        <IressText\>
+          100%        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Margin        </IressText\>
+        <IressText\>
+          16px        </IressText\>
+      </IressInline\>
+    </IressStack\>
+  </IressInline\>
+  <IressDivider />
+  <IressText\>
+    <h2\>
+      Grid example    </h2\>
+    <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" />
+    </IressPanel\>
+  </IressText\>
+  <IressContainer
+    style\={{
+      maxWidth: '962px'
+    }}
+  \>
+    <IressRow gutter\="md"\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 12
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          md: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+    </IressRow\>
+  </IressContainer\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | 
+
+"768px - 1023px"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Large screens (`lg`)
+
+[](./iframe.html?id=foundations-responsive-layout--lg)
+
+**1024px - 1199px**  
+Large breakpoint for desktops and laptops, such as 13inch MacBooks.
+
+**Min screen width**
+
+1024px
+
+**Max screen width**
+
+1199px
+
+**Example viewport**
+
+100%
+
+**Margin**
+
+16px
+
+* * *
+
+Grid example
+------------
+
+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.
+
+You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
+
+```
+
+<IressStack gap\="lg"\>
+  <IressInline
+    gap\="md"
+    verticalAlign\="bottom"
+  \>
+    <IressStack
+      gap\="xs"
+      maxWidth\="input.16"
+    \>
+      <React.Suspense\>
+        <React.Lazy />
+      </React.Suspense\>
+      <IressText\>
+        <strong\>
+          1024px - 1199px        </strong\>
+        <br />
+        Large breakpoint for desktops and laptops, such as 13inch MacBooks.      </IressText\>
+    </IressStack\>
+    <IressStack gap\="xs"\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Min screen width        </IressText\>
+        <IressText\>
+          1024px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Max screen width        </IressText\>
+        <IressText\>
+          1199px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Example viewport        </IressText\>
+        <IressText\>
+          100%        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Margin        </IressText\>
+        <IressText\>
+          16px        </IressText\>
+      </IressInline\>
+    </IressStack\>
+  </IressInline\>
+  <IressDivider />
+  <IressText\>
+    <h2\>
+      Grid example    </h2\>
+    <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" />
+    </IressPanel\>
+  </IressText\>
+  <IressContainer
+    style\={{
+      maxWidth: '1180px'
+    }}
+  \>
+    <IressRow gutter\="md"\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 12
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          lg: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+    </IressRow\>
+  </IressContainer\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | 
+
+"1024px - 1199px"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Extra-large screens (`xl`)
+
+[](./iframe.html?id=foundations-responsive-layout--xl)
+
+**1200px - 1499px**  
+Large breakpoint for desktops and laptops, such as 15inch laptops and monitors.
+
+**Min screen width**
+
+1200px
+
+**Max screen width**
+
+1499px
+
+**Example viewport**
+
+1280px
+
+**Margin**
+
+16px
+
+* * *
+
+Grid example
+------------
+
+From large screens onwards, all 12 columns of the grid can be used. For developers, this means the minimum span on extra large screens is 1. At this screen the container max width is applied, but can be opted out by using the `fluid` prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
+
+You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
+
+```
+
+<IressStack gap\="lg"\>
+  <IressInline
+    gap\="md"
+    verticalAlign\="bottom"
+  \>
+    <IressStack
+      gap\="xs"
+      maxWidth\="input.16"
+    \>
+      <React.Suspense\>
+        <React.Lazy />
+      </React.Suspense\>
+      <IressText\>
+        <strong\>
+          1200px - 1499px        </strong\>
+        <br />
+        Large breakpoint for desktops and laptops, such as 15inch laptops and monitors.      </IressText\>
+    </IressStack\>
+    <IressStack gap\="xs"\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Min screen width        </IressText\>
+        <IressText\>
+          1200px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Max screen width        </IressText\>
+        <IressText\>
+          1499px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Example viewport        </IressText\>
+        <IressText\>
+          1280px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Margin        </IressText\>
+        <IressText\>
+          16px        </IressText\>
+      </IressInline\>
+    </IressStack\>
+  </IressInline\>
+  <IressDivider />
+  <IressText\>
+    <h2\>
+      Grid example    </h2\>
+    <p\>
+      From large screens onwards, all 12 columns of the grid can be used. For developers, this means the minimum span on extra large screens is 1. At this screen the container max width is applied, but can be opted out by using the{' '}
+      <code\>
+        fluid      </code\>
+      {' '}prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
+    </p\>
+    <IressPanel bg\="alt"\>
+      <kn renderLabel\="viewing" />
+    </IressPanel\>
+  </IressText\>
+  <IressContainer\>
+    <IressRow gutter\="md"\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 12
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+    </IressRow\>
+  </IressContainer\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | 
+
+"1200px - 1499px"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Extremely large screens (`xxl`)
+
+[](./iframe.html?id=foundations-responsive-layout--xxl)
+
+**1500px and above**  
+Extra-large breakpoint for modern desktop monitors and large laptops (17inch+).
+
+**Min screen width**
+
+1500px
+
+**Max screen width**
+
+N/A
+
+**Example viewport**
+
+1280px
+
+**Margin**
+
+16px
+
+* * *
+
+Grid example
+------------
+
+From large screens onwards, all 12 columns of the grid can be used. For developers, this means the minimum span on extra large screens is 1. At this screen the container max width is applied, but can be opted out by using the `fluid` prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
+
+You are currently viewing the **xl** breakpoint (1200px - 1499px). Resize your screen to view different breakpoints.
+
+```
+
+<IressStack gap\="lg"\>
+  <IressInline
+    gap\="md"
+    verticalAlign\="bottom"
+  \>
+    <IressStack
+      gap\="xs"
+      maxWidth\="input.16"
+    \>
+      <React.Suspense\>
+        <React.Lazy />
+      </React.Suspense\>
+      <IressText\>
+        <strong\>
+          1500px and above        </strong\>
+        <br />
+        Extra-large breakpoint for modern desktop monitors and large laptops (17inch+).      </IressText\>
+    </IressStack\>
+    <IressStack gap\="xs"\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Min screen width        </IressText\>
+        <IressText\>
+          1500px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Max screen width        </IressText\>
+        <IressText\>
+          N/A        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Example viewport        </IressText\>
+        <IressText\>
+          1280px        </IressText\>
+      </IressInline\>
+      <IressInline gap\="sm"\>
+        <IressText element\="strong"\>
+          Margin        </IressText\>
+        <IressText\>
+          16px        </IressText\>
+      </IressInline\>
+    </IressStack\>
+  </IressInline\>
+  <IressDivider />
+  <IressText\>
+    <h2\>
+      Grid example    </h2\>
+    <p\>
+      From large screens onwards, all 12 columns of the grid can be used. For developers, this means the minimum span on extra large screens is 1. At this screen the container max width is applied, but can be opted out by using the{' '}
+      <code\>
+        fluid      </code\>
+      {' '}prop. It is recommended to keep the max width in most scenarios to ensure optimal readability.
+    </p\>
+    <IressPanel bg\="alt"\>
+      <kn renderLabel\="viewing" />
+    </IressPanel\>
+  </IressText\>
+  <IressContainer\>
+    <IressRow gutter\="md"\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 12
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 6
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 4
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 2
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+      <IressCol
+        span\={{
+          base: 12,
+          xxl: 1
+        }}
+      \>
+        <IressPlaceholder height\="5em" />
+      </IressCol\>
+    </IressRow\>
+  </IressContainer\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | 
+
+"1500px and above"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+* * *
+
+For designers
+-------------
+
+When designing for responsive layouts, consider how your designs will adapt to different screen sizes. Use the breakpoints defined in the design system to guide your layout decisions and ensure that your designs are flexible and adaptable.
+
+### Tips
+
+1.  Use the example viewport sizes provided in the breakpoints table to show your designs at different screen widths.
+2.  Prioritise content based on screen size, ensuring that the most important information is easily accessible on smaller devices.
+3.  Reduce option counts on mobile devices where appropriate
+4.  Implement responsive navigation patterns
+5.  Adjust spacing and sizing for different contexts
+6.  Maintain usability across all supported devices
+
+* * *
+
+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' }} />;
+
+```
+
+### Hooks
+
+#### `useBreakpoint`
+
+We also provide a `useBreakpoint` hook that allows you to access the current breakpoint in your components. This can be useful for conditionally rendering components based on the current screen size.
+
+**Note:** It is best to use media queries for responsive styling. Most props that require responsive values already support breakpoints which map to CSS values. Only use the `useBreakpoint` hook when there is no other way to achieve the desired responsive behavior.
+
+import { useBreakpoint } from '@iress-oss/ids-components';
+const MyComponent \= () \=> {
+  const { breakpoint } \= useBreakpoint();
+  return (
+    <div\>
+      {breakpoint \=== 'xs' && <p\>This is extra small screen</p\>}
+      {breakpoint \=== 'md' && <p\>This is medium screen</p\>}
+    </div\>
+  );
+};
+
+```
+
+#### `useResponsiveProps`
+
+Another hook is `useResponsiveProps`, which allows you to define responsive properties that change based on the current breakpoint. This is particularly useful for completely changing components at various screen sizes.
+
+**Note:** It is best to use media queries for responsive styling. Most props that require responsive values already support breakpoints which map to CSS values. Only use the `useResponsiveProps` hook when there is no other way to achieve the desired responsive behavior.
+
+[](./iframe.html?id=foundations-responsive-layout--responsive-props)
+
+`useResponsiveProps`
+--------------------
+
+This example demonstrates a use case for `useResponsiveProps`, for changing the columns on a table based on the breakpoint.
+
+Resize the screen to see the columns change
+
+| Name | Age |
+| --- | --- |
+| Luke Skywalker | 19 |
+| Princess Leia | 19 |
+| Han Solo | 32 |
+
+```
+
+export const ResponsiveTableColumns \= () \=> {
+  const { value } \= useResponsiveProps({
+    base: \[{ key: 'name', label: 'Name' }\],
+    lg: \[
+      { key: 'name', label: 'Name' },
+      { key: 'age', label: 'Age' },
+    \],
+  });
+  return (
+    <IressTable
+      caption\={
+        <IressText textAlign\="left"\>
+          <h2\>
+            <code\>useResponsiveProps</code\>
+          </h2\>
+          <p\>
+            This example demonstrates a use case for{' '}
+            <code\>useResponsiveProps</code\>, for changing the columns on a table
+            based on the breakpoint.          </p\>
+          <p\>Resize the screen to see the columns change</p\>
+        </IressText\>
+      }
+      columns\={value}
+      rows\={\[
+        { name: 'Luke Skywalker', age: 19 },
+        { name: 'Princess Leia', age: 19 },
+        { name: 'Han Solo', age: 32 },
+      \]}
+    />
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | Set object |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Constant
+
+You can also use the breakpoints directly in your CSS or styled components. The breakpoints are defined in the `@iress-oss/ids-components` package.
+
+import { BREAKPOINT\_DETAILS } from '@iress-oss/ids-components';
+const css \= \`
+  @media (${BREAKPOINT\_DETAILS.md.mediaQuery}}) {
+    .my-class {      padding: 20px;    }  }
+\`;
+<style\>{css}</style\>;
+
+```
+
+The base grid size is exported as `GRID_SIZE` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.
+
+## React components / Z-index (stacking)
+
+Z-index (stacking)
+==================
+
+The z-index determines the stacking order of elements. Elements with a higher z-index always sit in front of elements with a lower z-index. Each index has been mapped to the appropriate elevation(s).
+
+Reference
+---------
+
+[](./iframe.html?id=foundations-z-index-stacking--reference)
+
+| Name | Usage | Value |
+| --- | --- | --- |
+| DEFAULT | The default z-index used for most elements. Can be combined with raised and floating elevations. | 0 |
+| MODAL | Used for IressModal. Can be combined with floating elevation. | 400 |
+| NAVBAR | Used for navbars. Can be combined with overflow elevation. | 100 |
+| POPOVER | Used for IressPopover. Can be combined with floating elevation. | 200 |
+| SLIDEOUT | Used for IressSlideout. Can be combined with floating elevation. | 300 |
+| TOAST | Used for IressToast. Can be combined with floating elevation. | 500 |
+| TOOLTIP | Used for IressTooltip. Can be combined with floating elevation. | 600 |
+
+```
+
+<IressTable
+  columns\={\[
+    {
+      key: 'name',
+      label: 'Name',
+      sort: 'asc',
+      width: '1%'
+    },
+    {
+      key: 'usage',
+      label: 'Usage'
+    },
+    {
+      key: 'value',
+      label: 'Value',
+      width: '200px'
+    }
+  \]}
+  rows\={\[
+    {
+      name: 'DEFAULT',
+      usage: 'The default z-index used for most elements. Can be combined with raised and floating elevations.',
+      value: 0
+    },
+    {
+      name: 'NAVBAR',
+      usage: 'Used for navbars. Can be combined with overflow elevation.',
+      value: 100
+    },
+    {
+      name: 'POPOVER',
+      usage: 'Used for IressPopover. Can be combined with floating elevation.',
+      value: 200
+    },
+    {
+      name: 'SLIDEOUT',
+      usage: 'Used for IressSlideout. Can be combined with floating elevation.',
+      value: 300
+    },
+    {
+      name: 'MODAL',
+      usage: 'Used for IressModal. Can be combined with floating elevation.',
+      value: 400
+    },
+    {
+      name: 'TOAST',
+      usage: 'Used for IressToast. Can be combined with floating elevation.',
+      value: 500
+    },
+    {
+      name: 'TOOLTIP',
+      usage: 'Used for IressTooltip. Can be combined with floating elevation.',
+      value: 600
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+ | \- | Set object |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+ | \- | Set object |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | 
+
+RAW
+
+*   columns :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 3 keys
+        
+    
+    \]
+    
+
+ |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 3 keys
+        
+    *   1 :
+        
+        {...} 3 keys
+        
+    *   2 :
+        
+        {...} 3 keys
+        
+    *   3 :
+        
+        {...} 3 keys
+        
+    *   4 :
+        
+        {...} 3 keys
+        
+    *   5 :
+        
+        {...} 3 keys
+        
+    *   6 :
+        
+        {...} 3 keys
+        
+    
+    \]
+    
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+ | \- | 
+
+rowcol
+
+ |
+
+* * *
+
+For developers
+--------------
+
+If you are using the IDS components, the z-indexes have already been mapped out to their respective components based on the usage above. They are hardcoded into the components, so you don't need to worry about them.
+
+The mapping is exported as `Z_INDEX` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.
+
+## React components / Visual Design
+
+Visual Design Standards
+=======================
+
+Typography
+----------
+
+*   Use systematic font sizing with heading scales (H1-H6)
+*   Implement consistent line heights and font weights
+*   Provide text colour hierarchies (primary, muted, success, warning, danger)
+*   Support responsive typography scaling
+
+Colour System
+-------------
+
+*   Maintain semantic colour meanings:
+    *   **Primary**: Main call-to-action colour with high contrast
+    *   **Success**: Positive outcomes and confirmations
+    *   **Warning**: Caution and important notices
+    *   **Danger**: Errors and destructive actions
+    *   **Info**: Neutral information and guidance
+    *   **Positive/Negative**: Financial context (buy/sell actions)
+*   Ensure all colour combinations meet accessibility contrast requirements
+*   Provide consistent hover and active state colours
+
+Spacing and Layout
+------------------
+
+*   Use systematic spacing scale (xs, sm, md, lg, xl)
+*   Apply consistent gutter systems for layout components
+*   Implement responsive breakpoints for adaptive layouts
+*   Maintain proper margin and padding relationships
+
+Interactive States
+------------------
+
+*   Provide clear hover, focus, active, and disabled states
+*   Use consistent transition timing and easing
+*   Implement proper focus indicators for keyboard navigation
+*   Show loading states for asynchronous operations
+
+## React components / Consistency
+
+Using components consistently
+=============================
+
+Buttons
+-------
+
+*   **Primary**: Limit to one per view for main call-to-action
+*   **Secondary**: Use for secondary actions
+*   **Tertiary**: Extra affordance between secondary actions
+*   **Link**: Button styled as link (avoid with icon-only content)
+*   **Danger**: Destructive actions requiring extra confirmation
+*   **Positive/Negative**: Financial transactions (buy/sell)
+
+Forms
+-----
+
+*   Always use `IressField` wrapper for proper label, hint, and error placement
+*   Provide clear validation feedback with appropriate error messages
+*   Use consistent input sizing based on expected content length
+*   Implement proper form state management and accessibility
+
+Navigation
+----------
+
+*   Use semantic HTML5 navigation elements
+*   Provide skip links for keyboard users
+*   Implement proper ARIA labelling for navigation sections
+*   Ensure consistent navigation patterns across applications
+
+Data Display
+------------
+
+*   Use semantic table structures with proper headers
+*   Provide clear visual hierarchy in data presentations
+*   Implement consistent sorting and filtering patterns
+*   Use appropriate loading states for data-heavy components
+
+Modals and Overlays
+-------------------
+
+*   Reserve modals for critical tasks requiring full attention
+*   Provide multiple dismissal methods (backdrop, escape key, close button)
+*   Implement proper focus management and restoration
+*   Use slideouts for supplementary tasks where underlying content needs visibility
+
+## React components / Content
+
+Content
+=======
+
+Microcopy Guidelines
+--------------------
+
+*   Use clear, concise language that matches user mental models
+*   Provide helpful error messages with actionable guidance
+*   Implement consistent tone of voice across all interface text
+*   Use progressive disclosure for complex information
+
+Iconography
+-----------
+
+*   Use icons consistently with established meanings
+*   Provide screen reader text for meaningful icons
+*   Avoid using icons as the sole means of communication
+*   Maintain consistent icon sizing and alignment
+
+## React components / User Experience
+
+User experience
+===============
+
+We use heuristic guidelines to assess the usability and user-centred design quality of all Iress products.
+
+System Feedback
+---------------
+
+*   Always show users where they are, what just happened, and what’s possible next.
+*   Provide immediate visual and textual feedback for all actions and states.
+*   Ensure feedback is clear, contextual, and proportionate to the importance of the action.
+
+Language and Mental Models
+--------------------------
+
+*   Use user-centred language and avoid technical jargon.
+*   Follow cultural and industry conventions for colour, iconography, terminology, and layout.
+*   Align interaction patterns with real-world analogues wherever feasible.
+
+Control and Forgiveness
+-----------------------
+
+*   Make actions reversible and provide undo where errors may occur.
+*   Let users easily backtrack, edit inputs, or abandon flows.
+*   Provide escape hatches from any process without penalty.
+
+Standards and Consistency
+-------------------------
+
+*   Use consistent layout, labelling, iconography, and grammar.
+*   Reinforce expectations by placing similar elements in predictable positions.
+*   Apply colour, spacing, and visual patterns consistently across all screens.
+
+Error Prevention and Recovery
+-----------------------------
+
+*   Prevent errors by anticipating misuse and validating early.
+*   Phrase error messages with clarity, empathy, and constructive suggestions.
+*   Where errors occur, explain why and how they can be resolved.
+
+Recognition Over Recall
+-----------------------
+
+*   Display necessary information at the point of decision.
+*   Use visual grouping, spacing, and affordance to reveal hierarchy.
+*   Prioritise visual clarity over novelty.
+
+Simplicity and Minimalism
+-------------------------
+
+*   Remove unnecessary detail—every word, element, or feature should earn its place.
+*   Design for clarity of purpose with visually distinct, semantically meaningful UI components.
+*   Use whitespace, clean alignment, and simplified flows to reduce cognitive load.
+