# MultiContentModule

A versatile container designed to streamline user experiences across Critical User Journeys. Accommodates a range of content including an illustration, input fields (text inputs, list cells, etc.), and an action button.

## Import

```tsx
import { MultiContentModule } from '@coinbase/cds-web/multi-content-module/MultiContentModule'
```

## Examples

### Session expired

Session Expired is a form of an Identity module that inform users when their login session has timed out. These modules require users to take action by either logging in again or switching to another account before they can continue using the product.

```tsx live
function Example() {
  const onClickConsole = () => console.log('onClick');
  const action = (
    <VStack paddingTop={2}>
      <ButtonGroup accessibilityLabel="Group" direction="vertical">
        <Button accessibilityLabel="Continue" onClick={onClickConsole}>
          Continue
        </Button>
        <Button accessibilityLabel="Cancel" onClick={onClickConsole} variant="secondary">
          Cancel
        </Button>
      </ButtonGroup>
    </VStack>
  );
  return (
    <HStack justifyContent="center">
      <MultiContentModule
        bordered
        action={action}
        title="Session Expired"
        description="Your session expired. Don't worry simply sign in again."
        accessibilityLabel="Session expired section"
        pictogram="waiting"
      >
        <Box bordered borderColor="bgLinePrimary" borderRadius={300}>
          <ListCell
            description="Satoshi Nakamoto"
            media={<Avatar alt="Sneezy" colorScheme="blue" name="Sneezy" />}
            title="satoshi@coinbase.com"
          />
        </Box>
      </MultiContentModule>
    </HStack>
  );
}
```

### Account Recovery

Account Recovery is used to explain to users the options they have when they are having difficultly accessing their account.

```tsx live
function Example() {
  const listItems = [
    {
      title: 'Upload your ID to login',
      description:
        'Once your identity is verified, you can update your phone number and regain full access to your account.',
    },
    {
      title: 'Troubleshoot',
      description: 'Visit our Help Center to find quick solutions and troubleshoot',
    },
  ];
  const onClickConsole = () => console.log('onClick');
  return (
    <HStack justifyContent="center">
      <MultiContentModule
        bordered
        title="Try another way"
        description="Select how you would like to verify it's you who owns this account"
        accessibilityLabel="Account recovery section"
        maxWidth={563}
        action={
          <Button accessibilityLabel="Back" onClick={onClickConsole} variant="secondary">
            Go back
          </Button>
        }
      >
        {listItems.map(({ title, description }, index) => (
          <ListCell
            outerSpacing={{
              padding: 0,
            }}
            key={index}
            multiline
            description={description}
            title={title}
            accessory="arrow"
          />
        ))}
      </MultiContentModule>
    </HStack>
  );
}
```

### Login

Login page is the entry point for users to access Coinbase products. Login features third-party sign in options to accelerate the sign in process.

