@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/.ai/components/popover.md

@@ -0,0 +1,216 @@
+# Popover
+
+A popover is panel that is toggled on/off by an activator button or text input. The panel is positioned relative to its activator element.
+
+> **Component:** `import { IressPopover } from '@iress-oss/ids-components'`
+> **Storybook:** [Popover in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-popover--docs)
+
+## Quick Start
+
+```tsx
+import { IressPopover } from '@iress-oss/ids-components';
+
+<IressPopover>
+  basic
+</IressPopover>
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Usage
+
+### Activator
+
+For the popover to render, the `activator` property is required. It is the element used to trigger the popover, and works best with an `IressButton`.
+
+Anything added as the children of the `IressPopover` component will be displayed in the popover panel.
+
+```tsx
+<IressPopover>
+  basic
+</IressPopover>
+```
+
+[View "Activator" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-popover--activator)
+
+### The `show` property
+
+You can use state to control the popover by setting the `show` property to `true` or `false`. To sync your state with the popover, you can use the `onActivated` and `onDeactivated` prop.
+
+```tsx
+<PopoverUsingState />
+```
+
+[View "ShowWithState" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-popover--show-with-state)
+
+## Behaviour
+
+- The popover is opened when the activator is pressed
+- Once activated, the popover will set focus to popover content
+- When the activator is pressed whilst the popover is open, it will close
+- When the escape key is pressed while it is open, it will close
+- When the popover panel loses focus, it will close
+
+## Examples
+
+### Align
+
+The popover panel can be aligned in one of 12 positions relative to the activator element. The default value is `auto`.
+
+The popover panel's position will change dynamically based on the amount of space available in it's container window, so that it doesn't overflow.
+
+```tsx
+<div style={{ padding: '80px 150px' }}>
+<IressStack gap="md">
+<IressInline horizontalAlign="center" gap="sm">
+<IressPopover activator={
+<IressTooltip
+align="bottom-start"
+tooltipText="Tooltips and popovers can go together if needed!"
+>
+<IressButton>top-start</IressButton>
+</IressTooltip>
+}
+align="top-start"
+/>
+<IressPopover activator={<IressButton>top</IressButton>}
+align="top"
+/>
+<IressPopover activator={<IressButton>top-end</IressButton>}
+align="top-end"
+/>
+</IressInline>
+<IressInline horizontalAlign="between">
+<IressStack gap="sm">
+<IressInline horizontalAlign="left">
+<IressPopover activator={<IressButton>left-start</IressButton>}
+align="left-start"
+/>
+</IressInline>
+<IressInline horizontalAlign="left">
+<IressPopover activator={<IressButton>left</IressButton>}
+align="left"
+/>
+</IressInline>
+<IressInline horizontalAlign="left">
+<IressPopover activator={<IressButton>left-end</IressButton>}
+align="left-end"
+/>
+</IressInline>
+</IressStack>
+<IressStack gap="sm">
+<IressInline horizontalAlign="right">
+<IressPopover activator={<IressButton>right-start</IressButton>}
+align="right-start"
+/>
+</IressInline>
+<IressInline horizontalAlign="right">
+<IressPopover activator={<IressButton>right</IressButton>}
+align="right"
+/>
+</IressInline>
+<IressInline horizontalAlign="right">
+<IressPopover activator={<IressButton>right-end</IressButton>}
+align="right-end"
+/>
+</IressInline>
+</IressStack>
+</IressInline>
+<IressInline horizontalAlign="center" gap="sm">
+<IressPopover activator={<IressButton>bottom-start</IressButton>}
+align="bottom-start"
+/>
+<IressPopover activator={<IressButton>bottom</IressButton>}
+align="bottom"
+/>
+<IressPopover activator={<IressButton>bottom-end</IressButton>}
+align="bottom-end"
+/>
+</IressInline>
+</IressStack>
+</div>
+```
+
+[View "Align" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-popover--align)
+
+### Width
+
+Occasionally, you may have more information to display than the width set by the theme can comfortably show.
+
+```tsx
+<IressPopover contentStyle={{ style: { maxWidth: '30rem' } }} />
+```
+
+[View "Width" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-popover--width)
+
+### Overflow
+
+Popovers can contain a wide variety of different content, including components that use popovers themselves (like Combobox). This can cause issues with overflowing content, so by default we allow popovers to grow in height based on their content.
+
+If you need to fix the height of a popover, you can set a maximum height using the `maxHeight` and `overflowY` css on your popover's `contentStyle` prop.
+
+```tsx
+<IressInline gap="md">
+<IressPopover activator={<IressButton>Normal popover</IressButton>}
+/>
+<IressPopover activator={<IressButton>Fixed height popover</IressButton>}
+contentStyle={{ scrollable: 'y', style: { maxHeight: '200px' } }}
+/>
+</IressInline>
+```
+
+[View "Overflow" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-popover--overflow)
+
+### Container
+
+By default, the popover will be rendered where its parent is rendered. If you need to render the popover in a different container, you can use the `container` prop.
+
+**Note:** If the `container` doesn’t exist when the portal is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available.
+
+This will be the case when you are rendering into its parent container, which is not yet rendered when the popover is mounted. The example below shows how to use state instead of a reference to change where the popover is rendered.
+
+```tsx
+<PopoverParentContainer />
+```
+
+[View "ParentContainer" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-popover--parent-container)
+
+## `IressInputPopover`
+
+If you need a popover that is triggered by input changes, you can use the `IressInputPopover` component. This component has an additional `minLength` prop that allows you to specify the minimum number of characters required before the popover is shown.
+
+### Behaviour
+
+Input popovers work slightly different to normal popovers, where the focus inside the popover is **virtual**. This means that the popover content will act as if it is in focus, but the input will still be the actual focus.
+
+- The popover is opened when the input has content that meets the `minLength` requirement
+- The popover is closed when the input no longer meets the `minLength` requirement
+- Once activated, virtual focus will be set to the popover content if it contains a menu (e.g. items will highlight as if in focus, but the user can still type in the input)
+- When the `minLength` is 0, it will open on focus
+- When the escape key is pressed while it is open, it will close
+- When the input loses focus, it will close
+
+```tsx
+<IressInputPopover>
+  basic
+</IressInputPopover>
+```
+
+[View "Activator" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-input-popover--activator)
+
+## Props
+
+- **Type:** `IressPopoverProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Popover/Popover.d.ts`
+
+```typescript
+import type { IressPopoverProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-popover--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-popover--docs)*

