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

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) => {

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

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Icon renders Maxio custom icons, approved brand icons, and supported Font Awesome fallback icons. Use icons as decorative or supporting visual cues alongside text; use IconButton when the icon itself performs an action.
+Icon renders Maxio custom icons, approved brand icons, and supported Font
+Awesome fallback icons. Use icons as decorative or supporting visual cues
+alongside text; use IconButton when the icon itself performs an action.
 
 #### When to Use
 
@@ -116,7 +118,9 @@ import { Icon } from "@maxio-com/react-ui-components";
 
 ### Custom Maxio Icon
 
-Use a Maxio kit icon when a small visual cue reinforces nearby text, status, or navigation. Keep the icon decorative unless surrounding text supplies the accessible meaning.
+Use a Maxio kit icon when a small visual cue reinforces nearby text, status,
+or navigation. Keep the icon decorative unless surrounding text supplies the
+accessible meaning.
 
 ```tsx
 const Default = () => <Icon variant="home" size="md" color="primary" />;
@@ -124,7 +128,8 @@ const Default = () => <Icon variant="home" size="md" color="primary" />;
 
 ### Colored
 
-Use semantic color when an icon needs to match nearby status, tone, or visual emphasis. Do not use color as the only way to communicate meaning.
+Use semantic color when an icon needs to match nearby status, tone, or visual
+emphasis. Do not use color as the only way to communicate meaning.
 
 ```tsx
 const Colored = () => <Icon variant="info-circle-fill" size="md" color="info" />;
@@ -132,7 +137,8 @@ const Colored = () => <Icon variant="info-circle-fill" size="md" color="info" />
 
 ### Brand Icon
 
-Use approved brand icons with their built-in brand colors. The color prop is intentionally ignored for brand icons.
+Use approved brand icons with their built-in brand colors. The color prop is
+intentionally ignored for brand icons.
 
 ```tsx
 const BrandIcon = () => <Icon variant={BRAND_ICONS[1]} size="md" />;
@@ -140,7 +146,8 @@ const BrandIcon = () => <Icon variant={BRAND_ICONS[1]} size="md" />;
 
 ### Duotone Brand Icon
 
-Use duotone brand icons only for brands that have an approved duotone asset. Keep the generated `fa-kit-duotone` class so Font Awesome renders both tones.
+Use duotone brand icons only for brands that have an approved duotone asset.
+Keep the generated `fa-kit-duotone` class so Font Awesome renders both tones.
 
 ```tsx
 const DuotoneBrandIcon = () => <Icon variant={BRAND_ICONS_DUOTONE[0]} size="md" />;
@@ -148,7 +155,8 @@ const DuotoneBrandIcon = () => <Icon variant={BRAND_ICONS_DUOTONE[0]} size="md"
 
 ### Font Awesome Icon
 
-Use a supported Font Awesome fallback icon only when the Maxio kit does not include an appropriate icon.
+Use a supported Font Awesome fallback icon only when the Maxio kit does not
+include an appropriate icon.
 
 ```tsx
 const FontAwesomeIcon = () => <Icon variant={NON_KIT_ICONS_LIST[2]} size="md" color="secondary" />;
@@ -156,7 +164,8 @@ const FontAwesomeIcon = () => <Icon variant={NON_KIT_ICONS_LIST[2]} size="md" co
 
 ### Sizes
 
-Use size to match the density of the surrounding UI. Most product interfaces should use the default surrounding component size rather than oversized icons.
+Use size to match the density of the surrounding UI. Most product interfaces
+should use the default surrounding component size rather than oversized icons.
 
 ```tsx
 const Sizes = (args) => (

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

@@ -4,7 +4,8 @@
 
 ### Overview
 
-Link navigates users to another page, route, document, or external resource.
+Link navigates users to another page, route, document, or external
+resource.
 
 #### When to Use
 
@@ -93,7 +94,9 @@ import { Body, Heading, Link } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use the default Link for standalone navigation to another page, route, or resource. The visible text should name the destination instead of describing the gesture.
+Use the default Link for standalone navigation to another page, route, or
+resource. The visible text should name the destination instead of describing
+the gesture.
 
 ```tsx
 const Default = () => <Link underline={false} disabled={false} external={false} href="/customers">Customer profile</Link>;
@@ -101,7 +104,9 @@ const Default = () => <Link underline={false} disabled={false} external={false}
 
 ### Component
 
-Use Link around heading or text components when the whole text element is the navigation target. Avoid wrapping large interactive regions or nesting interactive controls inside the anchor.
+Use Link around heading or text components when the whole text element is the
+navigation target. Avoid wrapping large interactive regions or nesting
+interactive controls inside the anchor.
 
 ```tsx
 const Component = () => <Link underline={false} disabled={false} external={false} href="#">
@@ -111,7 +116,9 @@ const Component = () => <Link underline={false} disabled={false} external={false
 
 ### Icon
 
-Use an icon only for standalone links where the icon reinforces destination behavior, such as opening an external resource. Do not use icon links inside sentences.
+Use an icon only for standalone links where the icon reinforces destination
+behavior, such as opening an external resource. Do not use icon links inside
+sentences.
 
 ```tsx
 const Icon = () => <Link
@@ -124,7 +131,9 @@ const Icon = () => <Link
 
 ### Inline
 
-Use inline links inside body copy when the surrounding sentence supplies context. Underline inline links so they remain recognizable without relying on color alone.
+Use inline links inside body copy when the surrounding sentence supplies
+context. Underline inline links so they remain recognizable without relying
+on color alone.
 
 ```tsx
 const Inline = () => <Body size="md">Use an{' '}
@@ -135,7 +144,9 @@ const Inline = () => <Body size="md">Use an{' '}
 
 ### Variants
 
-Use variants to tune link emphasis for the surrounding surface. Keep the meaning of the link in the label and choose the lowest emphasis that remains easy to find.
+Use variants to tune link emphasis for the surrounding surface. Keep the
+meaning of the link in the label and choose the lowest emphasis that remains
+easy to find.
 
 ```tsx
 const Variants = () => <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>