@utilitywarehouse/hearth-react 0.28.7 → 0.29.1

package/public/llms/components/section-header.md

@@ -0,0 +1,82 @@
+# SectionHeader
+
+Use the `SectionHeader` component to help define and separate content within a
+screen. It provides structure, clarity, and improves page scannability for
+users.
+
+```tsx
+<Flex width="600px">
+  <SectionHeader
+    {...args}
+    trailingContent={
+      <Link>
+        Link text
+        <ChevronRightSmallIcon />
+      </Link>
+    }
+  />
+</Flex>
+```
+
+## Trailing content
+
+Use the `trailingContent` prop to include a `Link`, `Button` or `Badge` component.
+
+```tsx
+import { Link, SectionHeader } from '@utilitywarehouse/hearth-react';
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-icons';
+
+[...]
+
+<SectionHeader
+  {...args}
+  trailingContent={
+    <Link>
+      Link text
+      <ChevronRightSmallIcon />
+    </Link>
+  }
+/>
+```
+
+```tsx
+<Flex width="600px">
+  <SectionHeader {...args} trailingContent={<Badge size="sm">Badge</Badge>} />
+</Flex>
+```
+
+```tsx
+<Flex width="600px">
+  <SectionHeader
+    {...args}
+    trailingContent={
+      <Button size="sm" variant="outline" colorScheme="functional">
+        Button
+      </Button>
+    }
+  />
+</Flex>
+```
+
+## API
+
+This component is based on the `div` element and supports the following common props:
+
+- Margin
+
+| Prop               | Type                                                                                                                                                                                                       | Default | Description                                                                                       |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
+| `heading`          | `string`                                                                                                                                                                                                   | —       | Actual string to display as section header                                                        |
+| `headingElement`   | `"div" \| "h1" \| "h2" \| "h3" \| "h4"`                                                                                                                                                                    | `div`   |                                                                                                   |
+| `helperText`       | `string`                                                                                                                                                                                                   | —       | Optional helper text to provide additional context or instructions.                               |
+| `trailingContent`  | `ReactNode`                                                                                                                                                                                                | —       | Optional trailing content element                                                                 |
+| `validationStatus` | `"invalid"`                                                                                                                                                                                                | —       | Indicates the validation state                                                                    |
+| `validationText`   | `string`                                                                                                                                                                                                   | —       | Text to display when the `validationStatus` is set.                                               |
+| `direction`        | `Responsive<"row" \| "column">`                                                                                                                                                                            | —       | Responsive direction of the section header content. By default, the content is laid out in a row. |
+| `margin`           | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                   |
+| `marginTop`        | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                   |
+| `marginRight`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                   |
+| `marginBottom`     | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                   |
+| `marginLeft`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                   |
+| `marginX`          | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                   |
+| `marginY`          | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                   |

package/public/llms/components/select.md

