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

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>;

package/dist/skills/maxio-react/references/components-forms-checkbox.md

@@ -132,7 +132,9 @@ import { Checkbox, CheckboxGroup } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Checkbox for an independent yes/no choice. Provide a visible label that describes the option being selected, and use value when the checkbox belongs to a submitted form or group.
+Use Checkbox for an independent yes/no choice. Provide a visible label that
+describes the option being selected, and use value when the checkbox belongs
+to a submitted form or group.
 
 ```tsx
 const Default = () => <Checkbox
@@ -143,7 +145,9 @@ const Default = () => <Checkbox
 
 ### Checked
 
-Use a checked checkbox when the option is already selected. Use defaultChecked for uncontrolled forms, or checked with onChange when product state owns the selected value.
+Use a checked checkbox when the option is already selected. Use
+defaultChecked for uncontrolled forms, or checked with onChange when product
+state owns the selected value.
 
 ```tsx
 const Checked = () => <Checkbox
@@ -155,7 +159,9 @@ const Checked = () => <Checkbox
 
 ### Error
 
-Use error state when a required acknowledgement or group selection fails validation. Pair the invalid control with visible error text in the surrounding form.
+Use error state when a required acknowledgement or group selection fails
+validation. Pair the invalid control with visible error text in the
+surrounding form.
 
 ```tsx
 const Error = () => <Checkbox
@@ -166,7 +172,8 @@ const Error = () => <Checkbox
 
 ### Indeterminate
 
-Use indeterminate for parent options that summarize a partially selected child list, such as selecting all visible subscriptions.
+Use indeterminate for parent options that summarize a partially selected
+child list, such as selecting all visible subscriptions.
 
 ```tsx
 const Indeterminate = () => <Checkbox indeterminate label="Select all subscriptions" value="all-subscriptions" />;
@@ -174,7 +181,8 @@ const Indeterminate = () => <Checkbox indeterminate label="Select all subscripti
 
 ### Disabled
 
