Feature Request: add in default HTML props with React.ComponentProps to each component

[QAComet]

I'd like to be able to pass in the default HTML props to each component. For example, changing

export interface FuiBadgeProps {
  // ...
}

to

export interface FuiBadgeProps extends React.ComponentProps<'div'> {
  // ...
}

would let me pass in HTML props into the parent div element. E.g. if I want to make the badge clickable, using this prop type and adding {...props} to the relevant JSX would enable me to do so. Also, this would let you pass in a ref to any FuiBadgeProps component.

For any component with multiple children, the props could be applied to the parent container, and there could be additional child props as well. E.g. for FuiCheckbox it could be refactored to

export interface FuiCheckboxProps extends React.ComponentProps<'div'> {
  // ...
  checkboxProps?: React.ComponentProps<'div'>
  labelProps?: React.ComponentProps<'label'>
}

export const FuiCheckbox = (props: FuiCheckboxProps) => {
  // ...
 const { checkboxProps, labelProps } = props;

  return (
    <div aria-label={props.ariaLabel} tabIndex={0} onKeyDown={onSpace} className={classNames} onClick={onClick} {...props}>
      <div role='checkbox' className={compPrefix} {...checkboxProps}>
        {props.checked ? <FuiIconCheck12X12 /> : props.indeterminate ? <FuiIconIndeterminateLine2x10 /> : null}
      </div>
      {props.checkLabel && <label {...labelProps}>{props.checkLabel}</label>}
    </div>
  );
};

[QAComet]

Additionally, a ref could be passed in through these props.