How to use the @storybook/theming.styled.iframe function in @storybook/theming

import window from 'global';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { styled } from '@storybook/theming';

const StyledIframe = styled.iframe({
  position: 'absolute',
  display: 'block',
  boxSizing: 'content-box',
  height: '100%',
  width: '100%',
  border: '0 none',
  transition: 'all .3s, background-position 0s',
  backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
});

export class IFrame extends Component {
  iframe = null;

  componentDidMount() {
    const { id } = this.props;
    this.iframe = window.document.getElementById(id);

import React, { Fragment, useMemo, ReactElement } from 'react';

import { useParameter, useAddonState, useStorybookState } from '@storybook/api';
import { styled } from '@storybook/theming';
import { ActionBar } from '@storybook/components';
import { PARAM_KEY, ADDON_ID } from './constants';

interface AssetDescription {
  url: string;
  name: string;
}

type Results = (string | AssetDescription)[];
type Selected = number;

const Iframe = styled.iframe({
  width: '100%',
  height: '100%',
  border: '0 none',
});
const Img = styled.img({
  width: '100%',
  height: '100%',
  border: '0 none',
  objectFit: 'contain',
});

const Asset = ({ url }: { url: string | undefined }): ReactElement => {
  if (!url) {
    return null;
  }
  if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {

allowFullScreen: boolean;
  scale: number;
}

interface StyledIFrameProps {
  scrolling: string;
  id: string;
  title: string;
  src: string;
  startedActive: boolean;
  allowFullScreen: boolean;
}

const FIREFOX_BROWSER = 'Firefox';

const StyledIframe = styled.iframe(
  {
    position: 'absolute',
    display: 'block',
    boxSizing: 'content-box',
    height: '100%',
    width: '100%',
    border: '0 none',
    transition: 'all .3s, background-position 0s',
    backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
  },
  ({ startedActive }: StyledIFrameProps) => ({
    visibility: startedActive ? 'visible' : 'hidden',
  })
);

export class IFrame extends Component {

import window from 'global';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { styled } from '@storybook/theming';

const FIREFOX_BROWSER = 'Firefox';

const StyledIframe = styled.iframe({
  position: 'absolute',
  display: 'block',
  boxSizing: 'content-box',
  height: '100%',
  width: '100%',
  border: '0 none',
  transition: 'all .3s, background-position 0s',
  backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
});

export class IFrame extends Component {
  iframe = null;

  componentDidMount() {
    const { id } = this.props;
    this.iframe = window.document.getElementById(id);