-Use disabled state for options that cannot be changed in the current context. Keep the label visible so users can understand what is unavailable.
+Use disabled state for options that cannot be changed in the current context.
+Keep the label visible so users can understand what is unavailable.
 
 ```tsx
 const Disabled = () => <Checkbox label="Apply expired coupon" disabled value="expired-coupon" />;
@@ -182,7 +190,8 @@ const Disabled = () => <Checkbox label="Apply expired coupon" disabled value="ex
 
 ### Default Group
 
-Use CheckboxGroup when multiple related options share one group label, helper text, validation message, and selected value array.
+Use CheckboxGroup when multiple related options share one group label, helper
+text, validation message, and selected value array.
 
 ```tsx
 const DefaultGroup = (
@@ -198,7 +207,8 @@ const DefaultGroup = (
 
 ### Disabled Group
 
-Use a disabled group when the whole set of related choices is unavailable. The disabled state should apply consistently to every option in the group.
+Use a disabled group when the whole set of related choices is unavailable.
+The disabled state should apply consistently to every option in the group.
 
 ```tsx
 const DisabledGroup = (
@@ -218,7 +228,8 @@ const DisabledGroup = (
 
 ### Helper Text Group
 
-Use helper text to explain how the selected options affect a workflow before users make a choice.
+Use helper text to explain how the selected options affect a workflow before
+users make a choice.
 
 ```tsx
 const HelperTextGroup = (
@@ -238,7 +249,9 @@ const HelperTextGroup = (
 
 ### Error Group
 
-Use group-level error messaging when validation depends on the set of selected options. Reference the error from the group so assistive technology announces the problem once for the collection.
+Use group-level error messaging when validation depends on the set of
+selected options. Reference the error from the group so assistive technology
+announces the problem once for the collection.
 
 ```tsx
 const ErrorGroup = (

package/dist/skills/maxio-react/references/components-forms-combobox.md

@@ -101,7 +101,9 @@ import { ComboBox, Grid, Icon } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use ComboBox when users choose from a known set of values and typing helps them find the right option. Provide a visible label and use placeholder text only as an example of the expected value.
+Use ComboBox when users choose from a known set of values and typing helps
+them find the right option. Provide a visible label and use placeholder text
+only as an example of the expected value.
 
 ```tsx
 const Default = () => <ComboBox
@@ -117,7 +119,9 @@ const Default = () => <ComboBox
 
 ### Dynamic Items
 
-Use dynamic items when options are loaded from typed product data. Keep each item id stable so selection state remains consistent after filtering or data refreshes.
+Use dynamic items when options are loaded from typed product data. Keep each
+item id stable so selection state remains consistent after filtering or data
+refreshes.
 
 ```tsx
 const DynamicItems = (args) => (
@@ -129,7 +133,8 @@ const DynamicItems = (args) => (
 
 ### With Sections
 
-Use sections when the option set mixes statuses, categories, or other groups that help users scan the list after filtering.
+Use sections when the option set mixes statuses, categories, or other groups
+that help users scan the list after filtering.
 
 ```tsx
 const WithSections = () => <ComboBox label="Account" placeholder="Select account">
@@ -147,7 +152,8 @@ const WithSections = () => <ComboBox label="Account" placeholder="Select account
 
 ### With Disabled Option
 
-Use disabled options when seeing an unavailable value helps users understand the full choice set. Omit unavailable options when they add noise.
+Use disabled options when seeing an unavailable value helps users understand
+the full choice set. Omit unavailable options when they add noise.
 
 ```tsx
 const WithDisabledOption = () => <ComboBox label="Account" placeholder="Select account">
@@ -160,7 +166,8 @@ const WithDisabledOption = () => <ComboBox label="Account" placeholder="Select a
 
 ### Custom Value
 
-Use custom values only when typed values outside the provided options are accepted by the product flow. Validate custom text before saving it.
+Use custom values only when typed values outside the provided options are
+accepted by the product flow. Validate custom text before saving it.
 
 ```tsx
 const CustomValue = () => <ComboBox
@@ -176,7 +183,8 @@ const CustomValue = () => <ComboBox
 
 ### Multiple Selection
 
-Use multiple selection when users can assign more than one value to the same field. Provide surrounding UI that makes selected values easy to review.
+Use multiple selection when users can assign more than one value to the same
+field. Provide surrounding UI that makes selected values easy to review.
 
 ```tsx
 const MultipleSelection = () => <ComboBox
@@ -192,7 +200,8 @@ const MultipleSelection = () => <ComboBox
 
 ### With Icon
 
-Use a leading icon when the field benefits from compact visual context, such as search. Keep decorative icons hidden from the accessible name.
+Use a leading icon when the field benefits from compact visual context, such
+as search. Keep decorative icons hidden from the accessible name.
 
 ```tsx
 const WithIcon = () => <ComboBox
@@ -207,7 +216,8 @@ const WithIcon = () => <ComboBox
 
 ### Validation
 
-Use errorMessage with isInvalid so assistive technology receives invalid state and users get actionable validation feedback.
+Use errorMessage with isInvalid so assistive technology receives invalid
+state and users get actionable validation feedback.
 
 ```tsx
 const Validation = () => <ComboBox
@@ -223,7 +233,9 @@ const Validation = () => <ComboBox
 
 ### Sizes
 
-Use size to match the density and prominence of the surrounding form. Use md for most forms, sm in dense interfaces, and lg or xl only when the form row needs more emphasis.
+Use size to match the density and prominence of the surrounding form. Use md
+for most forms, sm in dense interfaces, and lg or xl only when the form row
+needs more emphasis.
 
 ```tsx
 const Sizes = (args) => (
@@ -240,7 +252,8 @@ const Sizes = (args) => (
 
 ### Disabled
 
-Use disabled ComboBoxes when the value is unavailable and users cannot act on it in the current context.
+Use disabled ComboBoxes when the value is unavailable and users cannot act
+on it in the current context.
 
 ```tsx
 const Disabled = () => <ComboBox label="Account" placeholder="Select account" isDisabled>

package/dist/skills/maxio-react/references/components-forms-radio-group.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-RadioGroup presents a related set of mutually exclusive choices. Use Radio only as a child of RadioGroup so selection state, names, labels, helper text, and validation are announced consistently.
+RadioGroup presents a related set of mutually exclusive choices. Use Radio
+only as a child of RadioGroup so selection state, names, labels, helper text,
+and validation are announced consistently.
 
 #### When to Use
 
@@ -122,7 +124,9 @@ import { Radio, RadioGroup } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use radio groups when all choices should stay visible and users can select exactly one value. Provide a group label and stable option values for form submission.
+Use radio groups when all choices should stay visible and users can select
+exactly one value. Provide a group label and stable option values for form
+submission.
 
 ```tsx
 const Default = () => {
@@ -142,7 +146,8 @@ const Default = () => {
 
 ### With Helper Text
 
-Use helper text when users need context before choosing, such as how the selected value affects billing, access, or downstream settings.
+Use helper text when users need context before choosing, such as how the
+selected value affects billing, access, or downstream settings.
 
 ```tsx
 const WithHelperText = () => <RadioGroup
@@ -157,7 +162,8 @@ const WithHelperText = () => <RadioGroup
 
 ### Validation
 
-Use validation when a required choice is missing or the selected option is no longer available. Helper text is hidden while the error message is visible.
+Use validation when a required choice is missing or the selected option is no
+longer available. Helper text is hidden while the error message is visible.
 
 ```tsx
 const Validation = () => <RadioGroup
@@ -172,7 +178,8 @@ const Validation = () => <RadioGroup
 
 ### Disabled
 
-Use disabled groups when the choice is unavailable in the current context. Avoid disabling choices that users may need to review or copy.
+Use disabled groups when the choice is unavailable in the current context.
+Avoid disabling choices that users may need to review or copy.
 
 ```tsx
 const Disabled = () => <RadioGroup name="contract-term" label="Contract term" defaultValue="annual" disabled>
@@ -183,7 +190,8 @@ const Disabled = () => <RadioGroup name="contract-term" label="Contract term" de
 
 ### Indented Option
 
-Use indent to visually nest a radio under related content while keeping it in the same RadioGroup. Do not use indentation to create a separate group.
+Use indent to visually nest a radio under related content while keeping it in
+the same RadioGroup. Do not use indentation to create a separate group.
 
 ```tsx
 const IndentedOption = () => <RadioGroup name="tax-handling" label="Tax handling" defaultValue="standard">
@@ -195,7 +203,8 @@ const IndentedOption = () => <RadioGroup name="tax-handling" label="Tax handling
 
 ### Controlled
 
-Use controlled state when product logic needs to save, validate, transform, or share the selected value as soon as it changes.
+Use controlled state when product logic needs to save, validate, transform,
+or share the selected value as soon as it changes.
 
 ```tsx
 const Controlled = () => <ControlledRadioGroupExample name="invoice-delivery" label="Invoice delivery" />;

package/dist/skills/maxio-react/references/components-forms-select.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Select lets users choose one value from a short, known list of options. Use it for native single-selection form fields where filtering or custom option content is not needed.
+Select lets users choose one value from a short, known list of options.
+Use it for native single-selection form fields where filtering or custom
+option content is not needed.
 
 #### When to Use
 
@@ -135,7 +137,9 @@ import { Select } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Select when users choose one value from a short, known list. Provide a visible label and use controlled state when product logic needs the selected value immediately.
+Use Select when users choose one value from a short, known list. Provide a
+visible label and use controlled state when product logic needs the selected
+value immediately.
 
 ```tsx
 const Default = () => <Select label="Plan" options={planOptions} onChange={action('onChange')} />;
@@ -143,7 +147,8 @@ const Default = () => <Select label="Plan" options={planOptions} onChange={actio
 
 ### With Helper Text
 
-Use helper text when users need context before choosing, such as how the selection affects billing, reporting, or another workflow.
+Use helper text when users need context before choosing, such as how the
+selection affects billing, reporting, or another workflow.
 
 ```tsx
 const WithHelperText = () => <Select
@@ -164,7 +169,8 @@ const WithHelperText = () => <Select
 
 ### Validation
 
-Use errorMessage after validation when a required selection is missing or the chosen value is no longer available.
+Use errorMessage after validation when a required selection is missing or the
+chosen value is no longer available.
 
 ```tsx
 const Validation = () => <Select
@@ -189,7 +195,8 @@ const Validation = () => <Select
 
 ### Disabled
 
-Use disabled Selects when the value is unavailable and users cannot change it in the current context.
+Use disabled Selects when the value is unavailable and users cannot change it
+in the current context.
 
 ```tsx
 const Disabled = () => <Select
@@ -205,7 +212,8 @@ const Disabled = () => <Select
 
 ### With Disabled Options
 
-Use disabled options when only specific choices are unavailable. Keep the select itself enabled when users can still choose another option.
+Use disabled options when only specific choices are unavailable. Keep the
+select itself enabled when users can still choose another option.
 
 ```tsx
 const WithDisabledOptions = () => <Select
@@ -230,7 +238,9 @@ const WithDisabledOptions = () => <Select
 
 ### Sizes
 
-Use size to match the surrounding form density. Use md for most forms, sm in compact filters, lg for prominent rows, and xl when label and helper or error text should feel integrated with the field.
+Use size to match the surrounding form density. Use md for most forms, sm in
+compact filters, lg for prominent rows, and xl when label and helper or error
+text should feel integrated with the field.
 
 ```tsx
 const Sizes = (args) => (
@@ -244,7 +254,8 @@ const Sizes = (args) => (
 
 ### Inline
 
-Use inline Selects in compact toolbar or table controls where the label and field need to stay on one row.
+Use inline Selects in compact toolbar or table controls where the label and
+field need to stay on one row.
 
 ```tsx
 const Inline = () => <Select
@@ -269,7 +280,8 @@ const Inline = () => <Select
 
 ### Full Width
 
-Use fullWidth in stacked forms and responsive layouts where the field should align to the available parent width.
+Use fullWidth in stacked forms and responsive layouts where the field should
+align to the available parent width.
 
 ```tsx
 const FullWidth = () => <div style={{ maxWidth: '24rem' }}>

package/dist/skills/maxio-react/references/components-forms-textarea.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-TextArea lets users enter or edit a longer, multi-line text value in a form. Provide a visible label whenever possible, and use helper or validation messaging to clarify the expected content.
+TextArea lets users enter or edit a longer, multi-line text value in a form.
+Provide a visible label whenever possible, and use helper or validation
+messaging to clarify the expected content.
 
 #### When to Use
 
@@ -107,7 +109,9 @@ import { Grid, TextArea } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use TextArea for free-form content that may span multiple lines. Use controlled state when product logic needs the current value; use defaultValue for simple form submission.
+Use TextArea for free-form content that may span multiple lines. Use
+controlled state when product logic needs the current value; use
+defaultValue for simple form submission.
 
 ```tsx
 const Default = () => <TextArea
@@ -118,7 +122,8 @@ const Default = () => <TextArea
 
 ### With Description
 
-Use description text for guidance users need before writing, such as the intended audience or a length constraint.
+Use description text for guidance users need before writing, such as the
+intended audience or a length constraint.
 
 ```tsx
 const WithDescription = () => <TextArea
@@ -130,7 +135,8 @@ const WithDescription = () => <TextArea
 
 ### Validation
 
-Use errorMessage with isInvalid so assistive technology receives invalid state and users get actionable validation feedback.
+Use errorMessage with isInvalid so assistive technology receives invalid
+state and users get actionable validation feedback.
 
 ```tsx
 const Validation = () => <TextArea

package/dist/skills/maxio-react/references/components-forms-textfield.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-TextField lets users enter or edit a short, single-line text value in a form. Provide a visible label whenever possible, and pair helper or validation messaging with the field so users understand the expected value.
+TextField lets users enter or edit a short, single-line text value in a form.
+Provide a visible label whenever possible, and pair helper or validation
+messaging with the field so users understand the expected value.
 
 #### When to Use
 
@@ -113,7 +115,10 @@ import { Body, Grid, Icon, IconButton, TextField } from "@maxio-com/react-ui-com
 
 ### Default
 
-Provide a visible label and use placeholder text only as an example of the expected value. Use controlled state when product logic needs to validate, transform, save, or share the current value; use defaultValue when the field can be read from a form submit or ref.
+Provide a visible label and use placeholder text only as an example of the
+expected value. Use controlled state when product logic needs to validate,
+transform, save, or share the current value; use defaultValue when the field
+can be read from a form submit or ref.
 
 ```tsx
 const Default = () => <TextField
@@ -124,7 +129,8 @@ const Default = () => <TextField
 
 ### With Description
 
-Use description text for helper content that users need before typing, such as expected format, length, or source of the value.
+Use description text for helper content that users need before typing, such
+as expected format, length, or source of the value.
 
 ```tsx
 const WithDescription = () => <TextField
@@ -136,7 +142,8 @@ const WithDescription = () => <TextField
 
 ### With Icon
 
-Use an icon when the field benefits from compact visual context. Keep the icon decorative unless it is exposed through an interactive element.
+Use an icon when the field benefits from compact visual context. Keep the
+icon decorative unless it is exposed through an interactive element.
 
 ```tsx
 const WithIcon = () => <TextField
@@ -148,7 +155,8 @@ const WithIcon = () => <TextField
 
 ### With Text
 
-Use leading or trailing text for compact units, prefixes, suffixes, or other field-level context.
+Use leading or trailing text for compact units, prefixes, suffixes, or other
+field-level context.
 
 ```tsx
 const WithText = () => <TextField
@@ -161,7 +169,8 @@ const WithText = () => <TextField
 
 ### Validation
 
-Use errorMessage with isInvalid so assistive technology receives invalid state and users get actionable validation feedback.
+Use errorMessage with isInvalid so assistive technology receives invalid
+state and users get actionable validation feedback.
 
 ```tsx
 const Validation = () => <TextField
@@ -175,7 +184,8 @@ const Validation = () => <TextField
 
 ### Disabled
 
-Use disabled fields when the value is unavailable and users cannot act on it in the current context.
+Use disabled fields when the value is unavailable and users cannot act on it
+in the current context.
 
 ```tsx
 const Disabled = () => <TextField label="Billing contact" placeholder="Select an account first" isDisabled />;
@@ -183,7 +193,8 @@ const Disabled = () => <TextField label="Billing contact" placeholder="Select an
 
 ### Read Only
 
-Use read-only fields when the value should remain selectable and readable but cannot be edited.
+Use read-only fields when the value should remain selectable and readable but
+cannot be edited.
 
 ```tsx
 const ReadOnly = () => <TextField label="Account ID" value="acct_12345" isReadOnly />;
@@ -191,7 +202,9 @@ const ReadOnly = () => <TextField label="Account ID" value="acct_12345" isReadOn
 
 ### Sizes
 
-Use size to match the density and prominence of the surrounding form. Use md for most forms, sm in dense interfaces, lg for prominent form rows, and xl when the label and helper or error text should feel integrated with the field.
+Use size to match the density and prominence of the surrounding form. Use md
+for most forms, sm in dense interfaces, lg for prominent form rows, and xl
+when the label and helper or error text should feel integrated with the field.
 
 ```tsx
 const Sizes = (args) => (
@@ -205,7 +218,8 @@ const Sizes = (args) => (
 
 ### Full Width
 
-Use fullWidth in stacked forms and responsive layouts where the field should fill the available parent width.
+Use fullWidth in stacked forms and responsive layouts where the field should
+fill the available parent width.
 
 ```tsx
 const FullWidth = () => <TextField
@@ -217,7 +231,8 @@ const FullWidth = () => <TextField
 
 ### With Leading Element
 
-Use an interactive leading element when the field needs a compact action inside the input. Match the IconButton size to the input size.
+Use an interactive leading element when the field needs a compact action
+inside the input. Match the IconButton size to the input size.
 
 ```tsx
 const WithLeadingElement = () => <TextField
@@ -236,7 +251,8 @@ const WithLeadingElement = () => <TextField
 
 ### With Trailing Element
 
-Use an interactive trailing element when the field needs a compact action inside the input. Give the action its own accessible name.
+Use an interactive trailing element when the field needs a compact action
+inside the input. Give the action its own accessible name.
 
 ```tsx
 const WithTrailingElement = () => <TextField

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

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Grid is a layout primitive for arranging child content across rows and columns. Use it for two-dimensional layouts, and apply placement props to child Grid items when content needs to span or start and end on specific tracks.
+Grid is a layout primitive for arranging child content across rows and columns.
+Use it for two-dimensional layouts, and apply placement props to child Grid
+items when content needs to span or start and end on specific tracks.
 
 #### When to Use
 
@@ -83,7 +85,8 @@ import { Grid } from "@maxio-com/react-ui-components";
 
 ### Grid
 
-Use Grid for two-dimensional layouts that need explicit rows, columns, consistent gaps, or child item placement across tracks.
+Use Grid for two-dimensional layouts that need explicit rows, columns,
+consistent gaps, or child item placement across tracks.
 
 ```tsx
 const Default = (props) => {