@@ -0,0 +1,148 @@
+# Select
+
+`Select` enables users to select an option from a list of choices, and generally requires a final submit action to confirm the selection.
+
+```tsx
+<Select {...args}>
+  <SelectItem value="1">Item 1</SelectItem>
+  <SelectItem value="2">Item 2</SelectItem>
+  <SelectItem value="3">Item 3</SelectItem>
+  <SelectItem value="4" disabled>
+    Item 4
+  </SelectItem>
+</Select>
+```
+
+## Usage
+
+Use the root `Select` component to control the label, helper text and
+validation, and to wrap `SelectItem` component's used to display the select
+options. A `label` is required on the `Select`.
+
+```tsx
+<Select label="Choose one">
+  <SelectItem value="1">Item 1</SelectItem>
+  <SelectItem value="2">Item 2</SelectItem>
+  <SelectItem value="3">Item 3</SelectItem>
+</Select>
+```
+
+You can change the appearance of the label by using the `labelVariant` prop to
+choose between `"heading"` and `"body"` styles.
+
+## Value
+
+By default the selected item's text will be rendered. An optional placeholder
+prop is also available for when the select has no value.
+
+## Required
+
+In its default state the `Select` is optional, and is indicated as such
+with the `(optional)` text following the label.
+
+When using online forms, most users assume all fields are required by default,
+so the `Select` draws attention to when it is optional. Please make sure
+that when the input field is required for successful completion of the form,
+that you apply the `required` prop and appropriate validation is included.
+
+## Validation
+
+The input `validationStatus` can be set to either `"valid"` or `"invalid"` to
+indicate the status. This status must be accompanied by a validation text to
+explain the reason for the status.
+
+## Accessibility
+
+Follows the [ListBox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox).
+
+See the W3C [Select-Only Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) example for more information.
+
+### Keyboard interactions
+
+<Flex direction="column" gap="200" className="sb-unstyled">
+  <Flex>
+    <Box width="300px">
+      <BodyText as="span" weight="bold">
+        Key
+      </BodyText>
+    </Box>
+    <BodyText as="span" weight="bold">
+      Description
+    </BodyText>
+  </Flex>
+  <Divider />
+  {[
+    {
+      key: 'Space',
+      description:
+        'When focus is on SelectTrigger, opens the select and focuses the selected item. When focus is on an item, selects the focused item.',
+    },
+    {
+      key: 'Enter',
+      description:
+        'When focus is on SelectTrigger, opens the select and focuses the first item. When focus is on an item, selects the focused item.',
+    },
+    {
+      key: 'ArrowDown',
+      description:
+        'When focus is on SelectTrigger, opens the select. When focus is on an item, moves focus to the next item.',
+    },
+    {
+      key: 'ArrowUp',
+      description:
+        'When focus is on SelectTrigger, opens the select. When focus is on an item, moves focus to the previous item.',
+    },
+    {
+      key: 'Esc',
+      description: 'Closes the select and moves focus to SelectTrigger.',
+    },
+  ].map((kbi, i) => (
+    <>
+      <Flex>
+        <Box width="300px">
+          <kbd>{kbi.key}</kbd>
+        </Box>
+        <BodyText as="span">{kbi.description}</BodyText>
+      </Flex>
+      {i < 4 ? <Divider /> : null}
+    </>
+  ))}
+</Flex>
+
+## API
+
+This component is based on the `button` element and supports the following common props:
+
+- Margin
+
+| Prop               | Type                                                                                                                                                                                                       | Default | Description                                                         |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- |
+| `label`            | `string`                                                                                                                                                                                                   | —       | The label for the form field, describing its purpose.               |
+| `value`            | `string`                                                                                                                                                                                                   | —       |                                                                     |
+| `defaultValue`     | `string`                                                                                                                                                                                                   | —       |                                                                     |
+| `asChild`          | `boolean`                                                                                                                                                                                                  | —       |                                                                     |
+| `open`             | `boolean`                                                                                                                                                                                                  | —       |                                                                     |
+| `defaultOpen`      | `boolean`                                                                                                                                                                                                  | —       |                                                                     |
+| `onOpenChange`     | `((open: boolean) => void)`                                                                                                                                                                                | —       |                                                                     |
+| `autoComplete`     | `string`                                                                                                                                                                                                   | —       |                                                                     |
+| `required`         | `boolean`                                                                                                                                                                                                  | —       |                                                                     |
+| `onValueChange`    | `((value: string) => void)`                                                                                                                                                                                | —       |                                                                     |
+| `labelId`          | `string`                                                                                                                                                                                                   | —       |                                                                     |
+| `helperTextId`     | `string`                                                                                                                                                                                                   | —       |                                                                     |
+| `validationTextId` | `string`                                                                                                                                                                                                   | —       |                                                                     |
+| `labelVariant`     | `"body" \| "heading"`                                                                                                                                                                                      | —       | Change the label variant                                            |
+| `helperText`       | `string`                                                                                                                                                                                                   | —       | Optional helper text to provide additional context or instructions. |
+| `validationText`   | `string`                                                                                                                                                                                                   | —       | Text to display when the `validationStatus` is set.                 |
+| `validationStatus` | `"valid" \| "invalid"`                                                                                                                                                                                     | —       | Indicates the validation status.                                    |
+| `placeholder`      | `string`                                                                                                                                                                                                   | —       |                                                                     |
+| `margin`           | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                     |
+| `marginTop`        | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                     |
+| `marginRight`      | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                     |
+| `marginBottom`     | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                     |
+| `marginLeft`       | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                     |
+| `marginX`          | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                     |
+| `marginY`          | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                     |
+
+### SelectItem API
+
+This component is based on the `div` element.

package/public/llms/components/skeleton.md

