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

package/dist/skills/maxio-react/references/components-action-menu.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-ActionMenu groups related contextual actions behind a trigger. Use it for secondary row, toolbar, or page actions that should stay available without occupying persistent space.
+ActionMenu groups related contextual actions behind a trigger. Use it for
+secondary row, toolbar, or page actions that should stay available without
+occupying persistent space.
 
 #### When to Use
 
@@ -90,7 +92,9 @@ No props were emitted by reactDocgenTypescript for this component.
 
 ### Default
 
-Use the default action menu for a small set of related actions behind a visible text trigger. The trigger needs an accessible name and controls the menu list through generated `aria-controls` and `aria-labelledby` values.
+Use the default action menu for a small set of related actions behind a
+visible text trigger. The trigger needs an accessible name and controls the
+menu list through generated `aria-controls` and `aria-labelledby` values.
 
 ```tsx
 const Default = () => (
@@ -103,7 +107,9 @@ const Default = () => (
 
 ### Button Classes
 
-Use MenuButton size and variant props when the trigger needs to match nearby button hierarchy. Keep the menu behavior the same; only the trigger styling changes.
+Use MenuButton size and variant props when the trigger needs to match nearby
+button hierarchy. Keep the menu behavior the same; only the trigger styling
+changes.
 
 ```tsx
 const ButtonClasses = () => (
@@ -118,7 +124,9 @@ const ButtonClasses = () => (
 
 ### Internal State
 
-Use the render-prop state when the trigger label, adjacent controls, or custom content must react to the open state. Call `onClose` when custom content dismisses the menu.
+Use the render-prop state when the trigger label, adjacent controls, or
+custom content must react to the open state. Call `onClose` when custom
+content dismisses the menu.
 
 ```tsx
 const InternalState = () => (
@@ -137,7 +145,9 @@ const InternalState = () => (
 
 ### Content Align End
 
-Use end alignment when the trigger sits near the right edge of a container or in a table row action area, so the menu stays visually connected to the trigger without overflowing nearby content.
+Use end alignment when the trigger sits near the right edge of a container or
+in a table row action area, so the menu stays visually connected to the
+trigger without overflowing nearby content.
 
 ```tsx
 const ContentAlignEnd = () => (
@@ -150,7 +160,8 @@ const ContentAlignEnd = () => (
 
 ### Icon Menu
 
-Use an icon-only action menu in dense toolbars or repeated rows. Always provide an `aria-label` that describes the actions available in the menu.
+Use an icon-only action menu in dense toolbars or repeated rows. Always
+provide an `aria-label` that describes the actions available in the menu.
 
 ```tsx
 const IconMenu = () => (

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

@@ -59,7 +59,9 @@ import { AvatarComponent } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Avatar to show a known user's profile image in account menus, headers, activity rows, or other identity-focused UI. Provide alt text that names the person when the image identifies them.
+Use Avatar to show a known user's profile image in account menus, headers,
+activity rows, or other identity-focused UI. Provide alt text that names the
+person when the image identifies them.
 
 ```tsx
 const Default = () => <AvatarComponent src={avatarSrc} alt="Profile photo for Alex Morgan" />;

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

@@ -68,7 +68,8 @@ No props were emitted by reactDocgenTypescript for this component.
 
 ### Default
 
-Use Breadcrumbs when the current page sits inside a clear hierarchy. Link parent pages and keep the final item as plain text for the current page.
+Use Breadcrumbs when the current page sits inside a clear hierarchy.
+Link parent pages and keep the final item as plain text for the current page.
 
 ```tsx
 const Default = () => <Breadcrumbs>{[

package/dist/skills/maxio-react/references/components-buttons-button.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Button helps users complete a task, move through a workflow, or make a clear choice. Use it for page actions by default, and provide `href` only when the button needs to navigate with button-level emphasis.
+Button helps users complete a task, move through a workflow, or make a clear choice.
+Use it for page actions by default, and provide `href` only when the button
+needs to navigate with button-level emphasis.
 
 #### When to Use
 
@@ -96,7 +98,9 @@ import { Button, Icon } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Button for actions that happen on the current page. Prefer visible labels that describe the result of the action, and use native button behavior for actions.
+Use Button for actions that happen on the current page.
+Prefer visible labels that describe the result of the action, and use
+native button behavior for actions.
 
 ```tsx
 const Default = () => <Button onClick={action('Clicked')}>Create invoice</Button>;
@@ -104,7 +108,9 @@ const Default = () => <Button onClick={action('Clicked')}>Create invoice</Button
 
 ### As Link
 
-Use Button as navigation only when the destination still needs button-level emphasis, such as a prominent next step in a workflow. Use Link for plain text navigation.
+Use Button as navigation only when the destination still needs button-level
+emphasis, such as a prominent next step in a workflow. Use Link for plain
+text navigation.
 
 ```tsx
 const AsLink = () => <Button href="/customers/123" variant="secondary">View customer</Button>;
@@ -112,7 +118,9 @@ const AsLink = () => <Button href="/customers/123" variant="secondary">View cust
 
 ### Destructive
 
-Use danger variant for actions that remove data, cancel service, or are difficult to reverse. Pair destructive actions with confirmation or recovery guidance when the consequence is not obvious.
+Use danger variant for actions that remove data, cancel service, or are
+difficult to reverse. Pair destructive actions with confirmation or
+recovery guidance when the consequence is not obvious.
 
 ```tsx
 const Destructive = () => <Button onClick={action('Deleted')} variant="danger">Delete invoice</Button>;
@@ -120,7 +128,8 @@ const Destructive = () => <Button onClick={action('Deleted')} variant="danger">D
 
 ### Loading
 
-Use a loading button after the user starts an action and repeated activation should be prevented. Keep the label connected to the action that is running.
+Use a loading button after the user starts an action and repeated activation
+should be prevented. Keep the label connected to the action that is running.
 
 ```tsx
 const Loading = () => <Button loading onClick={action('Submitted')} type="submit">Saving changes</Button>;
@@ -139,7 +148,8 @@ const WithElements = () => <Button
 
 ### Full Width
 
-Use full-width buttons in constrained layouts where the action should align to the container width.
+Use full-width buttons in constrained layouts where the action should align
+to the container width.
 
 ```tsx
 const FullWidth = () => <div style={{ maxWidth: '20rem' }}>
@@ -150,7 +160,8 @@ const FullWidth = () => <div style={{ maxWidth: '20rem' }}>
 
 ### Variants
 
-Use variants to set visual emphasis and action tone. Choose the lowest emphasis that still makes the action easy to find.
+Use variants to set visual emphasis and action tone. Choose the lowest
+emphasis that still makes the action easy to find.
 
 ```tsx
 const Variants = () => <>

package/dist/skills/maxio-react/references/components-buttons-iconbutton.md

@@ -91,7 +91,9 @@ import { Icon, IconButton } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use IconButton for compact icon-only actions when surrounding context or an accessible name makes the action clear. Every IconButton must include an `aria-label` that describes the action outcome.
+Use IconButton for compact icon-only actions when surrounding context or an
+accessible name makes the action clear. Every IconButton must include an
+`aria-label` that describes the action outcome.
 
 ```tsx
 const Default = () => <IconButton

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

@@ -68,7 +68,9 @@ import { Body, Button, Card, Flex, Heading } from "@maxio-com/react-ui-component
 
 ### Default
 
-Use Default for a simple static content group. Always wrap the main content in Card.Body so spacing remains consistent if header or footer sections are added later.
+Use Default for a simple static content group. Always wrap the main content
+in Card.Body so spacing remains consistent if header or footer sections are
+added later.
 
 ```tsx
 const Default = () => <Card>
@@ -82,7 +84,8 @@ const Default = () => <Card>
 
 ### With Header
 
-Use WithHeader when the card needs a visible title or section label. The heading level should fit the surrounding page hierarchy.
+Use WithHeader when the card needs a visible title or section label.
+The heading level should fit the surrounding page hierarchy.
 
 ```tsx
 const WithHeader = () => <Card>
@@ -99,7 +102,8 @@ const WithHeader = () => <Card>
 
 ### With Footer
 
-Use WithFooter when the card includes actions that apply to the grouped content. Keep footer actions specific to this card.
+Use WithFooter when the card includes actions that apply to the grouped
+content. Keep footer actions specific to this card.
 
 ```tsx
 const WithFooter = () => <Card>
@@ -116,7 +120,8 @@ const WithFooter = () => <Card>
 
 ### Secondary
 
-Use Secondary for supporting panels that should sit behind the primary card hierarchy while still grouping related content.
+Use Secondary for supporting panels that should sit behind the primary card
+hierarchy while still grouping related content.
 
 ```tsx
 const Secondary = () => <Card variant="secondary">
@@ -130,7 +135,8 @@ const Secondary = () => <Card variant="secondary">
 
 ### Full
 
-Use Full when the card has a title, primary content, and local actions. Header, body, and footer sections should remain in that order.
+Use Full when the card has a title, primary content, and local actions.
+Header, body, and footer sections should remain in that order.
 
 ```tsx
 const Full = () => <Card>
@@ -153,7 +159,8 @@ const Full = () => <Card>
 
 ### Full Secondary
 
-Use FullSecondary for lower-emphasis sections that still need the complete header, body, and footer composition.
+Use FullSecondary for lower-emphasis sections that still need the complete
+header, body, and footer composition.
 
 ```tsx
 const FullSecondary = () => <Card variant="secondary">

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

@@ -4,7 +4,8 @@
 
 ### Overview
 
-Chip is used for compact, interactive values such as applied filters that can be selected, toggled, or dismissed without leaving the current context.
+Chip is used for compact, interactive values such as applied filters that can
+be selected, toggled, or dismissed without leaving the current context.
 
 #### When to Use
 
@@ -82,7 +83,9 @@ import { Chip } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Chip for a selected, actionable value such as an applied filter. Include a dismiss button when users can remove that value from the current context.
+Use Chip for a selected, actionable value such as an applied filter.
+Include a dismiss button when users can remove that value from the current
+context.
 
 ```tsx
 const Default = (args: any) => {
@@ -97,7 +100,9 @@ const Default = (args: any) => {
 
 ### Selected
 
-Use the selected state when the chip represents an active toggle, filter, or segmented choice. Keep `aria-pressed` synchronized with the visual selected state in static HTML.
+Use the selected state when the chip represents an active toggle, filter, or
+segmented choice. Keep `aria-pressed` synchronized with the visual selected
+state in static HTML.
 
 ```tsx
 const Selected = (args: any) => {
@@ -114,7 +119,8 @@ const Selected = (args: any) => {
 
 ### With Icons
 
-Use icons only when they help identify the chip value faster. Icons are supporting visuals; the visible label still provides the accessible name.
+Use icons only when they help identify the chip value faster. Icons are
+supporting visuals; the visible label still provides the accessible name.
 
 ```tsx
 const WithIcons = (args: any) => {
@@ -131,7 +137,9 @@ const WithIcons = (args: any) => {
 
 ### Controlled
 
-Use controlled state when another component owns the selection, such as a filter menu, table toolbar, or saved view. Update `isSelected` from `onChange` so visual and announced state stay in sync.
+Use controlled state when another component owns the selection, such as a
+filter menu, table toolbar, or saved view. Update `isSelected` from
+`onChange` so visual and announced state stay in sync.
 
 ```tsx
 const Controlled = (args: any) => {

package/dist/skills/maxio-react/references/components-copy-to-clipboard.md

@@ -4,7 +4,14 @@
 
 ### Overview
 
-CopyToClipboard writes a value to the clipboard and confirms it, so users can take an identifier, key, or URL out of the interface without selecting text by hand. It swaps to a check mark once copied, confirms in the tooltip, and announces the result to screen readers. Place the button directly beside the value it copies. It is ghost by default, but accepts primary, secondary, and tertiary variants when more emphasis is needed.
+CopyToClipboard writes a value to the clipboard and confirms it, so users can take
+an identifier, key, or URL out of the interface without selecting text by
+hand. It swaps to a check mark once copied, confirms in the tooltip, and
+announces the result to screen readers.
+
+Place the button directly beside the value it copies. It is ghost by default,
+but accepts primary, secondary, and tertiary variants when more emphasis is
+needed.
 
 #### When to Use
 
@@ -38,6 +45,7 @@ Use `variant` to increase its emphasis when needed:
 | `variant`   | When to use                                                    |
 | :---------- | :------------------------------------------------------------- |
 | `ghost`     | Default. Suits inline use beside the value being copied.       |
+| `subtle`    | Ghost with a gray icon. Only when it must be discreet.         |
 | `tertiary`  | Use when the copy control needs slightly more emphasis.        |
 | `secondary` | Copying is one of the main actions on the surface.             |
 | `primary`   | Rare. Only when copying is _the_ action users came to perform. |
@@ -59,8 +67,9 @@ Use `variant` to increase its emphasis when needed:
   that did not happen.
 - **Async values**: keep the button `disabled` until `value` is populated so
   users cannot copy a placeholder.
-- **Sizing**: `size` uses the shared IconButton sizing. Target areas are 28px,
-  32px, and 40px; the glyph remains 16px, consistent with
+- **Sizing**: `size` uses the shared IconButton sizing. Target areas are 24px,
+  28px, 32px, and 40px; the glyph remains 16px except at `xs`, which drops it to
+  14px and removes the padding for dense inline use. Otherwise consistent with
   other icon buttons in the system.
 
 ### Accessibility
@@ -146,16 +155,17 @@ import { Body, CopyToClipboard, Flex } from "@maxio-com/react-ui-components";
 | `onCopy` | `((value: string) => void)` | no | - | Called with the copied value once the clipboard write succeeds. | TypeLiteral |
 | `onCopyError` | `((error: unknown) => void)` | no | - | Called when the clipboard write fails, such as in an insecure context or when permission is denied. The copied state is not entered. | TypeLiteral |
 | `resetAfterMs` | `number` | no | `2000` | How long the copied state lasts before reverting, in milliseconds. | TypeLiteral |
-| `size` | `"sm" \| "md" \| "lg"` | no | `md` | Changes the size of the button. | TypeLiteral |
+| `size` | `"sm" \| "md" \| "lg" \| "xs"` | no | `md` | Changes the size of the button. | TypeLiteral |
 | `tooltipPlacement` | `"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"` | no | `top` | Where the tooltip is positioned relative to the button. | TypeLiteral |
 | `value` | `string` | yes | - | Text written to the clipboard when the button is pressed. | TypeLiteral |
-| `variant` | `"primary" \| "secondary" \| "tertiary" \| "ghost"` | no | `ghost` | Button variant. | TypeLiteral |
+| `variant` | `"primary" \| "secondary" \| "tertiary" \| "ghost" \| "subtle"` | no | `ghost` | Button variant. | TypeLiteral |
 
 ## Stories
 
 ### Default
 
-An icon-only button sitting directly beside the value it copies. `copyLabel` carries the accessible name.
+An icon-only button sitting directly beside the value it copies. `copyLabel`
+carries the accessible name.
 
 ```tsx
 const Default = () => <Flex alignItems="center" gap={1}>
@@ -173,7 +183,8 @@ const Default = () => <Flex alignItems="center" gap={1}>
 
 ### Disabled
 
-Disable the button while there is nothing to copy yet, such as before a generated secret has loaded.
+Disable the button while there is nothing to copy yet, such as before a
+generated secret has loaded.
 
 ```tsx
 const Disabled = () => <CopyToClipboard

package/dist/skills/maxio-react/references/components-data-table.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Displays TanStack Table data with Maxio table semantics, styling, and common interactions such as sorting, row selection, expansion, row actions, and pinned columns.
+Displays TanStack Table data with Maxio table semantics, styling, and common
+interactions such as sorting, row selection, expansion, row actions, and
+pinned columns.
 
 DataTable uses TanStack Table for column, row, sorting, selection, expansion,
 and pinning state while rendering Maxio table markup and classes.
@@ -266,7 +268,9 @@ import {
 
 ### Default
 
-Use DataTable when a data set needs table semantics plus common interactions such as sorting, row selection, nested expansion, custom row actions, and pinned action or control columns.
+Use DataTable when a data set needs table semantics plus common interactions
+such as sorting, row selection, nested expansion, custom row actions, and
+pinned action or control columns.
 
 ```tsx
 const Default = () => <DataTable
@@ -281,7 +285,8 @@ const Default = () => <DataTable
 
 ### Sorting
 
-Use sorting when users need to compare rows by one or more column values. Sortable headers cycle through ascending, descending, and unsorted states.
+Use sorting when users need to compare rows by one or more column values.
+Sortable headers cycle through ascending, descending, and unsorted states.
 
 ```tsx
 const Sorting = () => <DataTable enableSorting />;
@@ -289,7 +294,8 @@ const Sorting = () => <DataTable enableSorting />;
 
 ### Selecting
 
-Use row selection when users need to choose individual rows or select all rows in the current table state for a follow-up action.
+Use row selection when users need to choose individual rows or select all
+rows in the current table state for a follow-up action.
 
 ```tsx
 const Selecting = () => <DataTable enableRowSelection />;
@@ -297,7 +303,8 @@ const Selecting = () => <DataTable enableRowSelection />;
 
 ### Nested Rows
 
-Use nested rows when child records share the same shape as their parent row. Include `subRows` on the data and enable expansion controls.
+Use nested rows when child records share the same shape as their parent row.
+Include `subRows` on the data and enable expansion controls.
 
 ```tsx
 const NestedRows = () => <DataTable enableExpanding />;
@@ -305,7 +312,9 @@ const NestedRows = () => <DataTable enableExpanding />;
 
 ### Row Reordering
 
-Row reordering is controlled. Update the table data from `onRowReorder`. Choose a row reorder mode to limit movement to siblings, preserve tree depth while changing parents, or allow every valid destination.
+Row reordering is controlled. Update the table data from `onRowReorder`.
+Choose a row reorder mode to limit movement to siblings, preserve tree depth
+while changing parents, or allow every valid destination.
 
 ```tsx
 const RowReordering = () => {
@@ -339,7 +348,8 @@ const RowReordering = () => {
 
 ### Custom Rows
 
-Use custom rows when an expanded row needs richer content than the standard column layout while remaining connected to the parent row.
+Use custom rows when an expanded row needs richer content than the standard
+column layout while remaining connected to the parent row.
 
 ```tsx
 const CustomRows = () => <DataTable
@@ -352,7 +362,8 @@ const CustomRows = () => <DataTable
 
 ### Actions
 
-Use row actions for controls scoped to a single row. The actions cell is pinned to the right so those controls remain available while scrolling.
+Use row actions for controls scoped to a single row. The actions cell is
+pinned to the right so those controls remain available while scrolling.
 
 ```tsx
 const Actions = () => <DataTable data={customerData} columns={customerColumns} actions={rowActions()} />;
@@ -360,7 +371,8 @@ const Actions = () => <DataTable data={customerData} columns={customerColumns} a
 
 ### Row Action
 
-Use row action behavior when the whole row should activate a primary row destination or action while preserving keyboard access.
+Use row action behavior when the whole row should activate a primary row
+destination or action while preserving keyboard access.
 
 ```tsx
 const RowAction = () => <DataTable data={customerData} columns={customerColumns} onRowAction={logRowAction} />;
@@ -368,7 +380,8 @@ const RowAction = () => <DataTable data={customerData} columns={customerColumns}
 
 ### Components
 
-Use component cells when mapped values need Maxio components such as links, tags, or other inline display elements.
+Use component cells when mapped values need Maxio components such as links,
+tags, or other inline display elements.
 
 ```tsx
 const Components = () => <DataTable pattern size="lg" />;
@@ -376,7 +389,8 @@ const Components = () => <DataTable pattern size="lg" />;
 
 ### Header Groups
 
-Use header groups when related columns need a shared parent heading above their individual column headers.
+Use header groups when related columns need a shared parent heading above
+their individual column headers.
 
 ```tsx
 const HeaderGroups = () => <DataTable />;
@@ -384,7 +398,8 @@ const HeaderGroups = () => <DataTable />;
 
 ### Column Pinning
 
-Use column pinning when important identifying columns or action columns must stay visible while the table scrolls horizontally.
+Use column pinning when important identifying columns or action columns must
+stay visible while the table scrolls horizontally.
 
 ```tsx
 const ColumnPinning = () => <div style={{ overflowX: 'auto' }}>
@@ -404,7 +419,8 @@ const ColumnPinning = () => <div style={{ overflowX: 'auto' }}>
 
 ### Custom
 
-Use the primitive table components only for simple static tables that do not need sorting, selection, expansion, pinning, or TanStack Table state.
+Use the primitive table components only for simple static tables that do not
+need sorting, selection, expansion, pinning, or TanStack Table state.
 
 ```tsx
 const Custom = () => (

package/dist/skills/maxio-react/references/components-empty-state.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-EmptyState fills a table, list, search result, or other page section when there is no data to show, whether the surface has never had data or an active search or filter returned zero results.
+EmptyState fills a table, list, search result, or other page section when
+there is no data to show, whether the surface has never had data or an
+active search or filter returned zero results.
 
 #### When to Use
 
@@ -110,7 +112,8 @@ import { Button, EmptyState, Link } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use the full layout with a title when a surface has never had data. Pair a clear heading with one primary action that creates the first record.
+Use the full layout with a title when a surface has never had data. Pair a
+clear heading with one primary action that creates the first record.
 
 ```tsx
 const Default = () => <EmptyState
@@ -122,7 +125,8 @@ const Default = () => <EmptyState
 
 ### With Primary Action
 
-Use a link-styled primary action when creating the first record navigates to another page instead of opening a modal or form inline.
+Use a link-styled primary action when creating the first record navigates
+to another page instead of opening a modal or form inline.
 
 ```tsx
 const WithPrimaryAction = () => <EmptyState
@@ -134,7 +138,8 @@ const WithPrimaryAction = () => <EmptyState
 
 ### With Secondary Action
 
-Use a secondary link next to the primary action when a related resource, such as documentation, helps users decide what to do next.
+Use a secondary link next to the primary action when a related resource,
+such as documentation, helps users decide what to do next.
 
 ```tsx
 const WithSecondaryAction = () => <EmptyState
@@ -158,7 +163,9 @@ const WithSecondaryAction = () => <EmptyState
 
 ### No Data
 
-Use the default no-title message when a surface has no data yet and no primary action belongs inline, such as read-only or permission-restricted views.
+Use the default no-title message when a surface has no data yet and no
+primary action belongs inline, such as read-only or permission-restricted
+views.
 
 ```tsx
 const NoData = () => <EmptyState />;
@@ -166,7 +173,9 @@ const NoData = () => <EmptyState />;
 
 ### No Results
 
-Use the filtered message when an active search or filter returns zero results. Set `hasActiveFilters` so users understand adjusting their search or filters may surface results.
+Use the filtered message when an active search or filter returns zero
+results. Set `hasActiveFilters` so users understand adjusting their search
+or filters may surface results.
 
 ```tsx
 const NoResults = () => <EmptyState hasActiveFilters />;

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

@@ -79,7 +79,8 @@ import { Flex } from "@maxio-com/react-ui-components";
 
 ### Flex
 
-Use Flex for one-dimensional layout when child items need shared direction, spacing, alignment, wrapping, or proportional sizing.
+Use Flex for one-dimensional layout when child items need shared direction,
+spacing, alignment, wrapping, or proportional sizing.
 
 ```tsx
 const Default = (props) => (
@@ -130,7 +131,8 @@ const Default = (props) => (
 
 ### Basis
 
-Use basis values when sibling items need predictable initial widths before available space is distributed.
+Use basis values when sibling items need predictable initial widths before
+available space is distributed.
 
 ```tsx
 const Basis = (props) => <Flex {...props}>{props.children}</Flex>;
@@ -138,7 +140,8 @@ const Basis = (props) => <Flex {...props}>{props.children}</Flex>;
 
 ### Row Reverse
 
-Use row-reverse only when the visual order should be reversed while the source order remains unchanged for reading and assistive technology.
+Use row-reverse only when the visual order should be reversed while the
+source order remains unchanged for reading and assistive technology.
 
 ```tsx
 const RowReverse = (props) => <Flex {...props}>{props.children}</Flex>;
@@ -146,7 +149,8 @@ const RowReverse = (props) => <Flex {...props}>{props.children}</Flex>;
 
 ### Column Reverse
 
-Use column-reverse sparingly because it changes visual order without changing DOM order.
+Use column-reverse sparingly because it changes visual order without
+changing DOM order.
 
 ```tsx
 const ColumnReverse = (props) => <Flex {...props}>{props.children}</Flex>;
@@ -154,7 +158,8 @@ const ColumnReverse = (props) => <Flex {...props}>{props.children}</Flex>;
 
 ### Wrap reverse
 
-Use wrap-reverse only when additional rows should stack in the opposite cross-axis direction.
+Use wrap-reverse only when additional rows should stack in the opposite
+cross-axis direction.
 
 ```tsx
 const WrapReverse = (props) => <Flex {...props}>{props.children}</Flex>;
@@ -162,7 +167,8 @@ const WrapReverse = (props) => <Flex {...props}>{props.children}</Flex>;
 
 ### Wrap
 
-Use wrapping when items may exceed the available inline space and should continue on additional rows instead of overflowing.
+Use wrapping when items may exceed the available inline space and should
+continue on additional rows instead of overflowing.
 
 ```tsx
 const Wrap = (props) => <Flex {...props}>{props.children}</Flex>;
@@ -170,7 +176,8 @@ const Wrap = (props) => <Flex {...props}>{props.children}</Flex>;
 
 ### Grow
 
-Use grow when one or more items should absorb remaining space while fixed siblings keep their initial size.
+Use grow when one or more items should absorb remaining space while fixed
+siblings keep their initial size.
 
 ```tsx
 const Grow = (props) => <Flex {...props}>{props.children}</Flex>;
@@ -178,7 +185,8 @@ const Grow = (props) => <Flex {...props}>{props.children}</Flex>;
 
 ### Shrink
 
-Use shrink when an item may reduce in size to keep the row within its container.
+Use shrink when an item may reduce in size to keep the row within its
+container.
 
 ```tsx
 const Shrink = (props) => <Flex {...props}>{props.children}</Flex>;