package/.ai/components/progress.md

@@ -0,0 +1,103 @@
+# Progress
+
+A progress component is used to indicate to a user the completion of a set of tasks or a process.
+
+> **Component:** `import { IressProgress } from '@iress-oss/ids-components'`
+> **Storybook:** [Progress in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-progress--docs)
+
+## Quick Start
+
+```tsx
+import { IressProgress } from '@iress-oss/ids-components';
+
+<IressProgress min={10} max={30} value={20} />
+```
+
+import {
+  ComponentOverview,
+  ComponentExample,
+} from '@iress-oss/ids-storybook-config';
+
+## Usage
+
+Progress shows how far through a task or operation you are in a graphical way. The simplest way to use it to set the `value` to specify how much of the task the user has completed, relative to the `max` value (which defaults to 100).
+
+### Calculation to convert value in to width
+
+The following calculation is used to derive the width percentage:
+
+```
+Math.round(
+    ((this.value - this.min) / (this.max - this.min)) * 100,
+)
+```
+
+This caters for those scenarios where the `min` or `max` values change.
+
+### Boundary limits
+
+There is a danger that the value can exceed the boundaries set in the `min` and `max` values, and cause the percentage width of the bar to overflow the indicator. To prevent this the following rules are applied:
+
+- If the `value` is less than the `min` prop, it is reset to the `min` prop;
+- If the `value` is more than the `max` prop, it is reset to the `max` prop;
+
+### Section Title
+
+The `section-title` prop is used by assistive technologies and allows you to tailor the message announced when the progress component is selected. This could be to add extra context about where the user is in a process or section with a multi-part form.
+
+### Use of tokens
+
+The message supports the use of two tokens within the announcement, which are replaced when the component is rendered. They are:
+
+- `{{current}}` - replaced with the `value`;
+- `{{max}}` - replaced with the maximum limit;
+
+For example, if the component has been implemented with a max of 10, a value of 6 has been set, and the default section title, the screen reader will announce:
+
+```
+Step 6 of 10
+```
+
+## Examples
+
+### Progress variants
+
+The following examples demonstrate different ways to use the Progress component:
+
+- **Empty state**: Shows a progress bar at 0% completion
+- **Partial progress**: Shows a progress bar with partial completion (using custom min/max values)
+- **With section title**: Uses the `sectionTitle` prop with tokens to display "Step X of Y"
+- **With background image**: Demonstrates using a custom background image for visual interest
+
+```tsx
+<IressStack gap="md">
+<IressProgress min={0} max={50} value={0} />
+<IressProgress min={10} max={30} value={20} />
+<IressProgress min={0}
+max={50}
+value={30}
+sectionTitle="Step {{current}} of {{max}}"
+/>
+<IressProgress min={0}
+max={100}
+value={75}
+backgroundImage="https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=2858&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+/>
+</IressStack>
+```
+
+[View "ProgressExamples" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-progress--progress-examples)
+
+## Props
+
+- **Type:** `IressProgressProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Progress/Progress.d.ts`
+
+```typescript
+import type { IressProgressProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-progress--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-progress--docs)*

package/.ai/components/provider.md

@@ -0,0 +1,46 @@
+# Provider
+
+Provider is a component that sets up the Iress Design System for your application. It ensures that the design system is correctly configured and ready to use.
+
+> **Component:** `import { IressProvider } from '@iress-oss/ids-components'`
+> **Storybook:** [Provider in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-provider--docs)
+
+## Quick Start
+
+```tsx
+import { IressProvider } from '@iress-oss/ids-components';
+
+<IressProvider />
+```
+
+## Usage
+
+The design system provider automates some set-up tasks for you, including:
+
+- Adding the icon fonts and CSS variables to the document head
+- Consistent container handling for providers, if you need the modals, slideouts and toasts rendered in a specific area (common with micro frontends)
+
+In most cases, you should wrap the entire application with the `IressProvider` component. This will ensure that the design system is set up correctly and consistently across the application.
+
+```tsx
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <IressProvider>
+    <App />
+  </IressProvider>,
+);
+```
+
+## Props
+
+- **Type:** `IressProviderProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Provider/Provider.d.ts`
+
+```typescript
+import type { IressProviderProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-provider--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-provider--docs)*