@@ -0,0 +1,282 @@
+# Skeleton
+
+`Skeleton` is a collection of components that provide visual placeholders while
+content is loading. It helps improve perceived performance and user experience
+by showing a skeleton of the layout before the actual content is rendered.
+
+- [Usage](#usage)
+- [Accessibility](#accessibility)
+  - [Loading title](#loading-title)
+- [SkeletonBodyText](#skeletonbodytext)
+- [SkeletonHeading](#skeletonheading)
+- [SkeletonBox](#skeletonbox)
+- [API](#api)
+
+```tsx
+<Skeleton loadingTitle="card placeholder story">
+  <Flex direction="column" gap="300" width="320px">
+    <SkeletonBox {...args} width="100%" height="160px" borderRadius="sm" />
+    <SkeletonBox {...args} width="60%" height="20px" borderRadius="xs" />
+    <SkeletonBox {...args} width="100%" height="14px" borderRadius="xs" />
+    <SkeletonBox {...args} width="85%" height="14px" borderRadius="xs" />
+  </Flex>
+</Skeleton>
+```
+
+## Usage
+
+- `Skeleton` is a wrapper component that provides animation and accessibility features.
+- `SkeletonBox` is a component that can represent a shape placeholder, including rectangles and circles, and can be used for images, avatars, or any other content.
+- `SkeletonHeading` is a component that represents a placeholder for `Heading` text.
+- `SkeletonBodyText` is a component that represents a placeholder for `BodyText`.
+
+```tsx
+<div aria-busy={isLoading}>
+  {isLoading ? (
+    <Skeleton loadingTitle="storybook demo">
+      <Flex direction="column" gap="100">
+        <SkeletonHeading width="60%" />
+        <SkeletonBodyText width="80%" lines="3" />
+        <SkeletonBox width="100%" height="200px" />
+        <SkeletonBox width="64px" height="64px" borderRadius="full" />
+      </Flex>
+    </Skeleton>
+  ) : (
+
+    {...}
+
+  )}
+</div>
+```
+
+## Accessibility
+
+When using `Skeleton`, it's important to ensure that the loading state is
+properly communicated to assistive technologies. The `Skeleton` component, and
+any content that is loading, should be wrapped in a container with the
+`aria-busy` attribute set to `true` when content is loading, and set to `false`
+when content has loaded. This allows screen readers to announce that the
+content is currently loading.
+
+### Loading title
+
+The `Skeleton` component requires a `loadingTitle`, which provides a
+descriptive title for the loading state, and will automatically be prefixed
+with `'Loading'`. This title is announced by screen readers when the `Skeleton`
+is active, giving users context about what is being loaded.
+
+## SkeletonBodyText
+
+Use `SkeletonBodyText` when you need a placeholder for body text content. It
+supports multiple lines and the same size props as `BodyText`.
+
+```tsx
+<Skeleton loadingTitle="sizes story">
+  <Flex direction="column" gap="300" width="360px">
+    {sizes.map(size => (
+      <SkeletonBodyText key={size} {...args} size={size} lines="3" />
+    ))}
+  </Flex>
+</Skeleton>
+```
+
+## SkeletonHeading
+
+Use `SkeletonHeading` when you need a placeholder for `Heading` content. It
+supports the same size props as `Heading`.
+
+```tsx
+<Skeleton loadingTitle="sizes story">
+  <Flex direction="column" gap="200" width="360px">
+    {sizes.map(size => (
+      <SkeletonHeading key={size} {...args} size={size} />
+    ))}
+  </Flex>
+</Skeleton>
+```
+
+## SkeletonBox
+
+Use `SkeletonBox` when you need explicit control over shape and dimensions.
+
+```tsx
+<Skeleton loadingTitle="blocks story">
+  <Flex direction="column" gap="200" width="420px">
+    <SkeletonBox {...args} width="100%" height="24px" />
+    <SkeletonBox {...args} width="100%" height="24px" />
+    <SkeletonBox {...args} width="80%" height="24px" />
+  </Flex>
+</Skeleton>
+```
+
+```tsx
+<Skeleton loadingTitle="circle story">
+  <SkeletonBox {...args} />
+</Skeleton>
+```
+
+## API
+
+`Skeleton` is based on `div` and supports the following common props:
+
+- AlignSelf
+- BorderRadius
+- FlexItem
+- GridItem
+- Margin
+- Order
+- Position
+- Size
+- ZIndex
+
+| Prop                          | Type                                                                                                                                                                                                       | Default | Description |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
+| `display`                     | `Responsive<"none" \| "inline" \| "inline-block" \| "block">`                                                                                                                                              | —       |             |
+| `loadingTitle`                | `string`                                                                                                                                                                                                   | —       |             |
+| `alignSelf`                   | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —       |             |
+| `borderRadius`                | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">`                                                                                                                        | —       |             |
+| `borderRadiusTopLeftNone`     | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusTopRightNone`    | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusBottomLeftNone`  | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusBottomRightNone` | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusTopNone`         | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusRightNone`       | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusBottomNone`      | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusLeftNone`        | `boolean`                                                                                                                                                                                                  | —       |             |
+| `flex`                        | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `flexBasis`                   | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `flexShrink`                  | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `flexGrow`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumnSpan`              | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —       |             |
+| `gridArea`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumn`                  | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumnStart`             | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumnEnd`               | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridRow`                     | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridRowStart`                | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridRowEnd`                  | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `margin`                      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginTop`                   | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginRight`                 | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginBottom`                | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginLeft`                  | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginX`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginY`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `order`                       | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `position`                    | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | —       |             |
+| `inset`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `top`                         | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `right`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `bottom`                      | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `left`                        | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `width`                       | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `maxWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `minWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `height`                      | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `maxHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `minHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `zIndex`                      | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+
+### SkeletonBox API
+
+This component is based on `div` and supports the following common props:
+
+- AlignSelf
+- BorderRadius
+- FlexItem
+- GridItem
+- Margin
+- Order
+- Position
+- Size
+- ZIndex
+
+| Prop                          | Type                                                                                                                                                                                                       | Default | Description |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
+| `display`                     | `Responsive<"none" \| "inline" \| "inline-block" \| "block">`                                                                                                                                              | —       |             |
+| `alignSelf`                   | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —       |             |
+| `borderRadius`                | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">`                                                                                                                        | —       |             |
+| `borderRadiusTopLeftNone`     | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusTopRightNone`    | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusBottomLeftNone`  | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusBottomRightNone` | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusTopNone`         | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusRightNone`       | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusBottomNone`      | `boolean`                                                                                                                                                                                                  | —       |             |
+| `borderRadiusLeftNone`        | `boolean`                                                                                                                                                                                                  | —       |             |
+| `flex`                        | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `flexBasis`                   | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `flexShrink`                  | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `flexGrow`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumnSpan`              | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —       |             |
+| `gridArea`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumn`                  | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumnStart`             | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridColumnEnd`               | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridRow`                     | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridRowStart`                | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `gridRowEnd`                  | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `margin`                      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginTop`                   | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginRight`                 | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginBottom`                | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginLeft`                  | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginX`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `marginY`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |             |
+| `order`                       | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `position`                    | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | —       |             |
+| `inset`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `top`                         | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `right`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `bottom`                      | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `left`                        | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |             |
+| `width`                       | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `maxWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `minWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `height`                      | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `maxHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `minHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+| `zIndex`                      | `Responsive<string>`                                                                                                                                                                                       | —       |             |
+
+### SkeletonBodyText API
+
+This component is based on `div` and supports the following common props:
+
+- Margin
+- Size (width props only)
+
+| Prop           | Type                                                                                                                                                                                                       | Default | Description                          |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------ |
+| `width`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                      |
+| `maxWidth`     | `Responsive<string>`                                                                                                                                                                                       | —       |                                      |
+| `minWidth`     | `Responsive<string>`                                                                                                                                                                                       | —       |                                      |
+| `size`         | `Responsive<"sm" \| "md" \| "lg">`                                                                                                                                                                         | `md`    | Set the size to match BodyText size. |
+| `lines`        | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12"`                                                                                                                      | `1`     | Number of skeleton lines to render.  |
+| `margin`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                      |
+| `marginTop`    | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                      |
+| `marginRight`  | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                      |
+| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                      |
+| `marginLeft`   | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                      |
+| `marginX`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                      |
+| `marginY`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                      |
+
+### SkeletonHeading API
+
+This component is based on `div` and supports the following common props:
+
+- Margin
+- Size (width props only)
+
+| Prop           | Type                                                                                                                                                                                                       | Default | Description                         |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------- |
+| `width`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                     |
+| `maxWidth`     | `Responsive<string>`                                                                                                                                                                                       | —       |                                     |
+| `minWidth`     | `Responsive<string>`                                                                                                                                                                                       | —       |                                     |
+| `size`         | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"`                                                                                                                                                                    | `md`    | Set the size to match Heading size. |
+| `margin`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                     |
+| `marginTop`    | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                     |
+| `marginRight`  | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                     |
+| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                     |
+| `marginLeft`   | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                     |
+| `marginX`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                     |
+| `marginY`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                     |