```tsx live
function Example() {
  const theme = useTheme();
  const spectrum = theme.activeColorScheme;
  const fill = spectrum === 'light' ? 'black' : 'white';
  const size = 24;
  const onClickConsole = () => console.log('onClick');
  const PasskeyIcon = () => {
    return (
      <svg
        fill="none"
        height={size}
        viewBox="0 0 16 17"
        width={size}
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M5.373.219C4.025.506 2.899 1.637 2.556 3.04c-.119.487-.119 1.298 0 1.784.347 1.423 1.465 2.53 2.848 2.822.225.048.447.06.897.048.506-.02.64-.036.928-.133.798-.264 1.391-.686 1.857-1.326.297-.402.478-.77.62-1.237.1-.328.107-.41.107-1.066 0-.657-.008-.738-.106-1.066C9.33 1.617 8.458.713 7.229.304 6.93.202 6.826.19 6.261.178c-.422-.008-.715.004-.888.04zM12.563 4.84a2.81 2.81 0 00-1.481.856c-.783.823-1.02 2.075-.593 3.15.217.551.707 1.127 1.197 1.41l.241.142.004 2.27v2.271l.605.616.604.62 1.023-1.054 1.027-1.054-.612-.628-.612-.628.604-.62c.328-.341.6-.637.6-.657 0-.02-.216-.264-.481-.536-.265-.271-.474-.502-.466-.51.011-.008.162-.094.335-.195a2.972 2.972 0 001.363-1.804c.095-.381.107-1.09.02-1.456A2.952 2.952 0 0013.9 4.881c-.305-.085-1.024-.106-1.336-.04zm1.04 1.346c.193.138.383.483.383.702 0 .206-.166.543-.328.668-.182.142-.51.211-.72.155a.89.89 0 01-.612-.811c-.004-.673.743-1.09 1.276-.714zM4.168 9.065C2.343 9.352.81 10.69.233 12.499c-.197.624-.233.94-.233 2.14v1.09h10.667v-4.621l-.316-.308a4.4 4.4 0 01-.838-1.111l-.134-.264-.435-.15C8.237 9.032 7.901 9 6.1 9.004c-1.126.004-1.68.02-1.932.06z"
          fill={fill}
        />
      </svg>
    );
  };
  const GoogleIcon = () => {
    return (
      <svg
        fill="none"
        height={size}
        viewBox="0 0 25 25"
        width={size}
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="icon">
          <g id="logo googleg 48dp">
            <path
              clipRule="evenodd"
              d="M24.02 12.7729C24.02 11.922 23.9436 11.1038 23.8018 10.3184H12.5V14.9602H18.9582C18.68 16.4602 17.8345 17.7311 16.5636 18.582V21.5929H20.4418C22.7109 19.5038 24.02 16.4274 24.02 12.7729Z"
              fill={fill}
              fillRule="evenodd"
              id="Shape"
            />
            <path
              clipRule="evenodd"
              d="M12.5 24.4998C15.74 24.4998 18.4564 23.4252 20.4418 21.5925L16.5636 18.5816C15.4891 19.3016 14.1145 19.7271 12.5 19.7271C9.37455 19.7271 6.72909 17.6161 5.78546 14.7798H1.77637V17.8889C3.75091 21.8107 7.80909 24.4998 12.5 24.4998Z"
              fill={fill}
              fillRule="evenodd"
              id="Shape_2"
            />
            <path
              clipRule="evenodd"
              d="M5.78545 14.7801C5.54545 14.0601 5.40909 13.291 5.40909 12.5001C5.40909 11.7091 5.54545 10.9401 5.78545 10.2201V7.11096H1.77636C0.963636 8.73096 0.5 10.5637 0.5 12.5001C0.5 14.4364 0.963636 16.2691 1.77636 17.8891L5.78545 14.7801Z"
              fill={fill}
              fillRule="evenodd"
              id="Shape_3"
            />
            <path
              clipRule="evenodd"
              d="M12.5 5.27273C14.2618 5.27273 15.8436 5.87818 17.0873 7.06727L20.5291 3.62545C18.4509 1.68909 15.7345 0.5 12.5 0.5C7.80909 0.5 3.75091 3.18909 1.77637 7.11091L5.78546 10.22C6.72909 7.38364 9.37455 5.27273 12.5 5.27273Z"
              fill={fill}
              fillRule="evenodd"
              id="Shape_4"
            />
          </g>
        </g>
      </svg>
    );
  };
  const AppleIcon = () => {
    return (
      <svg
        fill="none"
        height={size}
        viewBox="0 0 24 24"
        width={size}
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="Apple Logo">
          <path
            d="M21.2808 18.424C20.933 19.2275 20.5213 19.9672 20.0442 20.6472C19.394 21.5743 18.8616 22.216 18.4513 22.5724C17.8153 23.1573 17.1338 23.4568 16.4041 23.4739C15.8802 23.4739 15.2485 23.3248 14.513 23.0224C13.7752 22.7214 13.0972 22.5724 12.4772 22.5724C11.827 22.5724 11.1296 22.7214 10.3837 23.0224C9.63662 23.3248 9.03481 23.4824 8.57468 23.498C7.87491 23.5278 7.1774 23.2197 6.48118 22.5724C6.03681 22.1848 5.48099 21.5204 4.81515 20.5791C4.10075 19.5739 3.51342 18.4084 3.05329 17.0795C2.56051 15.6442 2.31348 14.2543 2.31348 12.9087C2.31348 11.3673 2.64654 10.0379 3.31366 8.92385C3.83796 8.029 4.53546 7.32312 5.40844 6.80493C6.28142 6.28674 7.22468 6.02267 8.24048 6.00578C8.7963 6.00578 9.52518 6.1777 10.431 6.51559C11.3342 6.85462 11.9141 7.02655 12.1684 7.02655C12.3585 7.02655 13.0028 6.82552 14.0949 6.42473C15.1278 6.05305 15.9995 5.89916 16.7136 5.95978C18.6487 6.11595 20.1024 6.87876 21.0693 8.25303C19.3386 9.30163 18.4826 10.7703 18.4996 12.6544C18.5152 14.122 19.0476 15.3432 20.0939 16.3129C20.5681 16.7629 21.0977 17.1107 21.6868 17.3578C21.5591 17.7283 21.4242 18.0832 21.2808 18.424ZM16.8428 0.960131C16.8428 2.11039 16.4226 3.18439 15.5849 4.17847C14.5741 5.36023 13.3514 6.04311 12.0256 5.93536C12.0087 5.79736 11.9989 5.65213 11.9989 5.49951C11.9989 4.39526 12.4796 3.21349 13.3333 2.24724C13.7595 1.75801 14.3015 1.35122 14.9588 1.02671C15.6147 0.707053 16.2352 0.530273 16.8187 0.5C16.8357 0.653772 16.8428 0.807554 16.8428 0.960116V0.960131Z"
            fill={fill}
            id="path4"
          />
        </g>
      </svg>
    );
  };
  const socialMediaItems = [
    {
      name: 'Passkey',
      icon: <PasskeyIcon />,
    },
    {
      name: 'Google',
      icon: <GoogleIcon />,
    },
    {
      name: 'Apple',
      icon: <AppleIcon />,
    },
    {
      name: 'Wallet',
      icon: <Icon active color="foreground" name="wallet" size="m" />,
    },
  ];
  const end = (
    <VStack gap={1} paddingHorizontal={3}>
      <VStack>
        <HStack justifyContent="center" zIndex={1}>
          <Box background="background" paddingHorizontal={1.5}>
            <Text as="span" font="body" color="foregroundMuted">
              OR
            </Text>
          </Box>
        </HStack>
        <Divider marginTop={-1.5} paddingBottom={1.5} />
      </VStack>
      <HStack gap={2} justifyContent="space-between">
        {socialMediaItems.map(({ icon, name }) => (
          <VStack key={name} alignItems="center">
            <Pressable
              accessibilityLabel={name}
              background="secondary"
              borderColor="transparent"
              borderRadius="roundedFull"
              borderWidth="button"
              onClick={onClickConsole}
            >
              <Box padding={2}>{icon}</Box>
            </Pressable>
            <Text as="span" font="label2" color="foregroundMuted" paddingTop={1}>
              {name}
            </Text>
          </VStack>
        ))}
      </HStack>
    </VStack>
  );
  return (
    <HStack justifyContent="center">
      <MultiContentModule
        bordered
        action="Continue"
        actionAccessibilityLabel="Continue"
        title="Sign in to Coinbase"
        description={
          <Text as="p" font="body" color="foregroundMuted">
            By signing in, you agree to our{' '}
            <Link to="https://www.google.com/" openInNewWindow underline={false}>
              Privacy Policy
            </Link>
            . Not your device? Use a private window.
          </Text>
        }
        accessibilityLabel="Login section"
        pictogram={<LogoMark size={32} />}
        end={end}
      >
        <TextInput label="Email address" placeholder="Enter your email address" />
      </MultiContentModule>
    </HStack>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | ReactNode or Text to be displayed in TextTitle1 |
| `about` | `string \| undefined` | No | `-` | - |
| `accessKey` | `string \| undefined` | No | `-` | - |
| `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text to be displayed in Button or ReactNode to display as call to action |
| `actionAccessibilityLabel` | `string` | No | `-` | A11y Label for action button and cannot be used when action is a React Element |
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `aria-activedescendant` | `string \| undefined` | No | `-` | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| `aria-atomic` | `Booleanish \| undefined` | No | `-` | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| `aria-autocomplete` | `none \| list \| inline \| both \| undefined` | No | `-` | Indicates whether inputting text could trigger display of one or more predictions of the users intended value for an input and specifies how predictions would be presented if they are made. |
| `aria-braillelabel` | `string \| undefined` | No | `-` | Defines a string value that labels the current element, which is intended to be converted into Braille. |
| `aria-brailleroledescription` | `string \| undefined` | No | `-` | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. |
| `aria-busy` | `Booleanish \| undefined` | No | `-` | - |
| `aria-checked` | `boolean \| true \| false \| mixed \| undefined` | No | `-` | Indicates the current checked state of checkboxes, radio buttons, and other widgets. |
| `aria-colcount` | `number \| undefined` | No | `-` | Defines the total number of columns in a table, grid, or treegrid. |
| `aria-colindex` | `number \| undefined` | No | `-` | Defines an elements column index or position with respect to the total number of columns within a table, grid, or treegrid. |
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| `aria-current` | `boolean \| true \| false \| page \| step \| location \| date \| time \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
| `aria-disabled` | `Booleanish \| undefined` | No | `-` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
| `aria-dropeffect` | `none \| link \| copy \| execute \| move \| popup \| undefined` | No | `-` | Indicates what functions can be performed when a dragged object is released on the drop target. |
| `aria-errormessage` | `string \| undefined` | No | `-` | Identifies the element that provides an error message for the object. |
| `aria-expanded` | `Booleanish \| undefined` | No | `-` | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| `aria-flowto` | `string \| undefined` | No | `-` | Identifies the next element (or elements) in an alternate reading order of content which, at the users discretion, allows assistive technology to override the general default of reading in document source order. |
| `aria-grabbed` | `Booleanish \| undefined` | No | `-` | Indicates an elements grabbed state in a drag-and-drop operation. |
| `aria-haspopup` | `boolean \| true \| false \| dialog \| grid \| listbox \| menu \| tree \| undefined` | No | `-` | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| `aria-hidden` | `Booleanish \| undefined` | No | `-` | Indicates whether the element is exposed to an accessibility API. |
| `aria-invalid` | `boolean \| true \| false \| grammar \| spelling \| undefined` | No | `-` | Indicates the entered value does not conform to the format expected by the application. |
| `aria-keyshortcuts` | `string \| undefined` | No | `-` | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| `aria-label` | `string \| undefined` | No | `-` | Defines a string value that labels the current element. |
| `aria-labelledby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that labels the current element. |
| `aria-level` | `number \| undefined` | No | `-` | Defines the hierarchical level of an element within a structure. |
| `aria-live` | `off \| assertive \| polite \| undefined` | No | `-` | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| `aria-modal` | `Booleanish \| undefined` | No | `-` | Indicates whether an element is modal when displayed. |
| `aria-multiline` | `Booleanish \| undefined` | No | `-` | Indicates whether a text box accepts multiple lines of input or only a single line. |
| `aria-multiselectable` | `Booleanish \| undefined` | No | `-` | Indicates that the user may select more than one item from the current selectable descendants. |
| `aria-orientation` | `horizontal \| vertical \| undefined` | No | `-` | Indicates whether the elements orientation is horizontal, vertical, or unknown/ambiguous. |
| `aria-owns` | `string \| undefined` | No | `-` | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
| `aria-placeholder` | `string \| undefined` | No | `-` | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. |
| `aria-posinset` | `number \| undefined` | No | `-` | Defines an elements number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |
| `aria-pressed` | `boolean \| true \| false \| mixed \| undefined` | No | `-` | Indicates the current pressed state of toggle buttons. |
| `aria-readonly` | `Booleanish \| undefined` | No | `-` | Indicates that the element is not editable, but is otherwise operable. |
| `aria-relevant` | `text \| additions \| additions removals \| additions text \| all \| removals \| removals additions \| removals text \| text additions \| text removals \| undefined` | No | `-` | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. |
| `aria-required` | `Booleanish \| undefined` | No | `-` | Indicates that user input is required on the element before a form may be submitted. |
| `aria-roledescription` | `string \| undefined` | No | `-` | Defines a human-readable, author-localized description for the role of an element. |
| `aria-rowcount` | `number \| undefined` | No | `-` | Defines the total number of rows in a table, grid, or treegrid. |
| `aria-rowindex` | `number \| undefined` | No | `-` | Defines an elements row index or position with respect to the total number of rows within a table, grid, or treegrid. |
| `aria-rowindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-rowindex. |
| `aria-rowspan` | `number \| undefined` | No | `-` | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. |
| `aria-selected` | `Booleanish \| undefined` | No | `-` | Indicates the current selected state of various widgets. |
| `aria-setsize` | `number \| undefined` | No | `-` | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |
| `aria-sort` | `none \| ascending \| descending \| other \| undefined` | No | `-` | Indicates if items in a table or grid are sorted in ascending or descending order. |
| `aria-valuemax` | `number \| undefined` | No | `-` | Defines the maximum allowed value for a range widget. |
| `aria-valuemin` | `number \| undefined` | No | `-` | Defines the minimum allowed value for a range widget. |
| `aria-valuenow` | `number \| undefined` | No | `-` | Defines the current value for a range widget. |
| `aria-valuetext` | `string \| undefined` | No | `-` | Defines the human readable text alternative of aria-valuenow for a range widget. |
| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `div` | The underlying element or component the polymorphic component will render.  Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `autoCapitalize` | `off \| none \| on \| sentences \| words \| characters \| (string & {}) \| undefined` | No | `-` | - |
| `autoCorrect` | `string \| undefined` | No | `-` | - |
| `autoFocus` | `boolean \| undefined` | No | `-` | - |
| `autoSave` | `string \| undefined` | No | `-` | - |
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to be displayed at the middle of the module |
| `className` | `string \| undefined` | No | `-` | - |
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `content` | `string \| undefined` | No | `-` | - |
| `contentEditable` | `Booleanish \| inherit \| plaintext-only \| undefined` | No | `-` | - |
| `contextMenu` | `string \| undefined` | No | `-` | - |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `dangerouslySetInnerHTML` | `{ __html: string \| TrustedHTML; } \| undefined` | No | `-` | - |
| `datatype` | `string \| undefined` | No | `-` | - |
| `defaultChecked` | `boolean \| undefined` | No | `-` | - |
| `defaultValue` | `string \| number \| readonly string[] \| undefined` | No | `-` | - |
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode or Text to be displayed in TextBody to provide details about the module |
| `dir` | `string \| undefined` | No | `-` | - |
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
| `draggable` | `Booleanish \| undefined` | No | `-` | - |
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to display at the end |
| `enterKeyHint` | `enter \| done \| go \| next \| previous \| search \| send \| undefined` | No | `-` | - |
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
| `hidden` | `boolean \| undefined` | No | `-` | - |
| `id` | `string \| undefined` | No | `-` | - |
| `inlist` | `any` | No | `-` | - |
| `inputMode` | `none \| search \| text \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
| `itemID` | `string \| undefined` | No | `-` | - |
| `itemProp` | `string \| undefined` | No | `-` | - |
| `itemRef` | `string \| undefined` | No | `-` | - |
| `itemScope` | `boolean \| undefined` | No | `-` | - |
| `itemType` | `string \| undefined` | No | `-` | - |
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
| `key` | `Key \| null \| undefined` | No | `-` | - |
| `lang` | `string \| undefined` | No | `-` | - |
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
| `nonce` | `string \| undefined` | No | `-` | - |
| `onAbort` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAbortCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onActionPress` | `MouseEventHandler<Element>` | No | `-` | Callback fired when the action button pressed and cannot be used when action is a React Element |
| `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationEndCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationIterationCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationStart` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAnimationStartCapture` | `AnimationEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAuxClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onAuxClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBeforeInput` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBeforeInputCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBlur` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onBlurCapture` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlay` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlayCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlayThrough` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCanPlayThroughCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onChange` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onChangeCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionEnd` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionEndCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionStart` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionStartCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionUpdate` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCompositionUpdateCapture` | `CompositionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onContextMenu` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onContextMenuCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCopy` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCopyCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCut` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onCutCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDoubleClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDoubleClickCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDrag` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEnd` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEndCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEnter` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragEnterCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragExit` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragExitCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragLeave` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragLeaveCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragOver` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragOverCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragStart` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDragStartCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDrop` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDropCapture` | `DragEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDurationChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onDurationChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEmptied` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEmptiedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEncrypted` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEncryptedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEnded` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onEndedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onError` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onErrorCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onFocus` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onFocusCapture` | `FocusEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInput` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInputCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInvalid` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onInvalidCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyDown` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyDownCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyPress` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyPressCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyUp` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onKeyUpCapture` | `KeyboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoad` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadStart` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadStartCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedData` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedDataCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedMetadata` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLoadedMetadataCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseDown` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseDownCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseEnter` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseLeave` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseMove` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseMoveCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOut` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOutCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOver` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseOverCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseUp` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onMouseUpCapture` | `MouseEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPaste` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPasteCapture` | `ClipboardEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPause` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPauseCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlay` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlayCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlaying` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPlayingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerCancel` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerCancelCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerDown` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerDownCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerEnter` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerLeave` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerMove` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerMoveCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOut` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOutCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOver` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerOverCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerUp` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onPointerUpCapture` | `PointerEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onProgress` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onProgressCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onRateChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onRateChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onReset` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onResetCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onResize` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onResizeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onScroll` | `UIEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onScrollCapture` | `UIEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeeked` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeekedCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeeking` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSeekingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSelect` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSelectCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onStalled` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onStalledCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSubmit` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSubmitCapture` | `FormEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSuspend` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onSuspendCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTimeUpdate` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTimeUpdateCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchCancel` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchCancelCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchEnd` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchEndCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchMove` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchMoveCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchStart` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTouchStartCapture` | `TouchEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onTransitionEndCapture` | `TransitionEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onVolumeChange` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onVolumeChangeCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWaiting` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWaitingCapture` | `ReactEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWheel` | `WheelEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `onWheelCapture` | `WheelEventHandler<HTMLDivElement> \| undefined` | No | `-` | - |
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `pictogram` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null` | No | `-` | Illustration pictogram name or ReacNode to be displayed at the start of an module |
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
| `prefix` | `string \| undefined` | No | `-` | - |
| `property` | `string \| undefined` | No | `-` | - |
| `radioGroup` | `string \| undefined` | No | `-` | - |
| `ref` | `any` | No | `-` | - |
| `rel` | `string \| undefined` | No | `-` | - |
| `resource` | `string \| undefined` | No | `-` | - |
| `results` | `number \| undefined` | No | `-` | - |
| `rev` | `string \| undefined` | No | `-` | - |
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
| `role` | `AriaRole \| undefined` | No | `-` | - |
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
| `security` | `string \| undefined` | No | `-` | - |
| `slot` | `string \| undefined` | No | `-` | - |
| `spellCheck` | `Booleanish \| undefined` | No | `-` | - |
| `style` | `CSSProperties` | No | `-` | - |
| `suppressContentEditableWarning` | `boolean \| undefined` | No | `-` | - |
| `suppressHydrationWarning` | `boolean \| undefined` | No | `-` | - |
| `tabIndex` | `number \| undefined` | No | `-` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
| `translate` | `yes \| no \| undefined` | No | `-` | - |
| `typeof` | `string \| undefined` | No | `-` | - |
| `unselectable` | `off \| on \| undefined` | No | `-` | - |
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
| `vocab` | `string \| undefined` | No | `-` | - |
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |


