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

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

@@ -1,341 +0,0 @@
-[](#tab-set)Tab Set
-===================
-
-Overview
---------
-
-Tabs are used to display modular pieces of related data that do not need to be compared or accessed simultaneously.
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-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; }
-
-<IressTabSet\>
-  <IressTab label\="Address"\>
-    Address information goes here  </IressTab\>
-  <IressTab label\="Employment"\>
-    Employment information goes here  </IressTab\>
-  <IressTab label\="History"\>
-    Medical history goes here  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-The `IressTabSet` is a wrapper for `IressTab` components to make a up a set of tabs.
-
-**Note:** The `mapTabs` helper function, originally used to map tabs to its sub-components, is now deprecated. Instead, you can use `array.map` to map the tabs to `IressTab`.
-
-### [](#navigation)Navigation
-
-You can use the `IressTabSet` component to create tab navigation to control an area of the page, or even navigate between different pages.
-
-Address
-
-Employment
-
-History
-
-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; }
-
-<IressTabSet\>
-  <IressTab label\="Address" />
-  <IressTab label\="Employment" />
-  <IressTab label\="History" />
-</IressTabSet\>
-
-Copy
-
-### [](#with-children-prop)With `children` prop
-
-Using the `children` prop will automatically inject the content as a tab panel when active, along with appropriate attributes for accessibility, ensuring the tab and its associated panel can be navigated by screenreaders.
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-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; }
-
-<IressTabSet\>
-  <IressTab label\="Address"\>
-    Address information goes here  </IressTab\>
-  <IressTab label\="Employment"\>
-    Employment information goes here  </IressTab\>
-  <IressTab label\="History"\>
-    Medical history goes here  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#default-selected)Default selected
-
-If you would like to set a tab by default, use the `defaultSelected` prop.
-
-Address
-
-Employment
-
-History
-
-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; }
-
-<IressTabSet defaultSelected\={2}\>
-  <IressTab label\="Address" />
-  <IressTab label\="Employment" />
-  <IressTab label\="History" />
-</IressTabSet\>
-
-Copy
-
-### [](#controlled)Controlled
-
-You can use state to control the active tab by setting the `selected` property to which tab you would like to select. This should be the `value` of the tab you would like to select, or if you do not use the `value` prop, it's index.
-
-Change to last tab
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-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,
-  IressStack,
-  IressTab,
-  IressTabSet,
-  IressTabSetProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const TabsUsingState \= () \=> {
-  const \[selected, setSelected\] \= useState<number\>();
-  return (
-    <IressStack gutter\={IressStack.Gutter.Md}\>
-      <IressButton onClick\={() \=> setSelected(selected \=== 2 ? 0 : 2)}\>
-        {selected \=== 2 ? \`Back to first tab\` : \`Change to last tab\`}
-      </IressButton\>
-      <IressTabSet
-        
-        selected\={selected}
-        onChange\={({ index }) \=> setSelected(index)}
-      \>
-        <IressTab label\="Address"\>Address information goes here</IressTab\>
-        <IressTab label\="Employment"\>Employment information goes here</IressTab\>
-        <IressTab label\="History"\>Medical history goes here</IressTab\>
-      </IressTabSet\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#layout)Layout
-
-`IressTabSet` controls the layout of the tab buttons. These will always appear at the top of the tab container, and can be aligned to the left (default), centrally or to the right via the `layout` prop.
-
-top-left
---------
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-top-center
-----------
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-top-right
----------
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-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; }
-
-<IressStack gutter\="md"\>
-  <IressPanel\>
-    <IressText element\="h2"\>
-      top-left    </IressText\>
-    <IressTabSet layout\="top-left"\>
-      <IressTab label\="Address"\>
-        Address information goes here      </IressTab\>
-      <IressTab label\="Employment"\>
-        Employment information goes here      </IressTab\>
-      <IressTab label\="History"\>
-        Medical history goes here      </IressTab\>
-    </IressTabSet\>
-  </IressPanel\>
-  <IressPanel\>
-    <IressText element\="h2"\>
-      top-center    </IressText\>
-    <IressTabSet layout\="top-center"\>
-      <IressTab label\="Address"\>
-        Address information goes here      </IressTab\>
-      <IressTab label\="Employment"\>
-        Employment information goes here      </IressTab\>
-      <IressTab label\="History"\>
-        Medical history goes here      </IressTab\>
-    </IressTabSet\>
-  </IressPanel\>
-  <IressPanel\>
-    <IressText element\="h2"\>
-      top-right    </IressText\>
-    <IressTabSet layout\="top-right"\>
-      <IressTab label\="Address"\>
-        Address information goes here      </IressTab\>
-      <IressTab label\="Employment"\>
-        Employment information goes here      </IressTab\>
-      <IressTab label\="History"\>
-        Medical history goes here      </IressTab\>
-    </IressTabSet\>
-  </IressPanel\>
-</IressStack\>
-
-Copy
-
-### [](#lazy-loading)Lazy Loading
-
-As of version 5, tabs can be lazy loaded. However, to ensure they work correctly you will need to set the `value` prop on each `IressTab`, as shown in this example.
-
-Toggle tabs
-
-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,
-  IressStack,
-  IressTab,
-  IressTabSet,
-  IressTabSetProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const TabsLazyLoading \= () \=> {
-  const \[loadTabs, setLoadTabs\] \= useState<boolean\>();
-  return (
-    <IressStack gutter\="md"\>
-      <IressButton onClick\={() \=> setLoadTabs(!loadTabs)}\>
-        Toggle tabs      </IressButton\>
-      <IressTabSet {...{
-  defaultSelected: 'medical',
-}}\>
-        {loadTabs && (
-          <\>
-            <IressTab label\="Address" value\="address"\>
-              Address information goes here            </IressTab\>
-            <IressTab label\="Employment" value\="employment"\>
-              Employment information goes here            </IressTab\>
-            <IressTab label\="Medical history" value\="medical"\>
-              Medical history goes here            </IressTab\>
-          </\>
-        )}
-      </IressTabSet\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#badges-and-icons)Badges and icons
-
-You can add rich content into the `label` of the `IressTab` to customise the tab further.
-
-Some common examples include:
-
-*   Adding a badge to the tab button.
-*   Adding icons to the tab button.
-
-Notes:
-
-*   For best accessibility, the `IressTab` component will find the first focusable element inside the custom label to add the tab role.
-
-Address
-
-3
-
-Employment
-
-History
-
-Address information goes here
-
-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; }
-
-<IressTabSet\>
-  <IressBadge
-    host\={<IressTab label\="Address"\>Address information goes here</IressTab\>}
-    mode\="info"
-    pill
-  \>
-    3  </IressBadge\>
-  <IressTab label\={<IressInline gutter\="sm"\><IressIcon name\="user" />{' '}Employment</IressInline\>}\>
-    Employment information goes here  </IressTab\>
-  <IressTab label\="History"\>
-    Medical history goes here  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Navigation](#navigation)
-    *   [With children prop](#with-children-prop)
-*   [Examples](#examples)
-    *   [Default selected](#default-selected)
-    *   [Controlled](#controlled)
-    *   [Layout](#layout)
-    *   [Lazy Loading](#lazy-loading)
-    *   [Badges and icons](#badges-and-icons)

package/generated/docs/components-tabset-tab-docs.md

@@ -1,86 +0,0 @@
-[](#tab)Tab
-===========
-
-Overview
---------
-
-A tab is an interactive element that controls the display of other content, usually a panel
-
-Tab
-
-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; }
-
-<IressTab label\="Tab" />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#active)Active
-
-The tab can be set to active using the `active` prop.
-
-**Note:** If you are using `IressTabSet`, you should use the `selected` prop on the `IressTabSet` to set the active state of its `<IressTab />` children, as the `active` prop will be ignored.
-
-Tab
-
-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; }
-
-<IressTab
-  active
-  label\="Tab"
-/>
-
-Copy
-
-### [](#value)Value
-
-A tab can have a unique value set to it, used to determine its active state in a `IressTabSet` component. The value is not visible to end users.
-
-Tab with value
-
-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; }
-
-<IressTabSet\>
-  <IressTab
-    label\="Tab with value"
-    value\="some-tab-name"
-  />
-</IressTabSet\>
-
-Copy
-
-### [](#panel)Panel
-
-A tab can set its `children` when used inside an `IressTabSet` component, and it will render as its panel. If the tab is not used inside an `IressTabSet` component, `children` will not render.
-
-Tab
-
-Some content for this tab
-
-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; }
-
-<IressTabSet\>
-  <IressTab label\="Tab"\>
-    Some content for this tab  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Active](#active)
-    *   [Value](#value)
-    *   [Panel](#panel)

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

@@ -1,115 +0,0 @@
-[](#tag)Tag
-===========
-
-Overview
---------
-
-Tags represent individual units in a group of selected items.
-
-Tag
-
-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; }
-
-<IressTag\>
-  Tag
-</IressTag\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#deleting-tags)Deleting tags
-
-The delete button will not automatically remove the tag from the screen. Instead it will trigger the `onDelete` event. Use this event within your app to handle the display of tags.
-
-The text a screen reader will announce defaults to "Delete" but can be changed using the `deleteButtonText` prop.
-
-Tag 1
-
-Tag 2
-
-Tag 3
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressButton,
-  IressButtonProps,
-  IressIcon,
-  IressInline,
-  IressTag,
-  IressTagProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const TagDeletion \= (args: IressTagProps) \=> {
-  const \[tags, setTags\] \= useState(\['Tag 1', 'Tag 2', 'Tag 3'\]);
-  const handleAdd: IressButtonProps\['onClick'\] \= () \=> {
-    setTags(\[...tags, \`Tag ${tags.length + 1}\`\]);
-  };
-  const handleDelete: IressTagProps\['onDelete'\] \= (tag) \=> {
-    setTags((existingTags) \=>
-      existingTags.filter((existingTag) \=> existingTag !== tag),
-    );
-  };
-  return (
-    <IressInline gutter\="sm" verticalAlign\="middle"\>
-      {tags.map((tag) \=> (
-        <IressTag
-          {...args}
-          key\={tag}
-          deleteButtonText\={args.deleteButtonText ?? \`Delete ${tag}\`}
-          onDelete\={handleDelete}
-        \>
-          {tag}
-        </IressTag\>
-      ))}
-      <IressButton onClick\={handleAdd}\>
-        <IressIcon name\="plus" />
-      </IressButton\>
-    </IressInline\>
-  );
-};
-
-Copy
-
-[](#iresstaginput)IressTagInput
--------------------------------
-
-* * *
-
-Beta
-
-New component
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-`IressTagInput` allows you to manage multiple tags, and is often used for managing email addresses, domains or other simple metadata that does not have to be selected from a list.
-
-If you need to manage tags that are selected from a existing list, use `IressRichSelect` with the `multiple` prop.
-
-Tag
-
-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; }
-
-<IressTagInput
-  defaultValue\={\[
-    'Tag'
-  \]}
- />
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Deleting tags](#deleting-tags)
-*   [IressTagInput](#iresstaginput)

package/generated/docs/components-toaster-toast-docs.md

@@ -1,157 +0,0 @@
-[](#toast)Toast
-===============
-
-Overview
---------
-
-Toast are a compact way to provide users with important information, usually within a toaster.
-
-This documentation is for the standalone `IressToast` component, and has been exposed for complex use cases where you are unable to use the `useToaster` hook. For most use cases, please use the hook and provider documented at [Toaster documentation](./?path=/docs/components-toaster--docs).
-
-Error
------
-
-Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-
-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; }
-
-<IressToast
-  heading\="Error"
-  status\="error"
-\>
-  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-</IressToast\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#status)Status
-
-The toast offers three status that set a distinctive colour and icon. They can be set using the `status` prop. Their different use cases are described here.
-
-Success
--------
-
-Use to communicate that an action has been successfully completed, such as saving changes in a form.
-
-Error
------
-
-Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.
-
-Info
-----
-
-Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.
-
-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; }
-
-<IressStack gutter\="lg"\>
-  <IressToast
-    heading\="Success"
-    status\="success"
-  \>
-    Use to communicate that an action has been successfully completed, such as saving changes in a form.  </IressToast\>
-  <IressToast
-    heading\="Error"
-    status\="error"
-  \>
-    Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.  </IressToast\>
-  <IressToast
-    heading\="Info"
-    status\="info"
-  \>
-    Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.  </IressToast\>
-</IressStack\>
-
-Copy
-
-### [](#heading)Heading
-
-Use the `heading` prop to add a header to the toast. The header can be any component you like, but it is designed to support a simple heading element. If provided a string, it will display a `<h2 />` element with the string as its content.
-
-**Note:** `headingText` and `headingLevel` props have been replaced with the `heading` render prop to give you more control over the `heading` element and its content. To use the previous behaviour, you can pass a string which will automatically create a `h2` element, or pass a `h*` element with the text as a child.
-
-Toast with a h2 tag
--------------------
-
-Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-
-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; }
-
-<IressToast
-  heading\={<h2\>Toast with a h2 tag</h2\>}
-  status\="error"
-\>
-  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-</IressToast\>
-
-Copy
-
-### [](#footer)Footer
-
-The `footer` prop allows for content to be placed below the header and body of the alert. This can be useful for displaying call to actions.
-
-Error
------
-
-Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-
-Try Again
-
-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; }
-
-<IressToast
-  actions\={<IressButton key\="test" mode\="danger"\>Try Again</IressButton\>}
-  heading\="Error"
-  status\="error"
-\>
-  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-</IressToast\>
-
-Copy
-
-### [](#dismiss-button)Dismiss Button
-
-Dismiss Button is on the top right corner and it's showing/hiding based on `dismissible` prop.
-
-**Note:** When it's `true`, `onClose` event is going to be available.
-
-Information
------------
-
-Information toast with dismiss button
-
-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; }
-
-<IressToast
-  dismissible
-  heading\="Information"
-  status\="info"
-\>
-  Information toast with dismiss button
-</IressToast\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Status](#status)
-    *   [Heading](#heading)
-    *   [Footer](#footer)
-    *   [Dismiss Button](#dismiss-button)