@utilitywarehouse/hearth-react 0.28.6 → 0.29.0

package/public/llms/components/tooltip.md

@@ -0,0 +1,188 @@
+# Tooltip
+
+Use `Tooltip` to temporarily display short, contextual text, that
+is not critical information, related to an element when
+the element receives keyboard focus or the mouse hovers over it.
+
+- [Setup](#setup)
+- [Usage](#usage)
+- [Alignment](#alignment)
+- [Heading](#heading)
+- [Accessibility](#accessibility)
+  - [Keyboard interactions](#keyboard-interactions)
+- [API](#api)
+
+```tsx
+<Flex justifyContent="center" padding="800">
+  <Tooltip {...args}>
+    <UnstyledIconButton label="further information">
+      <InfoSmallIcon />
+    </UnstyledIconButton>
+  </Tooltip>
+</Flex>
+```
+
+## Setup
+
+`Tooltip` requires a provider to be present in the component tree. You can use
+either the global `HearthProvider` or the more specific `TooltipProvider`
+depending on your needs.
+
+### HearthProvider
+
+When setting up your application, wrap it with `HearthProvider`. This is the
+preferred approach as it includes all necessary providers for Hearth
+components, including tooltip support.
+
+```tsx
+import { HearthProvider } from '@utilitywarehouse/hearth-react';
+
+function App({ children }) {
+  return <HearthProvider>{children}</HearthProvider>;
+}
+```
+
+### TooltipProvider
+
+If you only need tooltip functionality in a specific part of your application,
+you can use `TooltipProvider` directly.
+
+```tsx
+import { TooltipProvider } from '@utilitywarehouse/hearth-react';
+
+function MyFeature({ children }) {
+  return <TooltipProvider>{children}</TooltipProvider>;
+}
+```
+
+## Usage
+
+The `Tooltip` component accepts any single child element as the trigger, and
+displays the tooltip content on hover or focus.
+
+```tsx
+import { Tooltip } from '@utilitywarehouse/hearth-react';
+import { InfoSmallIcon } from '@utilitywarehouse/hearth-react-icons';
+
+<Tooltip description="Helpful information">
+  <UnstyledIconButton label="further information">
+    <InfoSmallIcon />
+  </UnstyledIconButton>
+</Tooltip>;
+```
+
+You can also use it with other interactive elements, such as buttons:
+
+```tsx
+<Flex justifyContent="center" padding="800">
+  <Tooltip {...args}>
+    <Button variant="outline" colorScheme="functional" size="sm">
+      Tooltip
+    </Button>
+  </Tooltip>
+</Flex>
+```
+
+## Alignment
+
+Use the `align` prop to control the position of the tooltip relative to the
+trigger. The available options are: `topLeft`, `topCenter`, `topRight`,
+`bottomLeft`, `bottomCenter`, `bottomRight`, `leftCenter`, and `rightCenter`.
+
+The default alignment is `topCenter`.
+
+```tsx
+<Flex direction="column" alignItems="center" gap="400" padding="800">
+  <Flex direction="row" gap="400" alignItems="center">
+    <Tooltip description="Left Center align" align="leftCenter">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+    <Tooltip description="Right Center align" align="rightCenter">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+  </Flex>
+  <Flex direction="row" gap="400">
+    <Tooltip description="Bottom Left align" align="bottomLeft">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+    <Tooltip description="Bottom Center align" align="bottomCenter">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+    <Tooltip description="Bottom Right align" align="bottomRight">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+  </Flex>
+  <Flex direction="row" gap="400">
+    <Tooltip description="Top Left align" align="topLeft">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+    <Tooltip description="Top Center align" align="topCenter">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+    <Tooltip description="Top Right align" align="topRight">
+      <UnstyledIconButton label="further information">
+        <InfoSmallIcon />
+      </UnstyledIconButton>
+    </Tooltip>
+  </Flex>
+</Flex>
+```
+
+## Heading
+
+You can optionally include a `heading` alongside the `description` to provide
+more structured tooltip content.
+
+```tsx
+<Flex justifyContent="center" padding="800">
+  <Tooltip {...args}>
+    <UnstyledIconButton label="further information">
+      <InfoSmallIcon />
+    </UnstyledIconButton>
+  </Tooltip>
+</Flex>
+```
+
+## Accessibility
+
+Adheres to the [WAI-ARIA Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) pattern.
+
+### Keyboard interactions
+
+| Key      | Description                                |
+| -------- | ------------------------------------------ |
+| `Tab`    | Opens/closes the tooltip without delay.    |
+| `Space`  | If open, closes the tooltip without delay. |
+| `Enter`  | If open, closes the tooltip without delay. |
+| `Escape` | If open, closes the tooltip without delay. |
+
+## API
+
+| Prop                     | Type                                                                                                                         | Default     | Description                                                                                                           |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
+| `align`                  | `"rightCenter" \| "leftCenter" \| "bottomLeft" \| "bottomCenter" \| "bottomRight" \| "topLeft" \| "topCenter" \| "topRight"` | `topCenter` |                                                                                                                       |
+| `aria-label`             | `string`                                                                                                                     | —           | A more descriptive label for accessibility purpose                                                                    |
+| `heading`                | `string`                                                                                                                     | —           |                                                                                                                       |
+| `hideWhenDetached`       | `boolean`                                                                                                                    | —           |                                                                                                                       |
+| `updatePositionStrategy` | `"optimized" \| "always"`                                                                                                    | —           |                                                                                                                       |
+| `forceMount`             | `true`                                                                                                                       | —           | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
+| `onEscapeKeyDown`        | `((event: KeyboardEvent) => void)`                                                                                           | —           | Event handler called when the escape key is down. Can be prevented.                                                   |
+| `onPointerDownOutside`   | `((event: PointerDownOutsideEvent) => void)`                                                                                 | —           | Event handler called when the a `pointerdown` event happens outside of the `Tooltip`. Can be prevented.               |
+| `open`                   | `boolean`                                                                                                                    | —           |                                                                                                                       |
+| `defaultOpen`            | `boolean`                                                                                                                    | —           |                                                                                                                       |
+| `onOpenChange`           | `((open: boolean) => void)`                                                                                                  | —           |                                                                                                                       |
+| `description`            | `ReactNode`                                                                                                                  | —           |                                                                                                                       |

package/public/llms/components/unstyled-icon-button.md

@@ -0,0 +1,175 @@
+# UnstyledIconButton
+
+- [Icons](#icons)
+- [Accessibility](#accessibility)
+  - [Disabled buttons](#disabled-buttons)
+- [Size](#size)
+  - [Responsive icon sizes](#responsive-icon-sizes)
+- [Semantic HTML](#semantic-html)
+- [API](#api)
+
+```tsx
+<Flex direction="column">
+  <Box padding="200">
+    <UnstyledIconButton {...args}>
+      {args.size === 'sm' ? <CloseSmallIcon /> : <CloseMediumIcon />}
+    </UnstyledIconButton>
+  </Box>
+  <Box padding="200" backgroundColor="brand">
+    <UnstyledIconButton {...args} inverted>
+      {args.size === 'sm' ? <CloseSmallIcon /> : <CloseMediumIcon />}
+    </UnstyledIconButton>
+  </Box>
+</Flex>
+```
+
+## Icons
+
+This button is intended to be used with the Hearth Icons packages (to be released). If you do use
+another icon, please add the `data-icon` attribute to your icon so that it
+renders the appropriate styles.
+
+```tsx
+<UnstyledIconButton>
+  <AddMediumIcon />
+</UnstyledIconButton>
+
+[...]
+
+<UnstyledIconButton>
+  <MyFontIcon aria-hidden="true" data-icon />
+</UnstyledIconButton>
+```
+
+## Accessibility
+
+Follows the [WAI-ARIA Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
+
+Given the button contains only an icon (i.e. no text content), it is required
+that a label be provided. This will be announced to a screen reader, and should
+reflect the visual icon being used with the button.
+
+Icons from the UW icons packages have `aria-hidden="true"` set by default. If
+you are using an icon from outside these packages, and for purely decorative
+reasons, please ensure it has this attribute set so that the icon is hidden
+from screen readers.
+
+### Disabled buttons
+
+Disabled buttons use `aria-disabled`, rather than `disabled`, so that they are
+still focusable when using the keyboard. This means that screen readers are
+still able to find the button, with the insight that it is disabled and that
+there is perhaps an action which needs to be taken, rather than not knowing
+there is a button there at all. The `onClick` handler will be disabled, however
+you will need to make sure you disable any other expected actions, including
+when using `type="submit"`.
+
+## Size
+
+The size prop controls the size of the `UnstyledIconButton`. This is a responsive prop and
+can be used to display different sizes at different breakpoints.
+
+```tsx
+<UnstyledIconButton
+  size={{
+    mobile: 'md',
+    tablet: 'sm',
+    desktop: 'md',
+    wide: 'sm',
+  }}
+/>
+```
+
+### Responsive icon sizes
+
+If you need to render different sized icons in conjunction with the responsive
+size prop, there are a couple of ways you can do this.
+
+1. Using JS, with the `useMediaQuery` hook.
+
+```tsx
+import { AddMediumIcon, AddSmallIcon } from '@utilitywarehouse/hearth-react-icons';
+import { UnstyledIconButton, useMediaQuery, media } from '@utilitywarehouse/hearth-react';
+
+const MyComponent = () => {
+  const showDesktopIcon = useMediaQuery(media.above('desktop'));
+
+  return (
+    <UnstyledIconButton size={{ mobile: 'sm', desktop: 'md' }}>
+      {showDesktopIcon ? <AddMediumIcon /> : <AddSmallIcon />}
+    </UnstyledIconButton>
+  );
+};
+```
+
+2. Using CSS, with `Box` and style props.
+
+```tsx
+import { AddMediumIcon, AddSmallIcon } from '@utilitywarehouse/hearth-react-icons';
+import { UnstyledIconButton, Box } from '@utilitywarehouse/hearth-react';
+
+const MyComponent = () => (
+  <UnstyledIconButton size={{ mobile: 'sm', desktop: 'md' }} label="add">
+    <Box asChild display={{ mobile: 'none', desktop: 'block' }}>
+      <AddMediumIcon />
+    </Box>
+    <Box asChild display={{ desktop: 'none' }}>
+      <AddSmallIcon />
+    </Box>
+  </UnstyledIconButton>
+);
+```
+
+## Semantic HTML
+
+> If it goes somewhere it's a link, if it does something it's a button.
+
+A semantic HTML button is rendered by default, however you can change the
+underlying HTML element by using the `asChild` prop.
+
+**NOTE:** Be aware that you cannot currently use `asChild` with the `emphasis` variant.
+
+When `asChild` is set to true, the button will not render a default DOM element,
+instead cloning the child and passing it the props and behaviour required to
+make it functional.
+
+Read more about this idea in the [Radix UI composition docs](https://www.radix-ui.com/primitives/docs/guides/composition).
+
+```tsx
+<Flex gap="200">
+  <UnstyledIconButton {...args} asChild>
+    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+    <a href={args.disabled ? undefined : 'https://uw.co.uk/services'}>
+      <AddMediumIcon />
+    </a>
+  </UnstyledIconButton>
+  <UnstyledIconButton {...args} asChild loading>
+    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+    <a href={args.disabled ? undefined : 'https://uw.co.uk/services'}>
+      <AddMediumIcon />
+    </a>
+  </UnstyledIconButton>
+</Flex>
+```
+
+```tsx
+<UnstyledIconButton asChild>
+  <a href="https://uw.co.uk/services">
+    <AddMediumIcon />
+  </a>
+</UnstyledIconButton>
+```
+
+## API
+
+This component is based on the `button` element and supports the following common props:
+
+- Margin
+
+| Prop       | Type                       | Default | Description                                                                                          |
+| ---------- | -------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `label`    | `string`                   | —       |                                                                                                      |
+| `loading`  | `boolean`                  | —       | Indicate when the button is in a loading state, will also disable the button.                        |
+| `asChild`  | `boolean`                  | —       | Change the default rendered element for the one passed as a child, merging their props and behavior. |
+| `size`     | `Responsive<"sm" \| "md">` | `md`    | Sets the button height.                                                                              |
+| `inverted` | `boolean`                  | —       | Inverts the component colours, for use on darker surface colours.                                    |

package/public/llms/components/validation-text.md

@@ -0,0 +1,29 @@
+# ValidationText
+
+`ValidationText` should be used with form field components to display validation messages.
+
+```tsx
+<ValidationText status="valid">Hearth validation text</ValidationText>
+```
+
+## API
+
+This component is based on the `span` element and supports the following common props:
+
+- Margin
+- Text transform
+- Text align
+
+| Prop                | Type                                                                                                                                                                                                       | Default   | Description                                                              |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------ |
+| `status`            | `"valid" \| "invalid"`                                                                                                                                                                                     | `'valid'` | The validation status                                                    |
+| `disableUserSelect` | `boolean`                                                                                                                                                                                                  | —         | Make the text unselectable, for use when associated with input elements. |
+| `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})`>` | —         |                                                                          |
+| `textAlign`         | `Responsive<"center" \| "left" \| "right">`                                                                                                                                                                | —         |                                                                          |
+| `textTransform`     | `"none" \| "uppercase" \| "lowercase" \| "capitalize"`                                                                                                                                                     | —         | Set the text-transform on the component.                                 |

package/public/llms/components/verification-input.md

@@ -0,0 +1,96 @@
+# VerificationInput
+
+`VerificationInput` allows users to enter a one-time password (OTP) sent via
+SMS, email, or authenticator apps.
+
+```tsx
+<VerificationInput label="Label" helperText="Helper text" validationText="Validation text" />
+```
+
+## Alternatives
+
+- TextInput - For text
+- PasswordInput - For entering
+  passwords
+- SearchInput - For search
+- CurrencyInput - For money
+- DateInput - For entering dates
+
+## Controlled
+
+Use `value` in conjunction with `onValueChange` for a controlled input.
+
+```tsx
+const [value, setValue] = React.useState("");
+
+[...]
+
+<VerificationInput
+  label="Controlled"
+  value={value}
+  onValueChange={setValue}
+/>
+```
+
+## Input type
+
+By default `VerificationInput` renders a text input where the value is visible.
+You can set `type="password"` if you need to visually hide the value being
+entered.
+
+## Validation type
+
+The `VerificationInput` only accepts numeric values by default. To change this,
+use the `validationType` prop.
+
+If you set this to `"none"` you can use the `sanitizeValue` prop for custom
+sanitization. This function will be called before updating values in response
+to user interactions.
+
+## Auto submit
+
+Use the `autoSubmit` and `onAutoSubmit` props to define whether the component
+should attempt to automatically submit when all fields are filled. If the field
+is associated with an HTML form element, the form's `requestSubmit` method will
+be called. The `onAutoSubmit` callback will be called when `autoSubmit` is
+`true`, before attempting to submit the associated form.
+
+## API
+
+This component is based on the `input` element and supports the following common props:
+
+- Margin
+
+| Prop               | Type                                                                                                                                                                                                       | Default | Description                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `form`             | `string`                                                                                                                                                                                                   | —       | A string specifying the `form` element with which the input is associated. This string's value, if present, must match the id of a `form` element in the same document. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form                                                                                                                |
+| `label`            | `string`                                                                                                                                                                                                   | —       | The label for the form field, describing its purpose.                                                                                                                                                                                                                                                                                                                       |
+| `autoComplete`     | `"off" \| "one-time-code"`                                                                                                                                                                                 | —       | Specifies what—if any—permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. Allows `"one-time-code"` or `"off"`. @defaultValue `"one-time-code"` @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete |
+| `autoFocus`        | `boolean`                                                                                                                                                                                                  | —       | Whether or not the first fillable input should be focused on page-load. @defaultValue `false` @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus                                                                                                                                                                                  |
+| `autoSubmit`       | `boolean`                                                                                                                                                                                                  | —       | Whether or not the component should attempt to automatically submit when all fields are filled. If the field is associated with an HTML `form` element, the form's `requestSubmit` method will be called. @defaultValue `false`                                                                                                                                             |
+| `defaultValue`     | `string`                                                                                                                                                                                                   | —       | The initial value of the uncontrolled field.                                                                                                                                                                                                                                                                                                                                |
+| `disabled`         | `boolean`                                                                                                                                                                                                  | —       | Whether or not the the field's input elements are disabled.                                                                                                                                                                                                                                                                                                                 |
+| `name`             | `string`                                                                                                                                                                                                   | —       | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name                                                                                                                                               |
+| `onAutoSubmit`     | `((value: string) => void)`                                                                                                                                                                                | —       | When the `autoSubmit` prop is set to `true`, this callback will be fired before attempting to submit the associated form. It will be called whether or not a form is located, or if submission is not allowed.                                                                                                                                                              |
+| `onValueChange`    | `((value: string) => void)`                                                                                                                                                                                | —       | A callback fired when the field's value changes. When the component is controlled, this should update the state passed to the `value` prop.                                                                                                                                                                                                                                 |
+| `placeholder`      | `string`                                                                                                                                                                                                   | —       | Defines the text displayed in a form control when the control has no value. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder                                                                                                                                                                                                         |
+| `readOnly`         | `boolean`                                                                                                                                                                                                  | —       | Whether or not the input elements can be updated by the user. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly                                                                                                                                                                                                                          |
+| `sanitizeValue`    | `((value: string) => string)`                                                                                                                                                                              | —       | Function for custom sanitization when `validationType` is set to `"none"`. This function will be called before updating values in response to user interactions.                                                                                                                                                                                                            |
+| `type`             | `"text" \| "password"`                                                                                                                                                                                     | —       | The input type of the field's input elements. Can be `"password"` or `"text"`.                                                                                                                                                                                                                                                                                              |
+| `validationType`   | `"none" \| "numeric" \| "alpha" \| "alphanumeric"`                                                                                                                                                         | —       | Specifies the type of input validation to be used. Can be `"alpha"`, `"numeric"`, `"alphanumeric"` or `"none"`. @defaultValue `"numeric"`                                                                                                                                                                                                                                   |
+| `value`            | `string`                                                                                                                                                                                                   | —       | The controlled value of the field.                                                                                                                                                                                                                                                                                                                                          |
+| `labelId`          | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                                                                                                                                                                                                                                             |
+| `helperTextId`     | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                                                                                                                                                                                                                                             |
+| `validationTextId` | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                                                                                                                                                                                                                                             |
+| `required`         | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                                                                                                                                                                                                                                             |
+| `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.                                                                                                                                                                                                                                                                                                                                            |
+| `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})`>` | —       |                                                                                                                                                                                                                                                                                                                                                                             |