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

'& > *': {
    marginLeft: 20,
  },
  '& > *:first-child': {
    marginLeft: 0,
  },
}));

export const Upgrade = styled.div(({ theme }) => ({
  flex: 1,
  paddingTop: 20,
  marginTop: 20,
  borderTop: theme.mainBorder,
}));

export const Pre = styled.pre({
  overflow: 'auto',
  boxSizing: 'border-box',
  display: 'block',
});

// Shortcuts Components
export const ColWrapper = styled.div({
  flexDirection: 'column',
  display: 'flex',
  maxWidth: 600,
  margin: '0 auto',
});

export const GridWrapper = styled.div({
  display: 'grid',
  gridTemplateColumns: '1fr',

{
    position: 'relative',
  },
  ({ theme }) => ({
    '& code': {
      paddingRight: theme.layoutMargin,
    },
  }),
  ({ theme }) => themedSyntax(theme)
);

export interface PreProps {
  padded?: boolean;
}

const Pre = styled.pre(({ theme, padded }) => ({
  display: 'flex',
  justifyContent: 'flex-start',
  margin: 0,
  padding: padded ? theme.layoutMargin : 0,
}));

const Code = styled.code({
  flex: 1,
  paddingRight: 0,
  opacity: 1,
});

export interface SyntaxHighlighterProps {
  language: string;
  copyable?: boolean;
  bordered?: boolean;

import { ActionBar } from '@storybook/components';
import { opacify } from 'polished';

const ADDON_ID = 'brookjs-desalinate/storybook';
const PANEL_ID = `${ADDON_ID}/panel`;
const EVENT_ID = `${ADDON_ID}/event`;

const safeDeepEqual = (a: any, b: any) => {
  try {
    return a === b;
  } catch (e) {
    return false;
  }
};

const Actions = styled.pre({
  flex: 1,
  margin: 0,
  padding: '10px 5px 20px',
  overflowY: 'auto',
  color: '#666'
});

const Action = styled.div({
  display: 'flex',
  padding: '0',
  borderLeft: '5px solid transparent',
  borderBottom: '1px solid transparent',
  transition: 'all 0.1s',
  alignItems: 'flex-start'
});

{
    position: 'relative',
  },
  ({ theme }) => ({
    '& code': {
      paddingRight: theme.layoutMargin,
    },
  }),
  ({ theme }) => themedSyntax(theme)
);

interface PreProps {
  padded?: boolean;
}

const Pre = styled.pre(({ theme, padded }) => ({
  display: 'flex',
  justifyContent: 'flex-start',
  margin: 0,
  padding: padded ? theme.layoutMargin : 0,
}));

const Code = styled.code({
  flex: 1,
  paddingRight: 0,
  opacity: 1,
});

export interface SyntaxHighlighterProps {
  language: string;
  copyable?: boolean;
  bordered?: boolean;

const endToken = '[39m';
const failStartToken = '[31m';
const passStartToken = '[32m';
const stackTraceStartToken = 'at';
const titleEndToken = ':';

type MsgElement = string | JSX.Element;

class TestDetail {
  description: MsgElement[];

  result: MsgElement[];

  stackTrace: string;
}
const StackTrace = styled.pre<{}>(({ theme }) => ({
  background: theme.color.lighter,
  paddingTop: 4,
  paddingBottom: 4,
  paddingLeft: 6,
  borderRadius: 2,
  overflow: 'auto',
  margin: '10px 30px 10px 30px',
  whiteSpace: 'pre',
}));

const Results = styled.div({
  paddingTop: 10,
  marginLeft: 31,
  marginRight: 30,
});