@maxio-com/react-ui-components 9.22.0 → 9.22.1

package/dist/skills/maxio-react/references/components-listbox.md

@@ -109,7 +109,9 @@ import { Button, DialogTrigger, ListBox, Popover } from "@maxio-com/react-ui-com
 
 ### Default
 
-Use ListBox when users need to choose one option from a compact set. Provide a visible label near the control or an `aria-label` when the label is supplied by surrounding UI.
+Use ListBox when users need to choose one option from a compact set.
+Provide a visible label near the control or an `aria-label` when the label
+is supplied by surrounding UI.
 
 ```tsx
 const Default = () => <ListBox
@@ -125,7 +127,8 @@ const Default = () => <ListBox
 
 ### Multi Select
 
-Use multiple selection when users can keep more than one option active at a time. Keep selected option state synchronized with `aria-selected`.
+Use multiple selection when users can keep more than one option active at a
+time. Keep selected option state synchronized with `aria-selected`.
 
 ```tsx
 const MultiSelect = () => (
@@ -139,7 +142,8 @@ const MultiSelect = () => (
 
 ### With Sections
 
-Use sections to group long option sets under short, scannable headers. Headers should describe the relationship between the options that follow.
+Use sections to group long option sets under short, scannable headers.
+Headers should describe the relationship between the options that follow.
 
 ```tsx
 const WithSections = () => (
@@ -159,7 +163,9 @@ const WithSections = () => (
 
 ### In Popover
 
-Use ListBox inside Popover for picker or menu-like controls where the trigger opens a bounded option set. Return focus to the trigger when the popover closes.
+Use ListBox inside Popover for picker or menu-like controls where the
+trigger opens a bounded option set. Return focus to the trigger when the
+popover closes.
 
 ```tsx
 const InPopover = () => {
@@ -196,7 +202,9 @@ const InPopover = () => {
 
 ### Empty State
 
-Use an empty state when filtering or async loading leaves no options to select. Keep the message brief and avoid rendering disabled placeholder options.
+Use an empty state when filtering or async loading leaves no options to
+select. Keep the message brief and avoid rendering disabled placeholder
+options.
 
 ```tsx
 const EmptyState = () => (

package/dist/skills/maxio-react/references/components-loading-spinner.md

@@ -75,7 +75,8 @@ import { LoadingSpinner } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use LoadingSpinner when a local region or control is waiting on background work and the completion percentage is unknown.
+Use LoadingSpinner when a local region or control is waiting on background
+work and the completion percentage is unknown.
 
 ```tsx
 const Default = ({ white, ...props }) => (
@@ -92,7 +93,8 @@ const Default = ({ white, ...props }) => (
 
 ### On Dark Background
 
-Use the white spinner on dark or brand-filled surfaces so the indicator keeps enough contrast with its container.
+Use the white spinner on dark or brand-filled surfaces so the indicator
+keeps enough contrast with its container.
 
 ```tsx
 const OnDarkBackground = () => <div
@@ -106,7 +108,9 @@ const OnDarkBackground = () => <div
 
 ### Sizes
 
-Choose the smallest spinner that remains visible in context. Use larger sizes for page or panel loading states, and smaller sizes inside compact controls.
+Choose the smallest spinner that remains visible in context. Use larger
+sizes for page or panel loading states, and smaller sizes inside compact
+controls.
 
 ```tsx
 const Sizes = () => <div

package/dist/skills/maxio-react/references/components-logo.md

@@ -60,7 +60,8 @@ import { LogoComponent } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use the default lockup when there is enough horizontal space for the full Maxio identity, such as app headers, login screens, or branded empty states.
+Use the default lockup when there is enough horizontal space for the full
+Maxio identity, such as app headers, login screens, or branded empty states.
 
 ```tsx
 const Default = () => <LogoComponent alt="Maxio" />;
@@ -68,7 +69,8 @@ const Default = () => <LogoComponent alt="Maxio" />;
 
 ### Default (Dark)
 
-Use the default lockup in dark mode without changing props. The logo fill is handled by the surrounding `data-maxio-mode="dark"` theme context.
+Use the default lockup in dark mode without changing props. The logo fill is
+handled by the surrounding `data-maxio-mode="dark"` theme context.
 
 ```tsx
 const DefaultDark = () => <LogoComponent alt="Maxio" />;
@@ -76,7 +78,8 @@ const DefaultDark = () => <LogoComponent alt="Maxio" />;
 
 ### Logo as Mark
 
-Use the mark where horizontal space is constrained or the brand lockup is already present nearby. Pair it with accessible text when it acts as a home link.
+Use the mark where horizontal space is constrained or the brand lockup is
+already present nearby. Pair it with accessible text when it acts as a home link.
 
 ```tsx
 const LogoAsMark = () => <LogoComponent variant="mark" alt="Maxio" />;
@@ -84,7 +87,8 @@ const LogoAsMark = () => <LogoComponent variant="mark" alt="Maxio" />;
 
 ### Custom Size
 
-Use a custom numeric size only when a standard token size cannot align with the surrounding layout. Prefer `sm`, `md`, or `lg` for most product surfaces.
+Use a custom numeric size only when a standard token size cannot align with
+the surrounding layout. Prefer `sm`, `md`, or `lg` for most product surfaces.
 
 ```tsx
 const CustomSize = () => <LogoComponent alt="Maxio" size={100} />;

package/dist/skills/maxio-react/references/components-notifications-alert.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Alert presents contextual status feedback near the content or workflow it supports. Use it for concise messages that may include a follow-up link or a dismiss action.
+Alert presents contextual status feedback near the content or workflow it
+supports. Use it for concise messages that may include a follow-up link or a
+dismiss action.
 
 #### When to Use
 
@@ -89,7 +91,9 @@ import { Alert } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Alert for contextual feedback inside a page section or workflow. Choose the sentiment that matches the message, keep the copy short, and include a dismiss action only when the alert is not required for the user to continue.
+Use Alert for contextual feedback inside a page section or workflow. Choose
+the sentiment that matches the message, keep the copy short, and include a
+dismiss action only when the alert is not required for the user to continue.
 
 ```tsx
 const Default = () => <Alert

package/dist/skills/maxio-react/references/components-notifications-banner.md

@@ -4,7 +4,8 @@
 
 ### Overview
 
-Banner communicates important page-level status, account, or product messages that should be noticed before the user continues their workflow.
+Banner communicates important page-level status, account, or product messages
+that should be noticed before the user continues their workflow.
 
 #### When to Use
 
@@ -89,7 +90,8 @@ import { Banner } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use an info banner for neutral page-level notices that should be visible before the user continues.
+Use an info banner for neutral page-level notices that should be visible
+before the user continues.
 
 ```tsx
 const Default = (args) => {
@@ -104,7 +106,8 @@ const Default = (args) => {
 
 ### Success
 
-Use success when a completed account or workflow state still needs visible confirmation outside a toast.
+Use success when a completed account or workflow state still needs visible
+confirmation outside a toast.
 
 ```tsx
 const Success = () => <Banner
@@ -118,7 +121,8 @@ const Success = () => <Banner
 
 ### Warning
 
-Use warning for messages that need attention soon but do not block the current page.
+Use warning for messages that need attention soon but do not block the
+current page.
 
 ```tsx
 const Warning = () => <Banner
@@ -132,7 +136,8 @@ const Warning = () => <Banner
 
 ### Danger
 
-Use danger for critical account or product states that need immediate attention before work can continue confidently.
+Use danger for critical account or product states that need immediate
+attention before work can continue confidently.
 
 ```tsx
 const Danger = () => <Banner
@@ -146,7 +151,8 @@ const Danger = () => <Banner
 
 ### Dismissible
 
-Use a dismissible banner only for temporary messages the user can safely hide without losing required status or error context.
+Use a dismissible banner only for temporary messages the user can safely
+hide without losing required status or error context.
 
 ```tsx
 const Dismissible = () => <Banner
@@ -159,7 +165,8 @@ const Dismissible = () => <Banner
 
 ### Block Layout
 
-Use block display when title, message, and link text need more room to wrap clearly in narrow or content-heavy layouts.
+Use block display when title, message, and link text need more room to wrap
+clearly in narrow or content-heavy layouts.
 
 ```tsx
 const BlockLayout = () => <Banner

package/dist/skills/maxio-react/references/components-notifications-toast.md

@@ -121,7 +121,9 @@ import { Button, GlobalToastProvider, Toast, ToastProvider } from "@maxio-com/re
 
 ### Default
 
-Use the global toast API for new work. Place `GlobalToastProvider` once near the application root, then call `useToast().addToast(...)` from flows that need transient feedback.
+Use the global toast API for new work. Place `GlobalToastProvider` once near
+the application root, then call `useToast().addToast(...)` from flows that
+need transient feedback.
 
 ```tsx
 const Default = () => {
@@ -136,7 +138,8 @@ const Default = () => {
 
 ### Visible Toast
 
-Use this story to inspect the toast anatomy. Product code should create this state by adding content to a `ToastQueue`, not by rendering `Toast` directly.
+Use this story to inspect the toast anatomy. Product code should create this
+state by adding content to a `ToastQueue`, not by rendering `Toast` directly.
 
 ```tsx
 const VisibleToast = () => <VisibleToastExample />;
@@ -144,7 +147,8 @@ const VisibleToast = () => <VisibleToastExample />;
 
 ### Legacy Toast Provider
 
-Legacy `ToastProvider` remains available for existing implementations. Use `GlobalToastProvider` and `useToast` for new screens.
+Legacy `ToastProvider` remains available for existing implementations. Use
+`GlobalToastProvider` and `useToast` for new screens.
 
 ```tsx
 const LegacyToastProvider = () => {

package/dist/skills/maxio-react/references/components-pagination.md

@@ -4,7 +4,8 @@
 
 ### Overview
 
-Use Pagination to help users move through a paged dataset and adjust how many rows or records are shown at once.
+Use Pagination to help users move through a paged dataset and adjust how
+many rows or records are shown at once.
 
 #### When to Use
 
@@ -90,7 +91,9 @@ import { Pagination } from "@maxio-com/react-ui-components";
 
 ### Pagination
 
-Use Pagination when a table or list has more results than should appear on one screen. Keep the page size choices short and update the adjacent dataset when `onChange` reports a new page or item count.
+Use Pagination when a table or list has more results than should appear on
+one screen. Keep the page size choices short and update the adjacent dataset
+when `onChange` reports a new page or item count.
 
 ```tsx
 const Default = () => <Pagination
@@ -102,7 +105,9 @@ const Default = () => <Pagination
 
 ### Pagination with manual page input
 
-Use manual page input when the number of pages is large enough that rendering every page as a select option would hurt browser performance. Validate typed values and clamp them to the available page range.
+Use manual page input when the number of pages is large enough that rendering
+every page as a select option would hurt browser performance. Validate typed
+values and clamp them to the available page range.
 
 ```tsx
 const WithManualPageInput = () => <Pagination

package/dist/skills/maxio-react/references/components-popover.md

@@ -115,7 +115,10 @@ import { Body, Button, DialogTrigger, Popover } from "@maxio-com/react-ui-compon
 
 ### Default
 
-Use Popover for dismissible rich content that is tied to a trigger, such as compact details, contextual controls, or selection surfaces. Pair it with DialogTrigger so trigger state, focus return, and Escape dismissal are wired by React Aria.
+Use Popover for dismissible rich content that is tied to a trigger, such as
+compact details, contextual controls, or selection surfaces. Pair it with
+DialogTrigger so trigger state, focus return, and Escape dismissal are wired
+by React Aria.
 
 ```tsx
 const Default = () => <DialogTrigger>
@@ -129,7 +132,9 @@ const Default = () => <DialogTrigger>
 
 ### Without arrow
 
-Hide the arrow when the popover is visually anchored by another shape, such as an input, menu, or flush container. Keep the trigger relationship and dismissal behavior the same.
+Hide the arrow when the popover is visually anchored by another shape, such
+as an input, menu, or flush container. Keep the trigger relationship and
+dismissal behavior the same.
 
 ```tsx
 const WithoutArrow = () => (
@@ -146,7 +151,9 @@ const WithoutArrow = () => (
 
 ### All placements
 
-Use placement options to keep the popover visually connected to its trigger. Leave `shouldFlip` enabled in product code unless a fixed placement is required for visual QA or documentation.
+Use placement options to keep the popover visually connected to its trigger.
+Leave `shouldFlip` enabled in product code unless a fixed placement is
+required for visual QA or documentation.
 
 ```tsx
 const AllPlacements = ({ ...args }) => (

package/dist/skills/maxio-react/references/components-progressbar.md

@@ -87,7 +87,9 @@ import { ProgressBar } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use ProgressBar when a user needs to understand how much of a process has completed. Keep the label specific to the task and use helper text for the current milestone, percentage, or outcome.
+Use ProgressBar when a user needs to understand how much of a process has
+completed. Keep the label specific to the task and use helper text for the
+current milestone, percentage, or outcome.
 
 ```tsx
 const Default = () => <ProgressBar

package/dist/skills/maxio-react/references/components-segmentedcontrol.md

@@ -118,7 +118,9 @@ import { Flex, Heading, Icon, Label, SegmentedControl } from "@maxio-com/react-u
 
 ### Default
 
-Use Default for switching between closely related views or modes with a compact control. Provide `aria-label` when no visible group label is present.
+Use Default for switching between closely related views or modes with a
+compact control. Provide `aria-label` when no visible group label is
+present.
 
 ```tsx
 const Default = () => <SegmentedControl aria-label="Billing period" defaultSelectedKeys={['monthly']}>
@@ -154,7 +156,8 @@ const Controlled = () => {
 
 ### Disabled
 
-Use Disabled when one or more segments are unavailable in the current context. Disable individual items before disabling the entire group.
+Use Disabled when one or more segments are unavailable in the current
+context. Disable individual items before disabling the entire group.
 
 ```tsx
 const Disabled = () => (
@@ -219,7 +222,8 @@ const Small = () => (
 
 ### Vertical
 
-Use Vertical when horizontal space is limited or options read better as a stacked list.
+Use Vertical when horizontal space is limited or options read better as a
+stacked list.
 
 ```tsx
 const Vertical = () => (
@@ -237,7 +241,8 @@ const Vertical = () => (
 
 ### With Icons
 
-Use icons as supporting context next to labels, or provide `aria-label` for icon-only segments.
+Use icons as supporting context next to labels, or provide `aria-label` for
+icon-only segments.
 
 ```tsx
 const WithIcons = () => (
@@ -266,7 +271,8 @@ const WithIcons = () => (
 
 ### Custom
 
-Use custom content sparingly when a segment needs supporting metrics or secondary text.
+Use custom content sparingly when a segment needs supporting metrics or
+secondary text.
 
 ```tsx
 const Custom = () => <SegmentedControl aria-label="Status" defaultSelectedKeys={['active']} size="lg">

package/dist/skills/maxio-react/references/components-tabs.md

@@ -172,7 +172,8 @@ Snippet unavailable: SyntaxError: Expected render to be an arrow function or fun
 
 ### With Icon
 
-Use supporting icons only when they reinforce the visible tab label. The text label remains the accessible name.
+Use supporting icons only when they reinforce the visible tab label.
+The text label remains the accessible name.
 
 ```tsx
 const WithIcon = () => <Tabs>
@@ -193,7 +194,8 @@ const WithIcon = () => <Tabs>
 
 ### Bare Icon
 
-Use icon-only tabs only in compact interfaces where every icon is recognizable. Provide an accessible name for each tab.
+Use icon-only tabs only in compact interfaces where every icon is
+recognizable. Provide an accessible name for each tab.
 
 ```tsx
 const BareIcon = () => <Tabs>
@@ -217,7 +219,9 @@ const BareIcon = () => <Tabs>
 
 ### Overflow
 
-Use `overflow="auto"` when a tab set can grow past the available width (many tabs, narrow containers). Tabs that don't fit collapse into a "More" menu; the active tab is always kept visible.
+Use `overflow="auto"` when a tab set can grow past the available width
+(many tabs, narrow containers). Tabs that don't fit collapse into a
+"More" menu; the active tab is always kept visible.
 
 ```tsx
 const Overflow = () => <div style={{ width: '400px' }}>
@@ -240,7 +244,12 @@ const Overflow = () => <div style={{ width: '400px' }}>
 
 ### In Card
 
-Use Tabs to drive a Card's own navigation when the card represents a sectioned view: put TabList in Card.Header so the tabs read as the card's title, and put each TabPanel's content in Card.Body so the panel reads as the card's body. Tabs still wraps both sections since it's the context provider connecting TabList's selection to TabPanels, regardless of where each one sits in the DOM.
+Use Tabs to drive a Card's own navigation when the card represents a
+sectioned view: put TabList in Card.Header so the tabs read as the card's
+title, and put each TabPanel's content in Card.Body so the panel reads as
+the card's body. Tabs still wraps both sections since it's the context
+provider connecting TabList's selection to TabPanels, regardless of where
+each one sits in the DOM.
 
 ```tsx
 const InCard = () => <Tabs defaultIndex={0}>

package/dist/skills/maxio-react/references/components-tag.md

@@ -86,7 +86,9 @@ import { Tag } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Tag for short, non-interactive metadata such as customer type, plan status, invoice state, or categorization. Use the visible label as the accessible name.
+Use Tag for short, non-interactive metadata such as customer type, plan
+status, invoice state, or categorization. Use the visible label as the
+accessible name.
 
 ```tsx
 const Default = () => <Tag kind="secondary" sentiment="success">Active</Tag>;
@@ -94,7 +96,8 @@ const Default = () => <Tag kind="secondary" sentiment="success">Active</Tag>;
 
 ### Sentiment
 
-Use sentiment when the tag communicates a recognizable status. Do not rely on color alone; keep the label specific enough to carry the meaning.
+Use sentiment when the tag communicates a recognizable status. Do not rely
+on color alone; keep the label specific enough to carry the meaning.
 
 ```tsx
 const Sentiment = () => <Tag kind="primary" sentiment="danger">Past due</Tag>;
@@ -102,7 +105,8 @@ const Sentiment = () => <Tag kind="primary" sentiment="danger">Past due</Tag>;
 
 ### With Icon
 
-Use icons only when they help identify the tag faster. Icons are supporting visuals; the label still communicates the tag's meaning.
+Use icons only when they help identify the tag faster. Icons are supporting
+visuals; the label still communicates the tag's meaning.
 
 ```tsx
 const WithIcon = () => <Tag kind="tertiary" sentiment="highlight" leadingIcon="briefcase">Enterprise</Tag>;
@@ -110,7 +114,8 @@ const WithIcon = () => <Tag kind="tertiary" sentiment="highlight" leadingIcon="b
 
 ### Small
 
-Use small tags in dense areas such as table cells, compact summaries, and metadata rows where the tag should not dominate surrounding content.
+Use small tags in dense areas such as table cells, compact summaries, and
+metadata rows where the tag should not dominate surrounding content.
 
 ```tsx
 const Small = () => <Tag kind="secondary" sentiment="info" size="sm">Trial</Tag>;

package/dist/skills/maxio-react/references/components-tile.md

@@ -75,7 +75,8 @@ import { Tile } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use a static Tile when the content is grouped for scanning but the whole surface does not navigate or trigger an action.
+Use a static Tile when the content is grouped for scanning but the whole
+surface does not navigate or trigger an action.
 
 ```tsx
 const Default = () => <Tile onClick={undefined}><div className="maxio-heading-md">Text content</div></Tile>;
@@ -83,7 +84,8 @@ const Default = () => <Tile onClick={undefined}><div className="maxio-heading-md
 
 ### Navigation
 
-Use a link Tile when clicking anywhere on the tile should take users to one destination. Keep the destination clear from the visible content.
+Use a link Tile when clicking anywhere on the tile should take users to one
+destination. Keep the destination clear from the visible content.
 
 ```tsx
 const ClickableHref = () => <Tile href="https://www.maxio.com"><div className="maxio-heading-md">Href</div></Tile>;
@@ -91,7 +93,8 @@ const ClickableHref = () => <Tile href="https://www.maxio.com"><div className="m
 
 ### Action
 
-Use an action Tile only when the whole surface performs one clear action. Do not place additional interactive elements inside an action Tile.
+Use an action Tile only when the whole surface performs one clear action.
+Do not place additional interactive elements inside an action Tile.
 
 ```tsx
 const ClickableOnClick = () => <Tile><div className="maxio-heading-md">On click</div></Tile>;
@@ -99,7 +102,9 @@ const ClickableOnClick = () => <Tile><div className="maxio-heading-md">On click<
 
 ### Disabled navigation
 
-Use disabled styling when a navigation Tile is temporarily unavailable. Prevent navigation in JavaScript and communicate the unavailable reason near the tile when the reason is not obvious.
+Use disabled styling when a navigation Tile is temporarily unavailable.
+Prevent navigation in JavaScript and communicate the unavailable reason near
+the tile when the reason is not obvious.
 
 ```tsx
 const ClickableHrefDisabled = () => <Tile disabled href="/revenue-recognition"><div className="maxio-heading-md">href disabled</div></Tile>;
@@ -107,7 +112,9 @@ const ClickableHrefDisabled = () => <Tile disabled href="/revenue-recognition"><
 
 ### Disabled action
 
-Use disabled action Tiles only when the action cannot currently be performed. Avoid using disabled tiles for permissions or hidden features that need more explanatory copy.
+Use disabled action Tiles only when the action cannot currently be performed.
+Avoid using disabled tiles for permissions or hidden features that need more
+explanatory copy.
 
 ```tsx
 const ClickableOnClickDisabled = () => <Tile disabled onClick={action('Disabled tile action')}><div className="maxio-heading-md">onClick disabled</div></Tile>;

package/dist/skills/maxio-react/references/components-toggle.md

@@ -97,7 +97,7 @@ import { ToggleComponent } from "@maxio-com/react-ui-components";
 | `disabled` | `boolean` | no | - | Is the toggle disabled | TypeLiteral |
 | `id` | `string` | no | - | Toggle id - if id not provided then it will be generated automatically | TypeLiteral |
 | `name` | `string` | no | - | Toggle name | TypeLiteral |
-| `onChange` | `((value: boolean, event?: KeyboardEvent<HTMLInputElement> \| ChangeEvent<HTMLInputElement>) => void)` | no | - | The onChange function | TypeLiteral |
+| `onChange` | `((value: boolean, event?: ChangeEvent<HTMLInputElement, Element> \| KeyboardEvent<HTMLInputElement>) => void)` | no | - | The onChange function | TypeLiteral |
 | `valueDescription` | `string` | no | - | Toggle label | TypeLiteral |
 | `valueDescriptionPosition` | `"right" \| "left"` | no | - | Toggle label position | TypeLiteral |
 
@@ -105,7 +105,9 @@ import { ToggleComponent } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Default for a single setting that can be toggled on or off immediately. Prefer a visible label that names the setting instead of only describing the current state.
+Use Default for a single setting that can be toggled on or off immediately.
+Prefer a visible label that names the setting instead of only describing the
+current state.
 
 ```tsx
 const Default = ({
@@ -130,7 +132,8 @@ const Default = ({
 
 ### Checked
 
-Use Checked when the setting is already enabled. Keep the input `checked` state aligned with the visual track position.
+Use Checked when the setting is already enabled. Keep the input `checked`
+state aligned with the visual track position.
 
 ```tsx
 const Checked = ({
@@ -205,7 +208,8 @@ const LabelRight = ({
 
 ### Disabled
 
-Use Disabled when a setting is visible but cannot be changed in the current context. Include supporting copy nearby when users need to know why.
+Use Disabled when a setting is visible but cannot be changed in the current
+context. Include supporting copy nearby when users need to know why.
 
 ```tsx
 const Disabled = () => <ToggleComponent

package/dist/skills/maxio-react/references/components-tooltip.md

@@ -86,7 +86,8 @@ Snippet unavailable: SyntaxError: Expected render to be an arrow function or fun
 
 ### Click Interaction
 
-Use click interaction when the trigger is already an explicit control and the tooltip should stay available after pointer movement.
+Use click interaction when the trigger is already an explicit control and
+the tooltip should stay available after pointer movement.
 
 ```tsx
 const ClickInteraction = () => (
@@ -101,7 +102,8 @@ const ClickInteraction = () => (
 
 ### Dismiss Interaction
 
-Add dismiss when users need an explicit way to close a tooltip after click, focus, or another persistent interaction opens it.
+Add dismiss when users need an explicit way to close a tooltip after click,
+focus, or another persistent interaction opens it.
 
 ```tsx
 const DismissInteraction = () => (
@@ -118,7 +120,9 @@ const DismissInteraction = () => (
 
 ### Hover Interaction
 
-Use hover interaction for pointer-only supporting information. Pair it with focus in product experiences when the same tooltip should be keyboard accessible.
+Use hover interaction for pointer-only supporting information. Pair it with
+focus in product experiences when the same tooltip should be keyboard
+accessible.
 
 ```tsx
 const HoverInteraction = () => (
@@ -133,7 +137,9 @@ const HoverInteraction = () => (
 
 ### Focus Interaction
 
-Use focus interaction when the tooltip explains something keyboard users can tab to. Keep the tooltip nonessential so the trigger remains understandable without it.
+Use focus interaction when the tooltip explains something keyboard users can
+tab to. Keep the tooltip nonessential so the trigger remains understandable
+without it.
 
 ```tsx
 const FocusInteraction = () => (
@@ -148,7 +154,8 @@ const FocusInteraction = () => (
 
 ### Auto Hide
 
-Use autoHideMs when a click-triggered tooltip should clear itself after a short, predictable amount of time.
+Use autoHideMs when a click-triggered tooltip should clear itself after a
+short, predictable amount of time.
 
 ```tsx
 const AutoHide = () => (
@@ -164,7 +171,8 @@ const AutoHide = () => (
 
 ### Max Width
 
-Use maxWidth to keep longer tooltip copy readable. Prefer editing tooltip copy down before increasing the width.
+Use maxWidth to keep longer tooltip copy readable. Prefer editing tooltip
+copy down before increasing the width.
 
 ```tsx
 const MaxWidth = () => (

package/dist/skills/maxio-react/references/components-typography-body.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Body renders paragraph-level and supporting text with Maxio typography classes. Choose the semantic element that matches the content, then use `size` and `compact` for visual rhythm.
+Body renders paragraph-level and supporting text with Maxio typography
+classes. Choose the semantic element that matches the content, then use
+`size` and `compact` for visual rhythm.
 
 #### When to Use
 
@@ -86,7 +88,9 @@ import { Body } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Body for readable page copy, descriptions, helper text, and other paragraph-level content. Prefer semantic elements such as `p` for standalone paragraphs and `span` for inline text.
+Use Body for readable page copy, descriptions, helper text, and other
+paragraph-level content. Prefer semantic elements such as `p` for standalone
+paragraphs and `span` for inline text.
 
 ```tsx
 const Default = () => <Body as="p">{SLOGAN}</Body>;
@@ -94,7 +98,8 @@ const Default = () => <Body as="p">{SLOGAN}</Body>;
 
 ### Compact
 
-Use compact Body when dense layouts need a tighter line height, such as helper copy, table details, or supporting text inside compact UI surfaces.
+Use compact Body when dense layouts need a tighter line height, such as
+helper copy, table details, or supporting text inside compact UI surfaces.
 
 ```tsx
 const Compact = () => <Body as="p" compact size="sm">Invoice details are synchronized nightly and may take a few minutes to appear in reports.</Body>;