@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

package/generated/docs/components-autocomplete-recipes-docs.md

@@ -1,104 +0,0 @@
-[](#recipes)Recipes
-===================
-
-Experimental
-------------
-
-This API is experimental. It may change in the future based on usage. The team is testing if these use cases exist and see if its worth maintaining this API. If you have any questions, concerns or feedback, please reach out to the design system team.
-
-[](#useautocompletesearch)`useAutocompleteSearch`
--------------------------------------------------
-
-`IressAutocomplete` uses the `useAutocompleteSearch` hook to provide search functionality. If provided an array of `LabelValueMeta`, it will search options based on the `label` property. To fully customise how to search the objects, pass a function instead.
-
-It has been exposed in case you need it in your application to provide custom search functionality.
-
-### [](#use-cases)Use cases
-
-1.  You want to provide filtering in a certain area of the application (eg. a table).
-
-| Name | Gender |
-| --- | --- |
-| Person 1 | Male |
-| Person 2 | Female |
-| Person 3 | Male |
-| Person 4 | Female |
-| Person 5 | Male |
-
-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 ALL\_ROWS \= \[...Array(5).keys()\].map((number) \=> ({
-  label: \`Person ${number + 1}\`,
-  gender: number % 2 ? 'Female' : 'Male',
-}));
-export const AutocompleteSearchTable \= () \=> {
-  const \[query, setQuery\] \= useState('');
-  const { debouncedQuery, loading, results } \= useAutocompleteSearch({
-    initialOptions: ALL\_ROWS,
-    options: ALL\_ROWS,
-    query,
-  });
-  const caption \= useMemo(() \=> {
-    if (debouncedQuery && !loading) {
-      return \`Results matching ${debouncedQuery}\`;
-    }
-    return loading ? 'Searching...' : '';
-  }, \[debouncedQuery, loading\]);
-  const columns \= useMemo(() \=> {
-    const labelKey \= debouncedQuery ? 'formattedLabel' : 'label';
-    return \[
-      { key: labelKey, label: 'Name' },
-      { key: 'gender', label: 'Gender' },
-    \];
-  }, \[debouncedQuery\]);
-  return (
-    <IressStack gutter\="md"\>
-      <IressInput
-        value\={query}
-        onChange\={(e) \=> setQuery(e.target.value)}
-        placeholder\="Search by name"
-      />
-      <IressTable
-        caption\={caption}
-        columns\={columns}
-        rows\={loading ? \[\] : results}
-        empty\={loading ? 'Loading...' : 'No results found'}
-        scope\="col"
-      />
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#parameters)Parameters
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| debounceThreshold | 
-\-
-
- | \- | \- |
-| initialOptions | 
-
-\-
-
- | \- | \- |
-| options | 
-
-\-
-
- | \- | \- |
-| query | 
-
-\-
-
- | \- | \- |
-
-On this page
-
-*   [useAutocompleteSearch](#useautocompletesearch)
-    *   [Use cases](#use-cases)
-    *   [Parameters](#parameters)

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

@@ -1,148 +0,0 @@
-[](#badge)Badge
-===============
-
-Overview
---------
-
-Badges are used to highlight an item's status for quick recognition
-
-badge
-
-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; }
-
-<IressBadge mode\="background-default"\>
-  badge
-</IressBadge\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#mode)Mode
-
-The `mode` prop controls the colour scheme of the badge. There are a range of options, including system and brand colours.
-
-successwarningdangerinfopositivenegativebackground-altbackground-default
-
-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; }
-
-<IressInline gutter\="sm"\>
-  <IressBadge mode\="success"\>
-    success  </IressBadge\>
-  <IressBadge mode\="warning"\>
-    warning  </IressBadge\>
-  <IressBadge mode\="danger"\>
-    danger  </IressBadge\>
-  <IressBadge mode\="info"\>
-    info  </IressBadge\>
-  <IressBadge mode\="positive"\>
-    positive  </IressBadge\>
-  <IressBadge mode\="negative"\>
-    negative  </IressBadge\>
-  <IressBadge mode\="background-alt"\>
-    background-alt  </IressBadge\>
-  <IressBadge mode\="background-default"\>
-    background-default  </IressBadge\>
-</IressInline\>
-
-Copy
-
-### [](#pill)Pill
-
-Setting the `pill` prop will render the badge with rounded corners. Often used for displaying numbers.
-
-successwarningdangerinfopositivenegativebackground-altbackground-default
-
-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; }
-
-<IressInline gutter\="sm"\>
-  <IressBadge
-    mode\="success"
-    pill
-  \>
-    success  </IressBadge\>
-  <IressBadge
-    mode\="warning"
-    pill
-  \>
-    warning  </IressBadge\>
-  <IressBadge
-    mode\="danger"
-    pill
-  \>
-    danger  </IressBadge\>
-  <IressBadge
-    mode\="info"
-    pill
-  \>
-    info  </IressBadge\>
-  <IressBadge
-    mode\="positive"
-    pill
-  \>
-    positive  </IressBadge\>
-  <IressBadge
-    mode\="negative"
-    pill
-  \>
-    negative  </IressBadge\>
-  <IressBadge
-    mode\="background-alt"
-    pill
-  \>
-    background-alt  </IressBadge\>
-  <IressBadge
-    mode\="background-default"
-    pill
-  \>
-    background-default  </IressBadge\>
-</IressInline\>
-
-Copy
-
-### [](#host)Host
-
-You can attach a badge to the top right of any component by passing the component into the badge's `host` prop.
-
-**Note:** This is for very simple use cases (eg. with a button or tab). For more complex use cases (eg. with a panel), it will be better if you position the badge yourself using CSS.
-
-Host button3
-
-Host tab99+
-
-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; }
-
-<IressInline gutter\="lg"\>
-  <IressBadge
-    host\={<IressButton\>Host button</IressButton\>}
-    mode\="success"
-    pill
-  \>
-    3  </IressBadge\>
-  <IressBadge
-    host\={<IressTab active label\="Host tab"/>}
-    mode\="success"
-    pill
-  \>
-    99+  </IressBadge\>
-</IressInline\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Mode](#mode)
-    *   [Pill](#pill)
-    *   [Host](#host)

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

@@ -1,362 +0,0 @@
-[](#button)Button
-=================
-
-Overview
---------
-
-A button is a clickable item used to perform an action.
-
-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; }
-
-<IressButton\>
-  Button
-</IressButton\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#modes)Modes
-
-The `mode` prop controls the visual appearance and priority of the button.
-
-*   **Primary:** Use for the main call to action. Limit to one per view.
-*   **Secondary:** Use for secondary calls to action.
-*   **Tertiary:** Use when you need extra affordance between your secondary actions.
-*   **Link:** Use when you need a button to appear like a link.
-*   **Danger:** Use for added affordance on destructive actions, such as deleting data.
-*   **Positive:** Use for buy/purchase actions.
-*   **Negative:** Use for sell actions.
-
-**Note:** Avoid setting `mode` to `link` when the only child of the button is an icon, as icons inside link buttons do not have an underline, and will have no visual indication that they are clickable.
-
-Primary buttonSecondary buttonTertiary buttonLink buttonDanger buttonPositive buttonNegative 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; }
-
-<div
-  className\="iress-u-inline iress--gutter--md"
-  style\={{
-    rowGap: 'var(--iress-g-spacing-md'
-  }}
-\>
-  <IressButton mode\="primary"\>
-    Primary button  </IressButton\>
-  <IressButton mode\="secondary"\>
-    Secondary button  </IressButton\>
-  <IressButton mode\="tertiary"\>
-    Tertiary button  </IressButton\>
-  <IressButton mode\="link"\>
-    Link button  </IressButton\>
-  <IressButton mode\="danger"\>
-    Danger button  </IressButton\>
-  <IressButton mode\="positive"\>
-    Positive button  </IressButton\>
-  <IressButton mode\="negative"\>
-    Negative button  </IressButton\>
-</div\>
-
-Copy
-
-### [](#types)Types
-
-The `type` property controls the behaviour of the button. It defaults to `button`, which is the best option for most situations, but can also be set to `submit` or `reset`. `submit` should be used for buttons that submit forms, and `reset` should be used if the button clears form data and resets the form to its original state.
-
-**Please note:** this differs from a standard HTML button element, where the `type` defaults to submit.
-
-Button buttonReset buttonSubmit 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; }
-
-<div className\="iress-u-inline iress--gutter--md"\>
-  <IressButton type\="button"\>
-    Button button  </IressButton\>
-  <IressButton type\="reset"\>
-    Reset button  </IressButton\>
-  <IressButton type\="submit"\>
-    Submit button  </IressButton\>
-</div\>
-
-Copy
-
-### [](#loading)Loading
-
-Loading buttons give the user an indication something is happening (eg. a form submission or extra content being loaded) after they have been triggered.
-
-The loading state can be activated by setting the `loading` prop to `true` and providing some `loadingText` for screenreaders to announce when in loading state (which defaults to Loading...).
-
-When the loading state is activated, any click events on the button are disabled.
-
-Button text
-
-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; }
-
-<div className\="iress-u-inline iress--gutter--md"\>
-  <IressButton loading\>
-    Button text  </IressButton\>
-  <IressButton loading />
-</div\>
-
-Copy
-
-### [](#buttons-as-links)Buttons as links
-
-The `href` prop allows you to create a link that looks like a button. When set, the component will render an HTML anchor element instead of an HTML button element. This can be useful when you want to increase the target area and visual weight of a link, without changing the markup.
-
-A good example of this is the Next and Previous links in a wizard layout. These should be HTML links (to tells the user that navigation will occur when clicked) but styling them as buttons makes them more prominent.
-
-You can also use the link specific props `target` and `rel`.
-
-If you need to use custom routing, take a look at the custom route slot documentation below.
-
-[This is a link (anchor tag)](https://www.iress.com/)
-
-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; }
-
-<IressButton
-  href\="https://www.iress.com/"
-  rel\="opener noreferrer"
-  target\="\_blank"
-\>
-  This is a link (anchor tag)
-</IressButton\>
-
-Copy
-
-### [](#delete-confirmation)Delete confirmation
-
-Make sure that the user understands the consequences of clicking the button
----------------------------------------------------------------------------
-
-You may want to add a confirmation step to prevent accidental data loss if the action is irreversible.
-
-The confirmation step should be a modal with a simple message, as with the example below. Use a delete button for the modal's primary call to action, and use a secondary button for the cancel action.
-
-If you're using a heading, ensure that it has an appropriate heading level to match the document structure. You should use a danger variant of the `IressText` element, with the element prop set to the appropriate heading level.
-
-Delete button with confirm
-
-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; }
-
-<IressButton
-  mode\="danger"
-  onClick\={() \=> {}}
-\>
-  Delete button with confirm
-</IressButton\>
-
-Copy
-
-### [](#fluid)Fluid
-
-If the `fluid` prop is set to true, the button will expand to be 100% of the width of its container.
-
-The `fluid` prop can also be set to a breakpoint size, which means the button will be fluid up until its breakpoint is passed.
-
-Please resize your screen to see how the fluid value changes. Current breakpoint: **xl** (1200px and above).
-
-Fluid: trueFluid: xsFluid: smFluid: mdFluid: lgFluid: xlFluid: xxl
-
-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; }
-
-<div
-  className\="iress-u-inline iress--gutter--md"
-  style\={{
-    rowGap: 'var(--iress-g-spacing-md'
-  }}
-\>
-  <IressText element\="p"\>
-    Please resize your screen to see how the fluid value changes. Current breakpoint:{' '}
-    <CurrentBreakpoint renderLabel\="and-above" />
-    .  </IressText\>
-  <IressButton fluid\>
-    Fluid: true  </IressButton\>
-  <IressButton fluid\="xs"\>
-    Fluid: xs  </IressButton\>
-  <IressButton fluid\="sm"\>
-    Fluid: sm  </IressButton\>
-  <IressButton fluid\="md"\>
-    Fluid: md  </IressButton\>
-  <IressButton fluid\="lg"\>
-    Fluid: lg  </IressButton\>
-  <IressButton fluid\="xl"\>
-    Fluid: xl  </IressButton\>
-  <IressButton fluid\="xxl"\>
-    Fluid: xxl  </IressButton\>
-</div\>
-
-Copy
-
-### [](#wrapping-text)Wrapping text
-
-Button text will wrap on to a new line if there's not enough space for the text to sit on a single line. If you want to prevent the text from wrapping, you can set the `noWrap` prop to `true`.
-
-If your button contains a lot of text, the text may wrap on to more than one line. You can manage this on a case by case basis by setting a minimum width on your button via CSS if you need to.
-
-Button with lots of text content that will wrap (default behaviour)
-
-Button with lots of text content and a minimum width set via CSS
-
-Button with lots of text content with the noWrap prop set to true
-
-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; }
-
-<div
-  style\={{
-    width: 250
-  }}
-\>
-  <p\>
-    <IressButton\>
-      Button with lots of text content that will wrap (default behaviour)    </IressButton\>
-  </p\>
-  <p\>
-    <IressButton
-      style\={{
-        minWidth: 300
-      }}
-    \>
-      Button with lots of text content and a minimum width set via CSS    </IressButton\>
-  </p\>
-  <p\>
-    <IressButton noWrap\>
-      Button with lots of text content with the noWrap prop set to true    </IressButton\>
-  </p\>
-</div\>
-
-Copy
-
-### [](#slot-props)Slot props
-
-Use the slots to correctly position icons or badges inside buttons.
-
-*   **Prepend** - Places the element before the text
-*   **Append** - Places the element after the text
-
-The iconOnly slot from previous versions of IDS has been deprecated. Please use the default slot instead.
-
-Prepend iconNewPrepend badge
-
-Append iconAppend badge+999
-
-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; }
-
-<\>
-  <p className\="iress-u-inline iress--gutter--md"\>
-    <IressButton prepend\={<IressIcon name\="home" />}\>
-      Prepend icon    </IressButton\>
-    <IressButton prepend\={<IressBadge mode\="info"\>New</IressBadge\>}\>
-      Prepend badge    </IressButton\>
-  </p\>
-  <p className\="iress-u-inline iress--gutter--md"\>
-    <IressButton append\={<IressIcon name\="home" />}\>
-      Append icon    </IressButton\>
-    <IressButton append\={<IressBadge mode\="info"\>+999</IressBadge\>}\>
-      Append badge    </IressButton\>
-  </p\>
-  <p className\="iress-u-inline iress--gutter--md"\>
-    <IressButton\>
-      <IressIcon name\="home" />
-    </IressButton\>
-  </p\>
-</\>
-
-Copy
-
-### [](#other-attributes)Other attributes
-
-Any other attributes you pass to the component will be spread to the underlying HTML button or anchor element.
-
-This allows you to add your own aria attributes, or data attributes for analytics, as an example.
-
-**Note:** The `attrs` prop has been deprecated, and will be removed in a future version. Please pass the attributes directly to the component instead.
-
-Button text
-
-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; }
-
-<IressButton data-analytics-id\="test"\>
-  Button text
-</IressButton\>
-
-Copy
-
-### [](#download-button)Download button
-
-Whilst `IressButton` does not have a `download` property, it can be configured quite easily.
-
-Please see the example below. The use of an icon is optional.
-
-[Download logo](assets/iress-logo.png)
-
-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; }
-
-<IressButton
-  download
-  href\="assets/iress-logo.png"
-  prepend\={<IressIcon name\="download" />}
-\>
-  Download logo
-</IressButton\>
-
-Copy
-
-[](#iressclosebutton)`IressCloseButton`
----------------------------------------
-
-`IressCloseButton` is a special variant of `IressButton` that is used to execute a close action. It is used in modals, slideouts, and other components that require a close button.
-
-It has one additional prop, `screenReaderText`, which is used to provide a screen reader only label for the close 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; }
-
-<IressCloseButton
-  append\=""
-  prepend\=""
-/>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Modes](#modes)
-    *   [Types](#types)
-    *   [Loading](#loading)
-    *   [Buttons as links](#buttons-as-links)
-    *   [Delete confirmation](#delete-confirmation)
-    *   [Fluid](#fluid)
-    *   [Wrapping text](#wrapping-text)
-    *   [Slot props](#slot-props)
-    *   [Other attributes](#other-attributes)
-    *   [Download button](#download-button)
-*   [IressCloseButton](#iressclosebutton)

package/generated/docs/components-button-recipes-docs.md

@@ -1,76 +0,0 @@
-[](#recipes)Recipes
-===================
-
-[](#using-with-react-router)Using with React Router
----------------------------------------------------
-
-To use the `IressButton` component with React Router, you can use the `useHref` hook to get the `href` prop to pass to the `IressButton` component.
-
-Learn more about the `useHref` hook in the [React Router documentation](https://reactrouter.com/docs/en/v6/api#usehref).
-
-\[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 } from '@iress/components';
-import { useHref } from 'react-router-dom';
-const ReactRouterButton \= () \=> {
-  const href \= useHref('/path/to/page');
-  return <IressButton href\={href}\>Go to page</IressButton\>;
-};
-
-Copy
-
-[](#using-with-nextjs)Using with Next.js
-----------------------------------------
-
-To use the `IressButton` component with Next.js, you can use the `legacyBehavior` and `passHref` props to pass the `href` prop to the `IressButton` component.
-
-Learn more about the `Link` component in the [Next.js documentation](https://nextjs.org/docs/pages/api-reference/components/link#nesting-a-functional-component).
-
-\[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 } from '@iress/components';
-import Link from 'next/link';
-const NextButton \= () \=> {
-  return (
-    <Link href\="/path/to/page" legacyBehavior passHref\>
-      <IressButton\>Go to page</IressButton\>
-    </Link\>
-  );
-};
-
-Copy
-
-On this page
-
-*   [Using with React Router](#using-with-react-router)
-*   [Using with Next.js](#using-with-nextjs)