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

import React from 'react';
import { transparentize } from 'polished';
import { styled } from '@storybook/theming';

export type SubheadingProps = React.ComponentProps<'div'>;

const Subheading = styled.div(({ theme }) => ({
  letterSpacing: '0.35em',
  textTransform: 'uppercase',
  fontWeight: theme.typography.weight.black,
  fontSize: theme.typography.size.s1 - 1,
  lineHeight: '24px',
  color: transparentize(0.5, theme.color.defaultText),
}));

// issue #6098
Subheading.defaultProps = {
  className: 'sidebar-subheading',
};

export default Subheading;

...getBlockBackgroundStyle(theme),
  overflow: 'hidden',
  height: 40,
  width: 40,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flex: 'none',

  '> img, > svg': {
    width: 20,
    height: 20,
  },
}));

const Item = styled.div({
  display: 'inline-flex',
  flexDirection: 'row',
  alignItems: 'center',
  flex: '0 1 calc(20% - 10px)',
  minWidth: 120,

  margin: '0px 10px 30px 0',
});

const List = styled.div({
  display: 'flex',
  flexFlow: 'row wrap',
});

interface IconItemProps {
  name: string;

? transparentize(0.4, theme.color.defaultText)
      : transparentize(0.6, theme.color.defaultText),

  '> div': {
    display: 'inline-block',
    overflow: 'hidden',
    maxWidth: '100%',
  },
}));

const SwatchLabels = styled.div({
  display: 'flex',
  flexDirection: 'row',
});

const Swatch = styled.div({
  flex: 1,
});

const SwatchColors = styled.div(({ theme }) => ({
  display: 'flex',
  flexDirection: 'row',
  height: 50,
  marginBottom: 5,

  borderRadius: theme.appBorderRadius,
  boxShadow:
    theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
  border: `1px solid ${theme.appBorderColor}`,
  overflow: 'hidden',
}));

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,
});

const Description = styled.div<{}>(({ theme }) => ({
  paddingBottom: 10,
  paddingTop: 10,
  borderBottom: theme.appBorderColor,
  marginLeft: 31,
  marginRight: 30,
  overflowWrap: 'break-word',
}));

const StatusColor = styled.strong<{ status: string }>(({ status, theme }) => ({
  color: status === positiveType ? theme.color.positive : theme.color.negative,

padding: '15px 0',
  boxSizing: 'border-box',
  borderTop: theme.mainBorder,
  display: 'grid',
  gridTemplateColumns: '1fr 1fr 10px',
  '& > div:first-child': {
    borderTop: '0 none',
  },
  '&:hover': {
    button: {
      visibility: 'visible',
    },
  },
}));

export const HeaderItem = styled.div({
  fontSize: 18,
  fontWeight: 500,
});

export const Button = styled.button(({ theme }) => ({
  color: theme.color.secondary,
  backgroundColor: theme.color.secondary,
  fontSize: 11,
  whiteSpace: 'nowrap',
  borderStyle: 'none',
  borderWidth: 0,
  padding: '5px 14px',
  borderRadius: 30,
  margin: '6px 6px 6px 0',
  transition: 'all .2s ease',
  cursor: 'pointer',

const Stories = styled(SidebarStories)(({ loading }) => (loading ? { marginTop: 8 } : {}));

const Container = styled.nav({
  position: 'absolute',
  zIndex: 1,
  left: 0,
  top: 0,
  bottom: 0,
  right: 0,
  width: '100%',
  height: '100%',
  overflowY: 'auto',
  overflowX: 'hidden',
});

const Foot = styled.div({});

export const Notifications = styled.div({
  position: 'fixed',
  display: 'block',
  bottom: 20,
  left: 20,
  margin: 0,
  padding: 0,
  width: '20%',
  minWidth: 200,
  maxWidth: 280,
  zIndex: 2,
});

const Sidebar = ({ storyId, notifications = [], stories, menu, menuHighlighted, loading }) => (

options: {
    [key: string]: string;
  };
}

interface CheckboxesTypeProps {
  knob: CheckboxesTypeKnob;
  isInline: boolean;
  onChange: (value: CheckboxesTypeKnobValue) => CheckboxesTypeKnobValue;
}

interface CheckboxesTypeState {
  values: CheckboxesTypeKnobValue;
}

const CheckboxesWrapper = styled.div(({ isInline }: CheckboxesWrapperProps) =>
  isInline
    ? {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        '> * + *': {
          marginLeft: 10,
        },
      }
    : {}
);

const CheckboxFieldset = styled.fieldset({
  border: 0,
  padding: 0,
  margin: 0,

import React, { Children, Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';

import { Placeholder } from '../placeholder/placeholder';
import { FlexBar } from '../bar/bar';
import { TabButton } from '../bar/button';

const Wrapper = styled.div(
  ({ theme, bordered }) =>
    bordered
      ? {
          backgroundClip: 'padding-box',
          border: `1px solid ${theme.appBorderColor}`,
          borderRadius: theme.appBorderRadius,
          overflow: 'hidden',
        }
      : {},
  ({ absolute }) =>
    absolute
      ? {
          width: '100%',
          height: '100%',
          boxSizing: 'border-box',
          display: 'flex',

backgroundColor: opacify(0.5, theme.appBorderColor),
  color: theme.color.inverseText,
  fontSize: theme.typography.size.s1,
  fontWeight: theme.typography.weight.bold,
  lineHeight: 1,
  padding: '1px 5px',
  borderRadius: '20px',
  margin: '2px 0px'
}));

const InspectorContainer = styled.div({
  flex: 1,
  padding: '0 0 0 5px'
});

const Wrapper = styled.div({
  flex: 1,
  display: 'flex',
  position: 'relative',
  height: '100%'
});

type LoggedAction = {
  count: number;
  data: {
    name: string;
    args: any;
  };
  options: {
    clearOnStoryChange: boolean;
    limit: number;
  };

import React, { Component, Fragment, useState } from 'react';
import { styled, themes, convert } from '@storybook/theming';
import { Icons } from '@storybook/components';
import Message from './Message';

const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({
  display: 'flex',
  width: '100%',
  borderTop: `1px solid ${theme.appBorderColor}`,
  '&:hover': {
    background: status === `failed` ? theme.background.hoverable : null,
  },
}));

const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
  padding: theme.layoutMargin,
  paddingLeft: theme.layoutMargin - 3,
  background: 'none',
  color: 'inherit',
  textAlign: 'left',
  cursor: status === `failed` ? 'pointer' : null,
  borderLeft: '3px solid transparent',