function ErrorDetails({ error }) {
  /** @param {Event} event */
  const onDetailsToggle = event => {
    const detailsEl = /** @type {HTMLDetailsElement} */ (event.target);
    if (!detailsEl.open) {
      return;
    }
    detailsEl.scrollIntoView({ behavior: 'smooth' });
  };

  const details = formatErrorDetails(error);
  if (!details) {
    return null;
  }

  return (
    <details
      className="hyp-u-border"
      onToggle={onDetailsToggle}
      data-testid="error-details"
    >
      <summary className="hyp-u-bg-color--grey-1 hyp-u-padding ErrorDetails__summary">
        Error Details
      </summary>
      <pre className="hyp-u-padding hyp-u-margin--0 ErrorDetails__details">
        {details}
      </pre>
    </details>
  );
}
/**
 *
 * Render pre-formatted JSON details of an error
 *
 * @param {ErrorDetailsProps} props
 */
Render pre-formatted JSON details of an error
@param {ErrorDetailsProps} props
Render pre - formatted JSON details of an error @param { ErrorDetailsProps } props
function ErrorDetails({ error }) {
  const onDetailsToggle = event => {
    const detailsEl =  (event.target);
    if (!detailsEl.open) {
      return;
    }
    detailsEl.scrollIntoView({ behavior: 'smooth' });
  };
  const details = formatErrorDetails(error);
  if (!details) {
    return null;
  }
  return (
    <details
      className="hyp-u-border"
      onToggle={onDetailsToggle}
      data-testid="error-details"
    >
      <summary className="hyp-u-bg-color--grey-1 hyp-u-padding ErrorDetails__summary">
        Error Details
      </summary>
      <pre className="hyp-u-padding hyp-u-margin--0 ErrorDetails__details">
        {details}
      </pre>
    </details>
  );
}
function ErrorDetails ( { error } ) { const onDetailsToggle = event => { const detailsEl = ( event . target ) ; if ( ! detailsEl . open ) { return ; } detailsEl . scrollIntoView ( { behavior : 'smooth' } ) ; } ; const details = formatErrorDetails ( error ) ; if ( ! details ) { return null ; } return ( < details className = "hyp-u-border" onToggle = { onDetailsToggle } data-testid = "error-details" > < summary className = "hyp-u-bg-color--grey-1 hyp-u-padding ErrorDetails__summary" > 
        Error Details
       < / summary > < pre className = "hyp-u-padding hyp-u-margin--0 ErrorDetails__details" > { details } < / pre > < / details > ) ; }
Render pre-formatted JSON details of an error
 @param {ErrorDetailsProps} props
Render pre - formatted JSON details of an error @param { ErrorDetailsProps } props
/** @param {Event} event */ /** @type {HTMLDetailsElement} */