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

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

@@ -16,7 +16,7 @@ This component has been recently updated with new props. The props have been mar
 
 [](./iframe.html?id=components-input--default)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInput
   append\=""
@@ -159,7 +159,7 @@ For more information about each type, please see the [MDN documentation](https:/
 
 [](./iframe.html?id=components-input--types)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressInput
@@ -346,7 +346,7 @@ For more information about each mode (and their expected user experience), pleas
 
 [](./iframe.html?id=components-input--input-modes)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressInput
@@ -500,7 +500,7 @@ Clearing will set the focus on the input and trigger the `onClear` handler. Use
 
 [](./iframe.html?id=components-input--clearable)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInput
   clearable
@@ -662,7 +662,7 @@ Widths can also be set as a percentage, allowing the input to take up a proporti
 
 [](./iframe.html?id=components-input--sizing)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressInput
@@ -825,7 +825,7 @@ You can also use `IressInput` to render a `textarea` instead of an `input`. Simp
 
 [](./iframe.html?id=components-input--text-areas)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInput rows\={5} />
 
@@ -953,7 +953,7 @@ Content (typically icons) can be added to slots (`append` and `prepend`) within
 
 [](./iframe.html?id=components-input--slots)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressInput
@@ -1092,7 +1092,7 @@ If you need more control over the read-only state (for example, rendering a styl
 
 Value
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInput
   append\=""
@@ -1251,7 +1251,7 @@ The example below changes the value entered to uppercase when the input is not f
 
 [](./iframe.html?id=components-input--formatter)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInput
   append\=""

package/generated/docs/components_components-input-recipes-docs.md

@@ -8,9 +8,9 @@ You can use `IressInput` to display percentage formatting. When the field is foc
 
 [](./iframe.html?id=components-input-recipes--percentage)
 
-```
+Hide codedrawOpen in CodeSandbox
 
-import { IressInput } from '@iress-oss/ids-components';
+import { IressInput } from '@/main';
 export const InputPercentage \= () \=> (
   <IressInput<string | number\>
     defaultValue\="0.5"
@@ -153,7 +153,7 @@ Input using `{ register } = useForm()`
 
 Submit
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   type InputRef,
@@ -165,7 +165,7 @@ import {
   IressModal,
   IressStack,
   IressTable,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 import {
   Controller,

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

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 AUD
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputCurrency
   currencyCode\="AUD"
@@ -108,7 +108,7 @@ Display the GBP with `locale="en-GB"` and `currencyCode="GBP"` props (must pass
 
 GBP
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputCurrency
   currencyCode\="GBP"
@@ -192,7 +192,7 @@ Display the JPY with `locale="ja-JPY"` and `currencyCode="JPY"` props (must pass
 
 JPY
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputCurrency
   currencyCode\="JPY"
@@ -278,7 +278,7 @@ Display the currency symbol with `withSymbol` props
 
 AUD
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputCurrency
   currencyCode\="AUD"
@@ -365,7 +365,7 @@ Pass more format options with `formatOptions` props. More format options in [her
 
 AUD
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputCurrency
   currencyCode\="AUD"
@@ -476,7 +476,7 @@ $12,345.68
 
 AUD
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputCurrency
   alignRight
@@ -564,7 +564,7 @@ Set the input content align to right with `alignRight` prop, which is more frien
 
 AUD
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInputCurrency
   alignRight

package/generated/docs/components_components-inputcurrency-recipes-docs.md

@@ -16,8 +16,9 @@ My investments
 | AU Stocks | 05/02/2019 | 26.2% | $9,342.16 |
 | UK Stocks | 28/06/2020 | 49% | $49,751.40 |
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import { IressTable } from '@/main';
 export const CurrencyInTable \= () \=> {
   return (
     <IressTable
@@ -139,8 +140,10 @@ Only able to input valid value when use `IressInputCurrency`. In this example, o
 
 AUD
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import { IressInputCurrency } from '@/main';
+import { useState } from 'react';
 export const ValidValueOnChage \= () \=> {
   const \[value, setValue\] \= useState('');
   return (

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

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 **This is a label**
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressLabel\>
   This is a label
@@ -66,7 +66,7 @@ To indicate that an input is required, you may use the `required` prop to distin
 
 **\*RequiredThis is a label for a required input**
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressLabel required\>
   This is a label for a required input
@@ -117,7 +117,7 @@ Sometimes you may wish to have an input with no visible label, but to still wrap
 
 **This text is visible to screen readers only**
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressLabel hiddenLabel\>
   This text is visible to screen readers only
@@ -172,7 +172,7 @@ Home settings
 
 **
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressLabel\>
   <IressInline

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

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 Hello, I am a paragraph with an [IressLink](//iress.com) inside.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel\>
   Hello, I am a paragraph with an{' '}
@@ -146,7 +146,7 @@ When the loading state is activated, any click events on the link are disabled.
 
 Link text
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressLink loading\>
   Link text
@@ -253,7 +253,7 @@ Use the slots to correctly position icons or badges inside buttons.
 
 Prepend iconAppend icon
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInline gap\="md"\>
   <IressLink prepend\={<IressIcon name\="home" />}\>
@@ -352,8 +352,10 @@ You can use the `element` prop to render a custom component as the link. This is
 
 [Iress](https://iress.com)
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import { IressLink } from '@/main';
+import { type HTMLAttributes, forwardRef } from 'react';
 /\*\*
  \* This could be the \`Link\` component from \`react-router-dom\` or any other routing library. \*/
 const Link \= forwardRef<

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

@@ -25,7 +25,7 @@ Menu item (button)
 
 [Menu item (link)](https://iress.com)Menu item (selected)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu defaultSelected\="5"\>
   <IressMenuHeading\>
@@ -191,7 +191,7 @@ Menu item (button)
 
 [Menu item (link)](https://iress.com)Menu item (selected)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu defaultSelected\="5"\>
   <IressMenuHeading\>
@@ -354,7 +354,7 @@ Button with append and prepend
 
 Button with append[A link with a very long name that wraps based on the menu's `noWrap` prop](https://iress.com)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu maxWidth\="input.25perc"\>
   <IressMenuHeading prepend\={<IressIcon fixedWidth name\="smile"/>}\>
@@ -535,7 +535,7 @@ When rendering a set of links for navigation purposes (as a secondary nav in thi
 
 [Financial advice](https://www.iress.com/software/financial-advice/)[Trading and market data](https://www.iress.com/software/trading-and-market-data/)[Investment management](https://www.iress.com/software/investment-management/)[Mortgages](https://www.iress.com/software/mortgages/)[Life and pensions](https://www.iress.com/software/life-and-pensions/)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <nav aria-label\="Secondary"\>
   <IressMenu\>
@@ -688,7 +688,7 @@ Menu item 1
 
 Menu item 2
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu\>
   <IressMenuHeading element\="h4"\>
@@ -844,7 +844,7 @@ Menu item 3Menu item 4
 
 Menu item 5
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu\>
   <IressMenuHeading
@@ -1001,7 +1001,7 @@ Menu item (button)
 
 [Menu item (link)](https://iress.com)Menu item (selected)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu
   defaultSelected\="5"
@@ -1187,7 +1187,7 @@ Menu item (button)
 
 [Menu item (link)](https://iress.com)Menu item (selected)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="lg"\>
   <IressText\>
@@ -1384,7 +1384,7 @@ Menu item with some text that wraps
 
 Non wrapping menu item with some text
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInline\>
   <IressMenu
@@ -1543,7 +1543,7 @@ New fileSave file as
 
 [Visit the Iress website](https://www.iress.com)[Visit Google8+](https://google.com)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu role\="menu"\>
   <IressMenuHeading
@@ -1732,7 +1732,7 @@ Keyboard interaction
 *   Menu items cannot be navigated using the arrow keys
 *   Menu items are navigated using the `tab` key
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu defaultSelected\={5}\>
   <IressMenuHeading\>
@@ -1897,7 +1897,7 @@ Keyboard interaction
 *   In inline layouts, pressing the `right` arrow key on the last item will focus the first item
 *   Pressing the `tab` key when focused on any item in the menu will focus to next focusable item outside of the menu
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu
   defaultSelected\={5}
@@ -2071,7 +2071,7 @@ Keyboard interaction
 *   In inline layouts, pressing the `left` arrow key on the first item will **not** focus the last item
 *   Pressing the `tab` key when focused on any item in the menu will focus to next focusable item outside of the menu
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu
   aria-label\="Selectable listbox"

package/generated/docs/components_components-menu-menuitem-docs.md

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 Menu item
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenuItem\>
   Menu item
@@ -174,7 +174,7 @@ The `IressMenuItem` can be set to selected using the `selected` prop.
 
 Menu item
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenuItem selected\>
   Menu item
@@ -324,7 +324,7 @@ A menu item can have a unique value set to it, used to determine its selected st
 
 Menu item with value
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu role\="listbox"\>
   <IressMenuItem value\={9}\>
@@ -479,7 +479,7 @@ When `canToggle` is set to true, the menu item can be toggled between selected a
 
 Menu item with value
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu role\="listbox"\>
   <IressMenuItem
@@ -637,7 +637,7 @@ You can prepend and append content to a menu item using the `prepend` and `appen
 
 Menu itemNew
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenuItem
   append\={<IressBadge mode\="success"\>New</IressBadge\>}
@@ -848,7 +848,7 @@ Inside a `IressMenu` with a `role` of `listbox` and the `multiSelect` prop set t
 
 Menu item with valueMenu item with value
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu
   multiSelect
@@ -1008,9 +1008,9 @@ You can use the `element` prop to render a custom component inside the menu item
 
 [Iress](https://iress.com)[Google](https://google.com)
 
-```
+Hide codedrawOpen in CodeSandbox
 
-import { IressMenu, IressMenuItem } from '@iress-oss/ids-components';
+import { IressMenu, IressMenuItem } from '@/main';
 import { type HTMLAttributes } from 'react';
 /\*\*
  \* This could be the \`Link\` component from \`react-router-dom\` or any other routing library. \*/
@@ -1173,7 +1173,7 @@ Menu item with divider
 
 * * *
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenuItem divider\>
   Menu item with divider
@@ -1321,7 +1321,7 @@ However, it is recommended to use the `IressMenuDivider` component instead.
 
 * * *
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenuDivider />
 
@@ -1338,7 +1338,7 @@ You can use the `IressMenuHeading` to render headings within a menu. This adds s
 Menu text
 ---------
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu\>
   <IressMenuHeading\>
@@ -1407,7 +1407,7 @@ You can use the `IressMenuText` to render other text within a menu. This adds st
 
 Menu text
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressMenu\>
   <IressMenuText\>

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

@@ -33,7 +33,7 @@ Read more
 
 Show modal
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showModal } \= useModal();
@@ -235,9 +235,9 @@ You can use state to control the modal by setting the `show` property to `true`
 
 Show modal using state
 
-```
+Hide codedrawOpen in CodeSandbox
 
-import { IressButton, IressModal, type IressModalProps } from '@iress-oss/ids-components';
+import { IressButton, IressModal, type IressModalProps } from '@/main';
 import { useState } from 'react';
 export const ModalUsingState \= () \=> {
   const \[show, setShow\] \= useState(false);
@@ -417,7 +417,7 @@ To use, wrap your `<App/>` or the component that you want to use the `useModal`
 
 Show modal using provider
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressButton,
@@ -425,7 +425,7 @@ import {
   type IressModalProps,
   IressModalProvider,
   useModal,
-} from '@iress-oss/ids-components';
+} from '@/main';
 const MODAL\_ID \= 'storybook-modal';
 export const App \= (modalProps: IressModalProps) \=> (
   <IressModalProvider\>
@@ -496,7 +496,7 @@ Content to appear underneath the main content. Usually used for extra controls l
 
 Footer slot modal
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showModal } \= useModal();
@@ -697,7 +697,7 @@ The fixed footer variant of IressModal prevents content from overflowing the mod
 
 Fixed footer modal
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showModal } \= useModal();
@@ -937,8 +937,27 @@ Large modals facilitate sub-flows within a primary flow, allowing users to focus
 
 View large modal example
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressCard,
+  IressCheckbox,
+  IressCol,
+  IressDivider,
+  IressExpander,
+  IressField,
+  IressInline,
+  IressInput,
+  IressModal,
+  IressProgress,
+  IressRichSelect,
+  IressRow,
+  IressStack,
+  IressTable,
+} from '@/main';
+import { useState } from 'react';
+import modalIsDone from './modal-is-done.svg';
 const SmallModal \= () \=> {
   const \[show, setShow\] \= useState(false);
   return (
@@ -1166,7 +1185,7 @@ const LargeModal \= () \=> {
   );
 };
 export const ModalSizes \= () \=> (
-  <IressRow gutter\="spacing.700" verticalAlign\="stretch"\>
+  <IressRow gutter\="spacing.7" verticalAlign\="stretch"\>
     <IressCol\>
       <SmallModal />
     </IressCol\>
@@ -1360,7 +1379,7 @@ You can override this behaviour by specifying a value for `xs` in your size obje
 
 Responsive modal
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showModal } \= useModal();
@@ -1382,7 +1401,7 @@ return (
       xxl: 'overlay.lg'
     }}
   \>
-    <kn />
+    <Ln />
   </IressModal\>
 </\>
 );