package/.ai/components/radio-group.md

@@ -0,0 +1,170 @@
+# RadioGroup
+
+A radio group is a group of radio buttons that allows the user to select one option from multiple options, where all options are visible.
+
+> **Component:** `import { IressRadioGroup } from '@iress-oss/ids-components'`
+> **Storybook:** [RadioGroup in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-radio-group--docs)
+
+## Quick Start
+
+```tsx
+import { IressRadioGroup } from '@iress-oss/ids-components';
+
+<IressRadioGroup name="survey" />
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Radio children
+
+Individual radio buttons can be passed directly into `IressRadioGroup`.
+
+**Note:** The `mapRadioGroupOptions` helper function, originally used to map options to `IressRadio` components, is now deprecated. Instead, you can use `array.map` to map the options to `IressRadio` components.
+
+[View "RadioChildren" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio-group--radio-children)
+
+### Radio selection
+
+The default checked state of the radio children should always be set using the `value` prop. Sometimes you may wish to use the `IressRadioGroup` as an "uncontrolled" component - for example, because you are using a third party form library that requires it. In this case, simply use `defaultValue` instead of `value`.
+
+**Note:** The `value` prop on the `IressRadioGroup` component will always override the `checked` state of the `IressRadio` children.
+
+```tsx
+<IressRadioGroup defaultValue="newspaper" />
+```
+
+[View "RadioSelection" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio-group--radio-selection)
+
+### Layout
+
+The layout prop controls how the radio group is displayed and can have three basic layouts:
+
+- **stack (Default):** Radio buttons are laid out vertically. Labels are only as wide as their text.
+- **block:** Same as Stack, but labels take up the full width of the container.
+- **inline:** Radio buttons are laid out horizontally. Labels are only as wide as their text.
+- **inlineFlex:** Radio buttons are laid out horizontally. The container is only as wide as its contents.
+- **inlineEqualWidth:** Radio buttons are laid out horizontally. Labels take up an equal amount of space in the container.
+
+> [!NOTE]
+> **Note:**
+>
+> If using any of the inline* props within a `Field` component, the `Field` also
+>   needs the inline prop to be set for the inline layouts to take effect.
+
+```tsx
+<IressStack gap="md">
+<IressText>
+<h3>block (default)</h3>
+<IressRadioGroup layout="block" />
+</IressText>
+<IressText>
+<h3>inline</h3>
+<IressRadioGroup layout="inline" />
+</IressText>
+<IressText>
+<h3>inlineEqualWidth</h3>
+<IressRadioGroup layout="inlineEqualWidth" />
+</IressText>
+<IressText>
+<h3>inlineFlex</h3>
+<IressRadioGroup layout="inlineFlex" />
+</IressText>
+<IressText>
+<h3>stack</h3>
+<IressRadioGroup layout="stack" />
+</IressText>
+</IressStack>
+```
+
+[View "Layout" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio-group--layout)
+
+### Hidden radio buttons
+
+You can use the `hiddenRadio` prop to create custom radio buttons. When enabled, the actual radio button will be visually hidden, allowing you to create more interesting controls. The checked state will be shown by the label's border, which is thicker when the radio button is checked.
+
+When `hiddenRadio` is enabled, the label will have no padding. Padding can be added by using a Panel or utility classes.
+
+```tsx
+<IressField
+label="I'd like to discuss the following in my financial review:"
+hint="Select one option"
+>
+<IressRadioGroup />
+</IressField>
+```
+
+[View "HiddenRadioButtons" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio-group--hidden-radio-buttons)
+
+### Laying out custom radio buttons
+
+The radio group's `layout` prop gives you some default options to help control the layout of your controls. But sometimes you need more granular control, which you can achieve with a bit of custom CSS.
+
+The example below uses CSS grid to give us evenly spaced / sized radio buttons, which will wrap on to new lines as the screen size reduces. The grid wrapper element is a div that wraps around the `<IressRadio />` elements, as shown by the dashed border. Use the grab handle in the bottom right-hand corner of the grid wrapper to see how the controls change size to respond to the container's width.
+
+```tsx
+<IressField
+label="I'd like to discuss the following in my financial review:"
+hint="Select one option"
+>
+<IressRadioGroup>
+<div
+style={{
+display: 'grid',
+gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+gridAutoRows: '1fr',
+gridGap: '0.75rem',
+width: '100%',
+padding: '0.5rem',
+border: '1px dashed hsl(43deg 100% 45%)',
+resize: 'horizontal',
+overflow: 'auto',
+}}
+>
+...
+</div>
+</IressRadioGroup>
+</IressField>
+```
+
+[View "CustomRadioGroupLayout" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio-group--custom-radio-group-layout)
+
+### Read only
+
+The `readOnly` prop changes how the radio group is rendered. It will only render if the children radio that is checked (alongside a hidden input that contains the `value` if it was set), otherwise it will not be rendered.
+
+It is understandable that this may not be the desired behavior for all use cases. If you need a radio group that is not editable, but still visible, simply do not set the `readOnly` prop and set the `value` prop instead.
+
+```tsx
+<IressRadioGroup readOnly />
+```
+
+[View "ReadOnly" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio-group--read-only)
+
+### Touch
+
+The `touch` prop adds the button-like border and padding to radio.
+
+```tsx
+<IressRadioGroup variant="touch" />
+```
+
+[View "Touch" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio-group--touch)
+
+## Props
+
+- **Type:** `IressRadioGroupProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/RadioGroup/RadioGroup.d.ts`
+
+```typescript
+import type { IressRadioGroupProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-radio-group--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-radio-group--docs)*

