@terreno/mcp 0.24.0 → 0.25.0

package/src/docs/versioned/0.24.0/reference/components/accordion.mdx

@@ -0,0 +1,37 @@
+---
+title: "Accordion"
+description: "Accordion is a container that can be expanded and collapsed to show content about a single subject. Its contents can be visible at all items, or expand and collapse as an individual item or a group of items. Also called “drawer”, “collapsed section”, “expandable section”, or “dropdown section”."
+sidebar_label: "Accordion"
+slug: /reference/components/accordion
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Accordion
+
+Accordion is a container that can be expanded and collapsed to show content about a single subject. Its contents can be visible at all items, or expand and collapse as an individual item or a group of items. Also called “drawer”, “collapsed section”, “expandable section”, or “dropdown section”.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `AccordionProps`  
+**Story source:** [`demo/stories/Accordion.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Accordion.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Accordion" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | Yes | The content to be displayed inside the accordion. |
+| `title` | `string` | Yes | The title of the accordion. |
+| `includeInfoModal` | `boolean` |  | If true, an information modal will be included. |
+| `infoModalChildren` | `ReactElement` |  | The content of the information modal. |
+| `infoModalSubtitle` | `string` |  | The subtitle of the information modal. |
+| `infoModalText` | `string` |  | The text content of the information modal. |
+| `infoModalTitle` | `string` |  | The title of the information modal. |
+| `isCollapsed` | `boolean` |  | If true, the accordion will be collapsed. |
+| `onToggle` | `reflection` |  | * Callback fired when the accordion is toggled. |
+| `subtitle` | `string` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |

package/src/docs/versioned/0.24.0/reference/components/ai-suggestion-box.mdx

@@ -0,0 +1,26 @@
+---
+title: "AI Suggestion Box"
+description: "An AI suggestion block that renders inside TextField or TextArea. Shows AI-generated content with feedback controls and add-to-note actions. Supports multiple states: not-started, generating, ready, added, and hidden. Hidden and added suggestions condense into a collapsed row that can be re-expanded with Show."
+sidebar_label: "AI Suggestion Box"
+slug: /reference/components/ai-suggestion-box
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# AI Suggestion Box
+
+An AI suggestion block that renders inside TextField or TextArea. Shows AI-generated content with feedback controls and add-to-note actions. Supports multiple states: not-started, generating, ready, added, and hidden. Hidden and added suggestions condense into a collapsed row that can be re-expanded with Show.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `AiSuggestionBoxProps`  
+**Story source:** [`demo/stories/AISuggestionBox.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/AISuggestionBox.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="AI Suggestion Box" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/src/docs/versioned/0.24.0/reference/components/avatar.mdx

@@ -0,0 +1,35 @@
+---
+title: "Avatar"
+description: "Used to represent a single user."
+sidebar_label: "Avatar"
+slug: /reference/components/avatar
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Avatar
+
+Used to represent a single user.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `AvatarProps`  
+**Story source:** [`demo/stories/Avatar.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Avatar.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Avatar" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `name` | `string` | Yes | The name of the user. This is used for the placeholder treatment if an image is not available. |
+| `accessibilityLabel` | `string` |  | Accessibility label for the avatar image. |
+| `doNotDisturb` | `boolean` |  | If true, the status will have a "Z" to indicate the user has snoozed notifications. |
+| `hasBorder` | `boolean` |  | Adds a white border around Avatar so it's visible when displayed on other images. |
+| `onChange` | `reflection` |  | Function to handle the avatar image edit |
+| `size` | `union` |  | xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px. |
+| `src` | `string` |  | The URL of the user's image. |
+| `status` | `AvatarStatus` |  | The status of the user to display with the avatar. |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |

package/src/docs/versioned/0.24.0/reference/components/badge.mdx

@@ -0,0 +1,38 @@
+---
+title: "Badge"
+description: "Badge is a label that indicates status or importance. Badges should provide quick recognition.\\n"
+sidebar_label: "Badge"
+slug: /reference/components/badge
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Badge
+
+Badge is a label that indicates status or importance. Badges should provide quick recognition.\n
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `BadgeProps`  
+**Story source:** [`demo/stories/Badge.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Badge.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Badge" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `customBackgroundColor` | `string` |  | When status is "custom", determines the badge's background color. |
+| `customBorderColor` | `string` |  | When status is "custom", determines the badge's border color. |
+| `customIconColor` | `keyof TextTheme` |  | When status is "custom", determines the badge's icon color |
+| `customIconName` | `IconName` |  | When status is "custom", determines the badge's icon |
+| `customTextColor` | `string` |  | When status is "custom", determines the badge's text color. |
+| `iconName` | `IconName` |  | The name of the icon to display in the badge. |
+| `maxValue` | `number` |  | The maximum value to display. Used for "numberOnly" variant to display "$\{maxValue\}+" when value is greater than max. |
+| `secondary` | `boolean` |  | If true, the badge will have a secondary style. |
+| `status` | `union` |  | The status of the badge. Determines its color and appearance. |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `value` | `union` |  | The text or number to display inside the badge. |
+| `variant` | `union` |  | The variant of the badge. Determines if it displays an icon or number only. |

package/src/docs/versioned/0.24.0/reference/components/boolean-field.mdx

@@ -0,0 +1,36 @@
+---
+title: "Boolean field"
+description: "Use the Boolean field for single cell options that can be turned on and off only. Also called 'toggle fields' and 'switch fields'."
+sidebar_label: "Boolean field"
+slug: /reference/components/boolean-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Boolean field
+
+Use the Boolean field for single cell options that can be turned on and off only. Also called 'toggle fields' and 'switch fields'.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `BooleanFieldProps`  
+**Story source:** [`demo/stories/Booleanfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Booleanfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Boolean field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes |  |
+| `value` | `boolean` | Yes |  |
+| `disabled` | `boolean` |  |  |
+| `disabledHelperText` | `string` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `FieldTestIDs` |  |  |
+| `title` | `string` |  |  |
+| `variant` | `union` |  |  |

package/src/docs/versioned/0.24.0/reference/components/button.mdx

@@ -0,0 +1,44 @@
+---
+title: "Button"
+description: "Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action)."
+sidebar_label: "Button"
+slug: /reference/components/button
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Button
+
+Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action).
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `ButtonProps`  
+**Story source:** [`demo/stories/Button.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Button.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Button" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onClick` | `reflection` | Yes | The function to call when the button is clicked. |
+| `text` | `string` | Yes | The text content of the button. |
+| `confirmationText` | `string` |  | The text content of the confirmation modal. |
+| `disabled` | `boolean` |  | If true, the button will be disabled. |
+| `fullWidth` | `boolean` |  | If true, the button will take the full width of its container. |
+| `iconName` | `IconName` |  | The name of the icon to display in the button. |
+| `iconPosition` | `union` |  | The position of the icon within the button. |
+| `loading` | `boolean` |  | If true, a loading spinner will be shown in the button. |
+| `modalSubTitle` | `string` |  | The subtitle of the confirmation modal. |
+| `modalTitle` | `string` |  | The title of the confirmation modal. |
+| `pressAnimation` | `ButtonPressAnimation` |  | The press animation to use when the button is touched. |
+| `size` | `union` |  | The size of the button. |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `tooltipIdealPosition` | `TooltipPosition` |  | The position of the tooltip. |
+| `tooltipIncludeArrow` | `boolean` |  | Include an arrow in the tooltip. Pointing to the button. |
+| `tooltipText` | `string` |  | The text content of the tooltip. |
+| `variant` | `union` |  | The type of the button, which determines its style. |
+| `withConfirmation` | `boolean` |  | If true, a confirmation modal will be shown before the onClick action. |

package/src/docs/versioned/0.24.0/reference/components/checkbox.mdx

@@ -0,0 +1,30 @@
+---
+title: "CheckBox"
+description: "CheckBox is used for multiple choice selection."
+sidebar_label: "CheckBox"
+slug: /reference/components/checkbox
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# CheckBox
+
+CheckBox is used for multiple choice selection. They are independent of each other in a list, and therefore, different from RadioButton, one selection does not affect other checkboxes in the same list.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `CheckBoxProps`  
+**Story source:** [`demo/stories/CheckBox.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/CheckBox.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="CheckBox" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `selected` | `boolean` | Yes | If true, the checkbox is selected. |
+| `bgColor` | `union` |  | The background color of the checkbox. |
+| `size` | `union` |  | The size of the checkbox. |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |

package/src/docs/versioned/0.24.0/reference/components/custom-select-field.mdx

@@ -0,0 +1,36 @@
+---
+title: "Custom Select Field"
+description: "Displays a list of options using the browser’s native select and includes a custom option that renders a text field when selected and allows user to input value not included in predefined options."
+sidebar_label: "Custom Select Field"
+slug: /reference/components/custom-select-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Custom Select Field
+
+Displays a list of options using the browser’s native select and includes a custom option that renders a text field when selected and allows user to input value not included in predefined options.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `CustomSelectFieldProps`  
+**Story source:** [`demo/stories/CustomSelectField.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/CustomSelectField.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Custom Select Field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes | The function to call when the custom select field value changes. |
+| `options` | `array` | Yes | The options available for selection in the select field. Each option should have a label and a value. |
+| `value` | `union` | Yes | The current value of the custom select field. |
+| `disabled` | `boolean` |  | If true, the select field will be disabled. |
+| `errorText` | `string` |  | The error text to display if there is an error. |
+| `helperText` | `string` |  | The helper text to display below the select field. |
+| `placeholder` | `string` |  | The placeholder text to display when no option is selected. |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `FieldTestIDs` |  |  |
+| `title` | `string` |  | The title of the custom select field. |

package/src/docs/versioned/0.24.0/reference/components/datatable.mdx

@@ -0,0 +1,44 @@
+---
+title: "DataTable"
+description: "DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible."
+sidebar_label: "DataTable"
+slug: /reference/components/datatable
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# DataTable
+
+DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible.
+
+**Package:** `@terreno/ui`  
+**Categories:** Pattern  
+**Props interface:** `DataTableProps`  
+**Story source:** [`demo/stories/DataTable.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/DataTable.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="DataTable" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `columns` | `array` | Yes |  |
+| `data` | `array` | Yes |  |
+| `alternateRowBackground` | `boolean` |  |  |
+| `customColumnComponentMap` | `DataTableCustomComponentMap` |  |  |
+| `defaultTextSize` | `union` |  |  |
+| `getRowTestID` | `reflection` |  | Returns a stable key for row test ids. Defaults to row index when omitted. |
+| `headerHeight` | `number` |  |  |
+| `moreContentComponent` | `ComponentType` |  | When tapping the eye icon, a modal is shown with more info about the row. |
+| `moreContentExtraData` | `array` |  |  |
+| `page` | `number` |  |  |
+| `pinnedColumns` | `number` |  |  |
+| `rowHeight` | `number` |  |  |
+| `setPage` | `reflection` |  |  |
+| `setSortColumn` | `reflection` |  |  |
+| `sortColumn` | `ColumnSortInterface` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `DataTableTestIDs` |  |  |
+| `totalPages` | `number` |  |  |

package/src/docs/versioned/0.24.0/reference/components/date-time-field.mdx

@@ -0,0 +1,49 @@
+---
+title: "Date & Time field"
+description: "This form field allows the user to select a date and a time. Used in conjunction with the date & time modal in this pattern."
+sidebar_label: "Date & Time field"
+slug: /reference/components/date-time-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Date & Time field
+
+This form field allows the user to select a date and a time. Used in conjunction with the date & time modal in this pattern.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `DateTimeFieldProps`  
+**Story source:** [`demo/stories/Date&Timefield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Date&Timefield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Date & Time field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes |  |
+| `type` | `union` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `dateFormat` | `string` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `onBlur` | `OnChangeCallback` |  |  |
+| `onEnter` | `reflection` |  |  |
+| `onFocus` | `reflection` |  |  |
+| `onIconClick` | `reflection` |  |  |
+| `onSubmitEditing` | `reflection` |  |  |
+| `onTimezoneChange` | `reflection` |  |  |
+| `pickerType` | `union` |  |  |
+| `placeholder` | `string` |  |  |
+| `showTimezone` | `boolean` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `FieldTestIDs` |  |  |
+| `timezone` | `string` |  |  |
+| `title` | `string` |  |  |
+| `value` | `string` |  |  |

package/src/docs/versioned/0.24.0/reference/components/email-field.mdx

@@ -0,0 +1,43 @@
+---
+title: "Email field"
+description: "Use the email field to allow a user to input a valid email."
+sidebar_label: "Email field"
+slug: /reference/components/email-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Email field
+
+Use the email field to allow a user to input a valid email.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `EmailFieldProps`  
+**Story source:** [`demo/stories/Emailfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Emailfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Email field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `onBlur` | `OnChangeCallback` |  |  |
+| `onEnter` | `reflection` |  |  |
+| `onFocus` | `reflection` |  |  |
+| `onIconClick` | `reflection` |  |  |
+| `onSubmitEditing` | `reflection` |  |  |
+| `placeholder` | `string` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `FieldTestIDs` |  |  |
+| `title` | `string` |  |  |
+| `value` | `string` |  |  |

package/src/docs/versioned/0.24.0/reference/components/height-field.mdx

@@ -0,0 +1,45 @@
+---
+title: "Height field"
+description: "Use the Height field to allow users to input their height. The field stores the value as total inches and displays it as feet and inches. On web, two text inputs accept feet and inches separately. On iOS, tapping the field opens an action sheet for selection. On Android, two dropdowns allow selection of feet and inches. Supports optional min/max props to constrain the allowed height range."
+sidebar_label: "Height field"
+slug: /reference/components/height-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Height field
+
+Use the Height field to allow users to input their height. The field stores the value as total inches and displays it as feet and inches. On web, two text inputs accept feet and inches separately. On iOS, tapping the field opens an action sheet for selection. On Android, two dropdowns allow selection of feet and inches. Supports optional min/max props to constrain the allowed height range.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `HeightFieldProps`  
+**Story source:** [`demo/stories/Heightfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Heightfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Height field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `max` | `number` |  | Maximum height in total inches |
+| `min` | `number` |  | Minimum height in total inches |
+| `onBlur` | `OnChangeCallback` |  |  |
+| `onEnter` | `reflection` |  |  |
+| `onFocus` | `reflection` |  |  |
+| `onIconClick` | `reflection` |  |  |
+| `onSubmitEditing` | `reflection` |  |  |
+| `placeholder` | `string` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `FieldTestIDs` |  |  |
+| `title` | `string` |  |  |
+| `value` | `string` |  |  |

package/src/docs/versioned/0.24.0/reference/components/icon.mdx

@@ -0,0 +1,31 @@
+---
+title: "Icon"
+description: "Icons are used to visually communicate core actions or information to the user. They are used to represent a particular action or category of information."
+sidebar_label: "Icon"
+slug: /reference/components/icon
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Icon
+
+Icons are used to visually communicate core actions or information to the user. They are used to represent a particular action or category of information.
+
+**Package:** `@terreno/ui`  
+**Categories:** Foundation  
+**Props interface:** `IconProps`  
+**Story source:** [`demo/stories/Icon.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Icon.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Icon" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `iconName` | `IconName` | Yes |  |
+| `color` | `keyof TextTheme` |  |  |
+| `size` | `IconSize` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `type` | `union` |  |  |

package/src/docs/versioned/0.24.0/reference/components/iconbutton.mdx

@@ -0,0 +1,43 @@
+---
+title: "IconButton"
+description: "Icon buttons allow users to take actions and make choices with a single tap."
+sidebar_label: "IconButton"
+slug: /reference/components/iconbutton
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# IconButton
+
+Icon buttons allow users to take actions and make choices with a single tap.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `IconButtonProps`  
+**Story source:** [`demo/stories/IconButton.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/IconButton.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="IconButton" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `accessibilityLabel` | `string` | Yes | The accessibility label attribute identifies the user interface element. It should be a very brief description of the element, such as "Add", "Play", "Deleted", etc. |
+| `iconName` | `IconName` | Yes | The name of the icon to display in the button. |
+| `onClick` | `reflection` | Yes | The function to call when the button is clicked. |
+| `accessibilityHint` | `string` |  | The accessibility hint describes the results of performing an action on a control or view. It should be a very brief description of the result of interacting with the button. |
+| `confirmationHeading` | `string` |  | The heading of the confirmation modal. |
+| `confirmationText` | `string` |  | The text content of the confirmation modal. |
+| `disabled` | `boolean` |  | If true, the button will be disabled. |
+| `indicator` | `union` |  | Show a small indicator icon in the lower right corner of the button. |
+| `indicatorText` | `union` |  | The text or number to display in the indicator. If not provided, the indicator will be a solid circle. |
+| `loading` | `boolean` |  | If true, a loading spinner will be shown in the button. |
+| `size` | `union` |  | The size of the button. |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `tooltipIdealPosition` | `TooltipPosition` |  | The ideal position of the tooltip. |
+| `tooltipIncludeArrow` | `boolean` |  | Include an arrow in the tooltip. Pointing to the button. |
+| `tooltipText` | `string` |  | The text content of the tooltip. |
+| `variant` | `union` |  | The variant of the button, which determines its style. |
+| `withConfirmation` | `boolean` |  | If true, a confirmation modal will be shown before the onClick action. |

package/src/docs/versioned/0.24.0/reference/components/inner-modal-content.mdx

@@ -0,0 +1,41 @@
+---
+title: "Inner modal content"
+description: "A Modal displays content that requires user interaction. Modals appear on a layer above the page and therefore block the content underneath"
+sidebar_label: "Inner modal content"
+slug: /reference/components/inner-modal-content
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Inner modal content
+
+A Modal displays content that requires user interaction. Modals appear on a layer above the page and therefore block the content underneath, preventing users from interacting with anything else besides the Modal. Modal should be used to gather short bits of information from the user. Also known as dialog or prompt.
+
+**Package:** `@terreno/ui`  
+**Categories:** Layout, Utility  
+**Props interface:** `ModalProps`  
+**Story source:** [`demo/stories/Innermodalcontent.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Innermodalcontent.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Inner modal content" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onDismiss` | `reflection` | Yes |  |
+| `visible` | `boolean` | Yes | If true, the modal will be visible. |
+| `children` | `ReactElement` |  | The content of the modal. |
+| `persistOnBackgroundClick` | `boolean` |  | If true, the modal will be closed when the background is clicked. |
+| `primaryButtonDisabled` | `boolean` |  | If true, the primary button will be disabled. |
+| `primaryButtonOnClick` | `reflection` |  | The function to call when the primary button is clicked. |
+| `primaryButtonText` | `string` |  | The text content of the primary button. |
+| `secondaryButtonOnClick` | `reflection` |  | The function to call when the secondary button is clicked. |
+| `secondaryButtonText` | `string` |  | The text content of the secondary button. |
+| `size` | `union` |  | The size of the modal. |
+| `subtitle` | `string` |  | The subtitle of the modal. |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `ModalTestIDs` |  |  |
+| `text` | `string` |  | The text content of the modal. |
+| `title` | `string` |  | The title of the modal. |

package/src/docs/versioned/0.24.0/reference/components/markdown-editor-field.mdx

@@ -0,0 +1,50 @@
+---
+title: "Markdown editor field"
+description: "A side-by-side markdown editor with a text input on the left and a live preview on the right. Useful for editing rich text content in admin panels and forms."
+sidebar_label: "Markdown editor field"
+slug: /reference/components/markdown-editor-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Markdown editor field
+
+A side-by-side markdown editor with a text input on the left and a live preview on the right. Useful for editing rich text content in admin panels and forms.
+
+**Package:** `@terreno/ui`  
+**Categories:** Data Entry  
+**Props interface:** `TextAreaProps`  
+**Story source:** [`demo/stories/Markdowneditorfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Markdowneditorfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Markdown editor field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `aiSuggestion` | `AiSuggestionProps` |  |  |
+| `autoComplete` | `union` |  |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `grow` | `boolean` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `inputRef` | `reflection` |  |  |
+| `onBlur` | `OnChangeCallback` |  |  |
+| `onEnter` | `reflection` |  |  |
+| `onFocus` | `reflection` |  |  |
+| `onIconClick` | `reflection` |  |  |
+| `onSubmitEditing` | `reflection` |  |  |
+| `placeholder` | `string` |  |  |
+| `returnKeyType` | `union` |  |  |
+| `rows` | `number` |  |  |
+| `testID` | `string` |  | Root test id for the primary interactive element or container. |
+| `testIDs` | `FieldTestIDs` |  |  |
+| `title` | `string` |  |  |
+| `trimOnBlur` | `boolean` |  |  |
+| `value` | `string` |  |  |