@@ -1589,7 +1608,7 @@ For instances where you require the user's full attention and you want to ensure
 
 Disable backdrop clickNo close button (please provide one, if you decide to hide the close button)Both (If you hide the close button, ensure you provide another way to close the modal)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showModal } \= useModal();
@@ -1833,7 +1852,7 @@ New
 
 <table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { render, waitFor, screen } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { idsFireEvent, componentLoad } from '@iress/ids-react-test-utils';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { userEvent } from '@testing-library/user-event';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">test('opening and closing a modal', async () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await componentLoad([</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByRole('button', { name: /open modal/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'modal-trigger',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'modal',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // activate modal</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  ]);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const modal = await screen.findByRole('dialog');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByTestId('modal-trigger');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const modal = screen.getByTestId('modal');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // In version 5, you can only interact with the modal once it has been loaded here.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // In version 4, you can already interact with the modal here as its in the DOM at this stage.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // activate modal</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(modal).toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  // close modal</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByTestId('modal__close-button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByRole('button', { name: /close/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(modal).not.toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await waitForElementToBeRemoved(modal);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">});</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer allowModeChange oldValue\={\`import { render, waitFor, screen } from '@testing-library/react';

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

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel\>
   His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
@@ -75,10 +75,10 @@ Transparent `bg`
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressContainer\>
-  <IressRow gutter\="spacing.400"\>
+  <IressRow gutter\="spacing.4"\>
     <IressCol\>
       <IressPanel\>
         <IressText element\="h2"\>
@@ -188,7 +188,7 @@ justify
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressPanel textAlign\="center"\>
@@ -254,7 +254,7 @@ Panel can be set to fill its available container height by setting the `stretch`
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack
   style\={{
@@ -304,7 +304,7 @@ Panels can inherit the theme's border radius which may result in an undesirable
 
 His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel borderRadius\="none"\>
   His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.