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

elementsToHighlight: NodeResult[];
  type: RuleType;
  addElement?: (data: any) => void;
  highlightedElementsMap?: Map;
  isToggledOn?: boolean;
  toggleId?: string;
  indeterminate?: boolean;
}

enum CheckBoxStates {
  CHECKED,
  UNCHECKED,
  INDETERMINATE,
}

const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
  cursor: disabled ? 'not-allowed' : 'pointer',
}));

const colorsByType = [
  convert(themes.normal).color.negative, // VIOLATION,
  convert(themes.normal).color.positive, // PASS,
  convert(themes.normal).color.warning, // INCOMPLETION,
];

const getIframe = memoize(1)(() => document.getElementsByTagName(IFRAME)[0]);

function getElementBySelectorPath(elementPath: string): HTMLElement {
  const iframe = getIframe();
  if (iframe && iframe.contentDocument && elementPath) {
    return iframe.contentDocument.querySelector(elementPath);
  }

import React, { useState } from 'react';
import { styled } from '@storybook/theming';
import { opacify } from 'polished';
import { Icons } from '@storybook/components';

export type FilterFieldProps = React.ComponentProps<'input'>;

const FilterField = styled.input(({ theme }) => ({
  // resets
  appearance: 'none',
  border: 'none',
  boxSizing: 'inherit',
  display: ' block',
  outline: 'none',
  width: ' 100%',
  margin: ' 0',
  background: 'transparent',
  padding: 0,
  fontSize: 'inherit',

  '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },

  '::placeholder': {
    color: theme.color.mediumdark,

min?: number;
  max?: number;
  step?: number;
}

export interface NumberTypeKnob
  extends KnobControlConfig,
    NumberTypeKnobOptions {
  value: NumberTypeKnobValue;
}

interface NumberTypeProps extends KnobControlProps {
  knob: NumberTypeKnob;
}

const RangeInput = styled.input(
  {
    boxSizing: 'border-box',
    height: 25,
    outline: 'none',
    border: '1px solid #f7f4f4',
    borderRadius: 2,
    fontSize: 11,
    padding: 5,
    color: '#444',
  },
  {
    display: 'table-cell',
    flexGrow: 1,
  }
);

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

type BooleanTypeKnobValue = boolean;

export interface BooleanTypeKnob {
  name: string;
  value: BooleanTypeKnobValue;
  separator: string;
}

export interface BooleanTypeProps {
  knob: BooleanTypeKnob;
  onChange: (value: BooleanTypeKnobValue) => BooleanTypeKnobValue;
}

const Input = styled.input({
  display: 'table-cell',
  boxSizing: 'border-box',
  verticalAlign: 'top',
  height: 21,
  outline: 'none',
  border: '1px solid #ececec',
  fontSize: '12px',
  color: '#555',
});

const serialize = (value: BooleanTypeKnobValue): string | null => (value ? String(value) : null);
const deserialize = (value: string | null) => value === 'true';

const BooleanType: FunctionComponent & {
  serialize: typeof serialize;
  deserialize: typeof deserialize;

return { boxShadow: `${theme.color.negative} 0 0 0 1px inset !important` };
    }
    case 'warn': {
      return {
        boxShadow: `${theme.color.warning} 0 0 0 1px inset`,
      };
    }
    case undefined:
    case null:
    default: {
      return {};
    }
  }
};

export const Input = styled.input(styles as any, sizes, alignment as any, validation, {
  minHeight: 32,
});
(Input as any).styles = { ...styleResets, ...styles };
(Input as any).sizes = sizes;
(Input as any).alignment = alignment;
Input.displayName = 'Input';

export const Select = styled.select(styles as any, sizes, validation, {
  height: 32,
  userSelect: 'none',
  paddingRight: 20,
  appearance: 'menulist',
} as any) as any;
Select.displayName = 'Select';

export const Textarea = styled(TextareaAutoResize)(

export const Main = styled.main({
  flex: 1,
});

export const ExernalLink = ({ children, ...props }) => (
  <a rel="noopener noreferrer">
    {children}
  </a>
);

ExernalLink.propTypes = {
  children: PropTypes.node.isRequired,
};

export const TextInput = styled.input(
  ({ colorTheme, theme }) =&gt;
    colorTheme === 'error'
      ? {
          borderColor: `${theme.color.negative}`,
          animation: `${Jiggle} 700ms ease-out`,
        }
      : {
          borderColor: 'rgba(0,0,0,0.05)',
        },
  ({ theme }) =&gt; ({
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    boxSizing: 'border-box',
    borderStyle: 'solid',

import { Location, Link as RouterLink } from '@storybook/router';

export const Section = styled.section({});

export const List = styled.div();
List.displayName = 'List';

export const A = styled.a({
  display: 'flex',
  alignItems: 'center',
  color: 'inherit',
  textDecoration: 'none',
});
A.displayName = 'A';

const FilterField = styled.input(({ theme }) => ({
  height: 30,
  boxSizing: 'border-box',
  width: '100%',
  background: 'transparent',
  border: '0 none',
  color: theme.mainTextColor,
  padding: theme.layoutMargin,
  paddingLeft: 0,
  outline: 0,
}));
const FilterForm = styled.form(({ theme, focussed }) => ({
  borderBottom: focussed ? `1px solid transparent` : '1px solid transparent',
  borderBottomColor: focussed ? theme.color.secondary : theme.mainBorderColor,
  outline: 0,
}));

function Radio(props: React.InputHTMLAttributes): React.ReactElement {
    const inner: React.ReactNode = styled.input(({ theme }: { theme: Theme }) => ({
        width: 16,
        height: 16,
        marginRight: 20,
        verticalAlign: "bottom",
    }));

    return React.createElement(inner as any, Object.assign({}, props, { type: "radio" }));
}