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

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' }}>

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