@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

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

@@ -1,1346 +0,0 @@
-[](#modal)Modal
-===============
-
-Overview
---------
-
-Modals gather information, complete a subtask, or provide additional information without losing the context of an underlying page.
-
-* * *
-
-Updated
-
-**Recently updated**
-
-This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
-
-Read more
-
-[](#use-a-modal-when)Use a modal when
--------------------------------------
-
-*   Providing supplemental tasks required by the underlying page
-*   Providing non-essential information related to the underlying page
-*   Content require full attention
-
-[](#avoid-using-a-modal-when)Avoid using a modal when
------------------------------------------------------
-
-*   Conveying brief messages about background processes or status changes. Instead use IressAlert or IressToast.
-*   The modal content can be incorporated into the page without complicating the page's intent
-
-Show modal
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const Story \= () \=> {
-  const { showModal } \= useModal();
-const MODAL\_ID \= 'storybook-modal';
-return (
-  <\>
-  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
-    Show modal  </IressButton\>
-  <IressModal
-    footer\="Footer slot"
-    id\="storybook-modal"
-  \>
-    Modal content  </IressModal\>
-</\>
-);
-};
-  
-export const App \= () \=> (
-  <IressModalProvider\>
-        <Story />
-      </IressModalProvider\>
-);
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| bg | 
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | Set object |
-| children | 
-
-Text to be displayed inside the modal.
-
-ReactNode
-
-
-
- | \- | 
-
-"Modal content"
-
- |
-| closeText | 
-
-Screenreader text for close button.
-
-stringundefined
-
-
-
- | 
-
-Close
-
- | Set object |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| container | 
-
-The container element to render the modal into. By default, the modal will render at the end of the document body.
-
-FloatingUIContainerundefined
-
-
-
- | \- | Set object |
-| defaultShow | 
-
-When set to `true` the modal will be visible by default. Use for uncontrolled modals.
-
-booleanundefined
-
-
-
- | 
-
-false
-
- | Set object |
-| disableBackdropClick | 
-
-When set to `true`, users cannot exit the modal by clicking the backdrop or using the escape key.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| fixedFooter | 
-
-When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| footer | 
-
-Panel to place modal controls.
-
-ReactNode
-
-
-
- | \- | 
-
-"Footer slot"
-
- |
-| heading | 
-
-Sets the heading for the modal. If passed an element, it will render the element with an id, to ensure its connection to the modal.
-
-string | ReactElement<any, string | JSXElementConstructor<any>> | undefined
-
- | \- | Set object |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| id | 
-
-Unique ID for the modal. Use if you would like to open this modal from anywhere in your app using the `useModal` hook.
-
-stringundefined
-
-
-
- | \- | 
-
-"storybook-modal"
-
- |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| noCloseButton | 
-
-When set to `true`, no close button will be rendered. You must add your own closing mechanism to ensure accessibility.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| onEntered | 
-
-Emitted when the modal has opened.
-
-(() => void) | undefined
-
- | \- | \- |
-| onExited | 
-
-Emitted when the modal has closed.
-
-(() => void) | undefined
-
- | \- | \- |
-| onShowChange | 
-
-Emitted when the modal has opened or closed internally. Use for controlled modals.
-
-((show: boolean) => void) | undefined
-
- | \- | \- |
-| onStatus | 
-
-Emitted when the modal has mounted, unmounted, opened or closed. Open and close occur before animation begins.
-
-((status: "initial" | "open" | "close" | "unmounted") => void) | undefined
-
- | \- | \- |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| show | 
-
-When set to `true` the modal will be visible. Use for controlled modals.
-
-booleanundefined
-
-
-
- | \- | \- |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| static | 
-
-When set to `true`, the modal will act like a static element when open. This means it will not lock scroll or focus within the modal. Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
-
- | \- | Set object |
-| width | 
-
-The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
-
-This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **4** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-
-[](#controlling-the-modal)Controlling the modal
------------------------------------------------
-
-### [](#using-the-show-property)Using the `show` property
-
-You can use state to control the modal by setting the `show` property to `true` or `false`. To sync your state with the modal, you can use the `onShowChange` prop, which is normally passed the set function from `useState`.
-
-Show modal using state
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import { IressButton, IressModal, IressModalProps } from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const ModalUsingState \= () \=> {
-  const \[show, setShow\] \= useState(false);
-  return (
-    <\>
-      <IressButton onClick\={() \=> setShow(true)}\>
-        Show modal using state      </IressButton\>
-      <IressModal
-        {...{
-  children: 'This modal was opened via state',
-}}
-        show\={show}
-        onShowChange\={setShow}
-        footer\={<IressButton onClick\={() \=> setShow(false)}\>Close</IressButton\>}
-      />
-    </\>
-  );
-};
-
-Copy
-
-### [](#using-the-iressmodalprovider)Using the `IressModalProvider`
-
-You can use the `IressModalProvider` to open and close modals from anywhere in your application, as long as the modal has a unique `id`. In this case you would use the `useModal` hook to open and close the modal.
-
-To use, wrap your `<App/>` or the component that you want to use the `useModal` hook with `<IressModalProvider />`.
-
-Show modal using provider
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressButton,
-  IressModal,
-  IressModalProps,
-  IressModalProvider,
-  useModal,
-} from '@iress-oss/ids-components';
-const MODAL\_ID \= 'storybook-modal';
-export const App \= (modalProps: IressModalProps) \=> (
-  <IressModalProvider\>
-    <ModalWithTrigger {...modalProps} />
-  </IressModalProvider\>
-);
-const ModalWithTrigger \= ({
-  id \= MODAL\_ID,
-  ...modalProps
-}: IressModalProps) \=> {
-  const { showModal } \= useModal();
-  return (
-    <\>
-      <IressButton onClick\={() \=> showModal(id)}\>
-        Show modal using provider      </IressButton\>
-      <IressModal
-        {...modalProps}
-        id\={id}
-        footer\={
-          <IressButton onClick\={() \=> showModal(id, false)}\>Close</IressButton\>
-        }
-      \>
-        {modalProps.children ?? 'Modal content'}
-      </IressModal\>
-    </\>
-  );
-};
-
-Copy
-
-#### [](#provider-api)Props
-
-These are some settings you can use to customise the provider, such as setting where the modals are rendered in the DOM.
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| children | 
-\-
-
- | \- | \- |
-| container | 
-
-The container element to render the modal into. By default, the modal will render at the end of the document body.
-
-FloatingUIContainerundefined
-
-
-
- | \- | \- |
-| Show Storybook only itemsStorybook only | Show Storybook only items |
-
-[](#behaviour)Behaviour
------------------------
-
-*   No other interaction on the main page can be accessed while a modal is active. A backdrop covers the content beneath so that the content beneath cannot be interacted with.
-*   Clicking on the the backdrop closes the modal and returns the focus to the triggering element.
-*   When the modal is active the body is set to overflow: hidden to stop any scrolling of the underlying page. Scrolling should then only be possible on the modal wrapper.
-*   By default there are 3 ways to dismiss the modal; click X in the header; press ESC on a keyboard; click anywhere on the backdrop. It is also recommended that consumers add a Cancel or Close button to the modal's footer slot if required.
-
-[](#examples)Examples
----------------------
-
-### [](#footer-slot)Footer slot
-
-Content to appear underneath the main content. Usually used for extra controls like buttons etc.
-
-Footer slot modal
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const Story \= () \=> {
-  const { showModal } \= useModal();
-const MODAL\_ID \= 'storybook-modal';
-return (
-  <\>
-  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
-    Footer slot modal  </IressButton\>
-  <IressModal
-    footer\={<IressButton\>Button in footer</IressButton\>}
-    id\="storybook-modal"
-  \>
-    Normal modal content  </IressModal\>
-</\>
-);
-};
-  
-export const App \= () \=> (
-  <IressModalProvider\>
-        <Story />
-      </IressModalProvider\>
-);
-
-Copy
-
-### [](#fixed-footer)Fixed footer
-
-The `fixedFooter` prop can be used to set the footer to be fixed to the bottom of the modal. This is often useful when there is a lot of content in the main area that you would like to scroll underneath the footer content.
-
-**Note:** Also works without footer content.
-
-Using with popovers and tooltips
---------------------------------
-
-The fixed footer variant of IressModal prevents content from overflowing the modal. This can cause layout issues when using with components that use popovers (for example IressCombobox), especially when these components sit at the end of the modal's content. If you encounter these issues, try using a modal without a fixed footer. Normal modals allow content to overflow, which should fix the issue.
-
-Fixed footer modal
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const Story \= () \=> {
-  const { showModal } \= useModal();
-const MODAL\_ID \= 'storybook-modal';
-return (
-  <\>
-  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
-    Fixed footer modal  </IressButton\>
-  <IressModal
-    fixedFooter
-    footer\={<IressButton\>Button in footer</IressButton\>}
-    id\="storybook-modal"
-  \>
-    <React.Fragment key\=".0"\>
-      <IressText element\="h2"\>
-        Next Saturday night, we're sending you back to the future      </IressText\>
-      <IressText\>
-        <p\>
-          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
-        <p\>
-          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
-        <p\>
-          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
-        <h3\>
-          I just don't think I can take that kind of rejection        </h3\>
-        <p\>
-          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
-        <p\>
-          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
-        <p\>
-          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
-        <p\>
-          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
-        <p\>
-          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
-        <p\>
-          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
-        <p\>
-          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
-      </IressText\>
-    </React.Fragment\>
-  </IressModal\>
-</\>
-);
-};
-  
-export const App \= () \=> (
-  <IressModalProvider\>
-        <Story />
-      </IressModalProvider\>
-);
-
-Copy
-
-### [](#size)Size
-
-The `size` prop can be set to `sm`, `md` or `lg`. It defaults to `md`.
-
-Below is a guide on when to use which size.
-
-Small modal
------------
-
-Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
-
-View small modal example
-
-Medium modal
-------------
-
-Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
-
-View medium modal example
-
-Large modal
------------
-
-Large modals facilitate sub-flows within a primary flow, allowing users to focus on tasks that will impact the underlying screen once the modal is closed (e.g., adding an item to a table or bulk uploading items). They should be used sparingly and only when there is a direct relationship to the underlying screen, where the action wouldn't warrant a separate dedicated screen.
-
-View large modal example
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const SmallModal \= () \=> {
-  const \[show, setShow\] \= useState(false);
-  return (
-    <\>
-      <IressCard
-        heading\="Small modal"
-        stretch
-        footer\={
-          <IressButton onClick\={() \=> setShow(true)}\>
-            View small modal example          </IressButton\>
-        }
-      \>
-        <p\>
-          Small modals communicate the outcome of an irreversible action. They          should be concise and straightforward, containing a single action and,          in some cases, a single input field.        </p\>
-      </IressCard\>
-      <IressModal
-        width\="overlay.sm"
-        heading\="Terms of service update"
-        footer\={
-          <IressButton mode\="primary" onClick\={() \=> setShow(false)}\>
-            Accept          </IressButton\>
-        }
-        disableBackdropClick
-        show\={show}
-        onShowChange\={setShow}
-      \>
-        <p\>
-          A change in our <a href\="#"\>terms of service</a\> takes effect on July          1st, 2024. Please read and accept the terms.        </p\>
-        <IressCheckbox\>I accept the terms of service</IressCheckbox\>
-      </IressModal\>
-    </\>
-  );
-};
-const MediumModal \= () \=> {
-  const \[show, setShow\] \= useState(false);
-  return (
-    <\>
-      <IressCard
-        stretch
-        heading\="Medium modal"
-        footer\={
-          <IressButton onClick\={() \=> setShow(true)}\>
-            View medium modal example          </IressButton\>
-        }
-      \>
-        <p\>
-          Medium modals provide optional supporting information to help users          understand the context of a word or screen. They may contain a single          action and, in some cases, a larger input such as a textarea.        </p\>
-      </IressCard\>
-      <IressModal
-        width\="overlay.md"
-        heading\="History of Iress"
-        footer\={<IressButton onClick\={() \=> setShow(false)}\>Close</IressButton\>}
-        fixedFooter
-        show\={show}
-        onShowChange\={setShow}
-      \>
-        <h3\>Founding and Early Years (1993 - 2000)</h3\>
-        <p\>
-          Iress Limited (ASX: IRE) was founded in 1993 in Melbourne, Australia,          as a provider of financial market data and trading software.          Initially, the company focused on delivering technology solutions for          stockbrokers and traders, providing real-time market data, order          management, and trading execution tools.        </p\>
-        <h3\>Expansion and IPO (2001 - 2010)</h3\>
-        <p\>
-          In 2001, Iress went public, listing on the Australian Securities          Exchange (ASX). This move provided the company with capital to expand          its operations and invest in new technologies. During this period,          Iress expanded its services beyond trading platforms to include          financial planning software, portfolio management, and wealth          management solutions. The company also started expanding          internationally, entering markets such as the UK, Canada, New Zealand,          and South Africa, through organic growth and acquisitions.        </p\>
-        <h3\>Global Growth and Acquisitions (2011 - 2020)</h3\>
-        <p\>
-          Between 2011 and 2020, Iress continued its global expansion through          acquisitions and product diversification. Key acquisitions included:        </p\>
-        <ul\>
-          <li\>
-            Avelo (2013): Strengthened its presence in the UK financial services            market.          </li\>
-          <li\>
-            Pulse Software (2014): Added financial advice solutions to its            portfolio.          </li\>
-          <li\>
-            INET BFA (2016): Expanded its reach into South Africa’s financial            market.          </li\>
-          <li\>
-            OneVue (2020): Enhanced its superannuation and investment            administration capabilities.          </li\>
-        </ul\>
-        <p\>
-          During this period, Iress also expanded into mortgage lending          technology and digital financial services, adapting to the increasing          demand for automation and efficiency in financial markets.        </p\>
-        <h3\>Recent Developments (2021 - Present)</h3\>
-        <p\>
-          In 2021, Iress announced a strategic review of its business, focusing          on streamlining operations and improving profitability. The company          also experienced leadership changes, including new CEO appointments to          drive digital transformation.{' '}
-        </p\>
-        <p\>
-          Iress has continued to innovate with cloud-based solutions, artificial          intelligence (AI), and data analytics, catering to financial          institutions, brokers, and wealth management firms globally.        </p\>
-        <IressExpander activator\="Was this helpful?"\>
-          <IressStack gap\="sm"\>
-            <IressInput rows\={2} placeholder\="Enter your feedback" />
-            <IressButton\>Provide feedback</IressButton\>
-          </IressStack\>
-        </IressExpander\>
-      </IressModal\>
-    </\>
-  );
-};
-interface LargeModalActionsProps {
-  isStart: boolean;
-  isFinal: boolean;
-  onBack: () \=> void;
-  onNext: () \=> void;
-  onCancel: () \=> void;
-  onFinish: () \=> void;
-}
-const LargeModalActions \= ({
-  isStart,
-  isFinal,
-  onBack,
-  onNext,
-  onCancel,
-  onFinish,
-}: LargeModalActionsProps) \=> (
-  <IressInline gap\="sm" horizontalAlign\={isFinal ? 'center' : 'left'}\>
-    {isFinal && (
-      <IressButton mode\="primary" onClick\={onFinish}\>
-        Finish      </IressButton\>
-    )}
-    {!isFinal && (
-      <IressButton mode\="primary" onClick\={onNext}\>
-        Next      </IressButton\>
-    )}
-    {!isStart && !isFinal && (
-      <IressButton onClick\={onBack}\>Previous</IressButton\>
-    )}
-    {!isFinal && (
-      <IressInline ml\="auto"\>
-        <IressButton onClick\={onCancel} mode\="tertiary"\>
-          Cancel        </IressButton\>
-      </IressInline\>
-    )}
-  </IressInline\>
-);
-const LargeModal \= () \=> {
-  const \[show, setShow\] \= useState(false);
-  const \[step, setStep\] \= useState(0);
-  return (
-    <\>
-      <IressCard
-        heading\="Large modal"
-        stretch
-        footer\={
-          <IressButton onClick\={() \=> setShow(true)}\>
-            View large modal example          </IressButton\>
-        }
-      \>
-        <p\>
-          Large modals facilitate sub-flows within a primary flow, allowing          users to focus on tasks that will impact the underlying screen once          the modal is closed (e.g., adding an item to a table or bulk uploading          items). They should be used sparingly and only when there is a direct          relationship to the underlying screen, where the action wouldn't          warrant a separate dedicated screen.        </p\>
-      </IressCard\>
-      <IressModal
-        width\="overlay.lg"
-        heading\="Upload from CSV"
-        footer\={
-          <LargeModalActions
-            isStart\={step \=== 0}
-            isFinal\={step \=== 2}
-            onBack\={() \=> setStep(step \- 1)}
-            onNext\={() \=> setStep(step + 1)}
-            onFinish\={() \=> setShow(false)}
-            onCancel\={() \=> setShow(false)}
-          />
-        }
-        disableBackdropClick
-        show\={show}
-        onShowChange\={setShow}
-        fixedFooter
-      \>
-        <IressStack gap\="lg" mb\="md"\>
-          <IressProgress max\={3} value\={step + 1} />
-          {step \=== 0 && (
-            <IressStack gap\="md"\>
-              <IressField label\="Select a file to upload"\>
-                <IressInput type\="file" accept\=".csv" />
-              </IressField\>
-              <IressDivider />
-              <IressField label\="Type of data"\>
-                <IressRichSelect
-                  options\={\[
-                    { label: 'Clients' },
-                    { label: 'Products' },
-                    { label: 'Transactions' },
-                  \]}
-                />
-              </IressField\>
-              <IressCheckbox\>Overwrite existing data</IressCheckbox\>
-            </IressStack\>
-          )}
-          {step \=== 1 && (
-            <IressTable
-              caption\="Preview of data to be uploaded"
-              columns\={\[
-                { key: 'import', label: 'Upload', width: '1%' },
-                { key: 'name', label: 'Name' },
-                { key: 'email', label: 'Email' },
-              \]}
-              rows\={\[
-                {
-                  import: <IressCheckbox defaultChecked />,
-                  name: 'Luke Skywalker',
-                  email: 'luke.skywalker@iress.com',
-                },
-                {
-                  import: <IressCheckbox defaultChecked />,
-                  name: 'Leia Skywalker',
-                  email: 'leia.skywalker@iress.com',
-                },
-                {
-                  import: <IressCheckbox defaultChecked />,
-                  name: 'Han Solo',
-                  email: 'han.solo@iress.com',
-                },
-              \]}
-            />
-          )}
-          {step \=== 2 && (
-            <IressStack gap\="md" horizontalAlign\="center"\>
-              <img
-                src\={modalIsDone}
-                alt\=""
-                style\={{ maxWidth: '200px', height: 'auto' }}
-              />
-              <h3\>3 items have been uploaded</h3\>
-              <IressCheckbox\>Send a copy to yourself</IressCheckbox\>
-            </IressStack\>
-          )}
-        </IressStack\>
-      </IressModal\>
-    </\>
-  );
-};
-export const ModalSizes \= () \=> (
-  <IressRow gutter\="spacing.700" verticalAlign\="stretch"\>
-    <IressCol\>
-      <SmallModal />
-    </IressCol\>
-    <IressCol\>
-      <MediumModal />
-    </IressCol\>
-    <IressCol\>
-      <LargeModal />
-    </IressCol\>
-  </IressRow\>
-);
-
-Copy
-
-### [](#responsive-size)Responsive size
-
-The `size` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
-
-If you set a responsive `size`, the modal becomes full width on screens smaller than the value you specified. For example, if you want to create a large modal on medium screens and above:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<IressModal size\={{ md: IressModal.Size.Lg }}\>
-
-Copy
-
-The modal will be full width on extra-small and small screens, and large width on medium, large and extra-large screens. This is the same as setting:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<IressModal size\={{ xs: IressModal.Size.Fullpage, md: IressModal.Size.Lg }}\>
-
-Copy
-
-You can override this behaviour by specifying a value for `xs` in your size object:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<IressModal size\={{ xs: IressModal.Size.Sm, md: IressModal.Size.Lg }}\>
-
-Copy
-
-Responsive modal
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const Story \= () \=> {
-  const { showModal } \= useModal();
-const MODAL\_ID \= 'storybook-modal';
-return (
-  <\>
-  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
-    Responsive modal  </IressButton\>
-  <IressModal
-    footer\=""
-    id\="storybook-modal"
-    width\={{
-      md: 'overlay.md',
-      xs: 'overlay.sm',
-      xxl: 'overlay.lg'
-    }}
-  \>
-    <CurrentBreakpoint />
-  </IressModal\>
-</\>
-);
-};
-  
-export const App \= () \=> (
-  <IressModalProvider\>
-        <Story />
-      </IressModalProvider\>
-);
-
-Copy
-
-### [](#disable-closing)Disable closing
-
-For instances where you require the user's full attention and you want to ensure they continue the current task before closing the modal, you can disable the backdrop and escape key using `disableBackdropClick` and/or hide the close button using `noCloseButton`.
-
-**Note:** As these options remove the default handling of the closing the modal, please ensure you provide a clear way for the user to close the modal.
-
-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 code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const Story \= () \=> {
-  const { showModal } \= useModal();
-const MODAL\_ID \= 'storybook-modal';
-return (
-  <IressStack gap\="md"\>
-  <IressButton
-    fluid
-    onClick\={() \=> showModal("disable-backdrop-click")}
-  \>
-    Disable backdrop click  </IressButton\>
-  <IressModal
-    disableBackdropClick
-    footer\="Footer slot"
-    id\="disable-backdrop-click"
-  \>
-    Modal content  </IressModal\>
-  <IressButton
-    fluid
-    onClick\={() \=> showModal("no-close-button")}
-  \>
-    No close button (please provide one, if you decide to hide the close button)  </IressButton\>
-  <IressModal
-    footer\={<IressButton onClick\={() \=> showModal("no-close-button", false)}\>Close</IressButton\>}
-    id\="no-close-button"
-    noCloseButton
-  \>
-    Modal content  </IressModal\>
-  <IressButton
-    fluid
-    onClick\={() \=> showModal("both")}
-  \>
-    Both (If you hide the close button, ensure you provide another way to close the modal)  </IressButton\>
-  <IressModal
-    disableBackdropClick
-    footer\={<IressButton onClick\={() \=> showModal("both", false)}\>Close</IressButton\>}
-    id\="both"
-    noCloseButton
-  \>
-    Modal content  </IressModal\>
-</IressStack\>
-);
-};
-  
-export const App \= () \=> (
-  <IressModalProvider\>
-        <Story />
-      </IressModalProvider\>
-);
-
-Copy
-
-[](#migrating-to-version-5)Migrating to version 5
--------------------------------------------------
-
-### [](#adding-the-provider)Adding the provider
-
-For your components to work as previously, you will need to set up the `IressModalProvider` at the root of your application. This will allow you to use the `useModal` hook to open and close modals from anywhere in your application using the ID of the modal.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-const App \= () \=> <IressModalProvider\>Rest of app here</IressModalProvider\>;
-
-Copy
-
-### [](#testing)Testing
-
-In version 5, modals are rendered conditionally, meaning they will not be available in the DOM until they are shown. This means that you will need to update your tests to account for this, as you cannot interact with its contents until it is shown, unlike in version 4.
-
-See below for an example in version 4 and version 5.
-
-Mode
-
-DiffOldNew
-
-<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>
-
-### [](#speed-up-tests)Speed up tests
-
-You can speed up tests by wrapping your tests in a provider that overrides the theme tokens for animations.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-const themeOverrides: Record<string, string\> \= {
-  '--iress-backdrop-transition-duration': '0s',
-};
-export const TestAppProvider \= ({ children }: PropsWithChildren) \=> {
-  const containerRef \= useRef<HTMLDivElement\>(null);
-  return (
-    <IressModalProvider container\={containerRef}\>
-      <div style\={themeOverrides} ref\={containerRef}\>
-        {children}
-      </div\>
-    </IressModalProvider\>
-  );
-};
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Use a modal when](#use-a-modal-when)
-*   [Avoid using a modal when](#avoid-using-a-modal-when)
-*   [Props](#props)
-*   [Controlling the modal](#controlling-the-modal)
-    *   [Using the show property](#using-the-show-property)
-    *   [Using the IressModalProvider](#using-the-iressmodalprovider)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Footer slot](#footer-slot)
-    *   [Fixed footer](#fixed-footer)
-    *   [Size](#size)
-    *   [Responsive size](#responsive-size)
-    *   [Disable closing](#disable-closing)
-*   [Migrating to version 5](#migrating-to-version-5)
-    *   [Adding the provider](#adding-the-provider)
-    *   [Testing](#testing)
-    *   [Speed up tests](#speed-up-tests)