package/.ai/components/radio.md

@@ -0,0 +1,78 @@
+# Radio
+
+A radio is a single option presented with a radio button. It is used to select a single option from multiple options. It is typically used in an IressRadioGroup.
+
+> **Component:** `import { IressRadio } from '@iress-oss/ids-components'`
+> **Storybook:** [Radio in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-radio--docs)
+
+## Quick Start
+
+```tsx
+import { IressRadio } from '@iress-oss/ids-components';
+
+<IressRadio>
+  Radio button
+</IressRadio>
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Checked
+
+You can set the radio to `checked` by default. This is useful when you want to pre-select an option.
+
+**Note:** If you are using an `IressRadioGroup`, you should use the `value` prop on the `IressRadioGroup` to set the checked state of its `<IressRadio />` children, as the `checked` prop will be ignored.
+
+```tsx
+<IressRadio checked>
+  Checked radio button
+</IressRadio>
+```
+
+[View "Checked" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio--checked)
+
+### Hidden control
+
+You can hide the radio button and use a custom UI to display the content. Even though the radio button is hidden, it still acts like a radio.
+
+[View "HiddenControl" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio--hidden-control)
+
+### Read only
+
+The `readOnly` prop changes how the radio is rendered. It will only render if the radio is checked (alongside a hidden input that contains the `value` if it was set), otherwise it not be rendered.
+
+It is understandable that this may not be the desired behavior for all use cases. If you need a radio that is not editable, but still visible, simply do not set the `readOnly` prop and set the `checked` prop instead.
+
+```tsx
+<IressStack gap="sm">
+<IressRadio defaultChecked />
+<IressRadio />
+</IressStack>
+```
+
+[View "ReadOnly" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio--read-only)
+
+### Touch
+
+The `touch` prop adds the button-like border and padding to radio.
+
+[View "Touch" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-radio--touch)
+
+## Props
+
+- **Type:** `IressRadioProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Radio/Radio.d.ts`
+
+```typescript
+import type { IressRadioProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-radio--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-radio--docs)*

package/.ai/components/readonly.md

@@ -0,0 +1,51 @@
+# Readonly
+
+Readonly displays a value that cannot be edited by the user. It renders a hidden input field to ensure the value is submitted with the form.
+
+> **Component:** `import { IressReadonly } from '@iress-oss/ids-components'`
+> **Storybook:** [Readonly in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-readonly--docs)
+
+## Quick Start
+
+```tsx
+import { IressReadonly } from '@iress-oss/ids-components';
+
+<IressReadonly value="AU" />
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Rich Content
+
+You can pass in stylised content that represents the value by using the `children` prop. If no `children` is provided, it will display the `value` directly.
+
+[View "RichContent" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-readonly--rich-content)
+
+### Inline
+
+You can make the prepend/append element closer to the input content using the `inline` prop.
+
+```tsx
+<IressReadonly inline />
+```
+
+[View "InlineStyle" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-readonly--inline-style)
+
+## Props
+
+- **Type:** `IressReadonlyProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Readonly/Readonly.d.ts`
+
+```typescript
+import type { IressReadonlyProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-readonly--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-readonly--docs)*