How to use the @emotion/styled.form function in @emotion/styled

import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import styled from '@emotion/styled';

// Internal
import Text from 'components/Text';
import FormField from 'components/FormField';
import TextField from 'components/TextField';
import Button from 'components/Button';
import FieldSet from 'components/FieldSet';
import UIController from 'components/UIController';
import * as Backend from 'scripts/backend-com';
import * as TYPE from 'actions/actiontypes';
import { rpcErrorHandler, trimText } from 'utils/form';

const ImportPrivKeyForm = styled.form({
  flex: 3,
});

/**
 * Import Private Keys
 *
 * @class ImportPrivKey
 * @extends {Component}
 */
@connect(
  null,
  dispatch => ({
    ResetForEncryptionRestart: () => dispatch({ type: TYPE.CLEAR_CORE_INFO }),
  })
)
@reduxForm({

// Internal
import FormField from 'components/FormField';
import TextField from 'components/TextField';
import Button from 'components/Button';
import FieldSet from 'components/FieldSet';
import { openSuccessDialog } from 'lib/ui';
import rpc from 'lib/rpc';
import { startCore } from 'lib/core';
import { consts } from 'styles';
import { errorHandler } from 'utils/form';
import passwordInvalidChars from './passwordInvalidChars';

__ = __context('Settings.Security');

const EncryptWalletForm = styled.form({
  flex: 2,
  marginRight: '1em',
});

const Note = styled.div(({ theme }) => ({
  padding: '1em',
  border: `2px dashed ${theme.mixer(0.5)}`,
  color: theme.mixer(0.5),
}));

const Characters = styled.span({
  fontFamily: consts.monoFontFamily,
  letterSpacing: 4,
});

/**

import styled from '@emotion/styled';

// Internal
import rpc from 'lib/rpc';
import { autoFetchCoreInfo } from 'lib/coreInfo';
import FormField from 'components/FormField';
import TextField from 'components/TextField';
import Button from 'components/Button';
import FieldSet from 'components/FieldSet';
import { openConfirmDialog, openErrorDialog, openSuccessDialog } from 'lib/ui';
import { errorHandler } from 'utils/form';
import passwordInvalidChars from './passwordInvalidChars';

__ = __context('Settings.Security');

const ChangePasswordComponent = styled.form({
  flex: 2,
  marginRight: '1em',
});

/**
 * Change Password Form
 *
 * @class ChangePassword
 * @extends {Component}
 */
@reduxForm({
  form: 'changePassword',
  destroyOnUnmount: false,
  initialValues: {
    password: '',
    newPassword: '',

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import styled from '@emotion/styled';

// Internal
import FormField from 'components/FormField';
import TextField from 'components/TextField';
import Button from 'components/Button';
import FieldSet from 'components/FieldSet';
import { openErrorDialog, openSuccessDialog, showNotification } from 'lib/ui';
import rpc from 'lib/rpc';
import { errorHandler, trimText } from 'utils/form';

__ = __context('Settings.Security');

const ImportPrivKeyForm = styled.form({
  flex: 3,
});

/**
 * Import Private Keys
 *
 * @class ImportPrivKey
 * @extends {Component}
 */
@reduxForm({
  form: 'importPrivateKey',
  destroyOnUnmount: false,
  initialValues: {
    accountName: '',
    privateKey: '',
  },

import DocTitle from '../../components/DocTitle';
import PageError from '../../components/PageError';
import PageLoading from '../../components/PageLoading';
import PreventNavigation from '../../components/PreventNavigation';
import Footer from './Footer';
import {
  deconstructErrorsToDataShape,
  toastItemSuccess,
  toastError,
  validateFields,
} from '../../util';
import { ItemTitle } from './ItemTitle';

let Render = ({ children }) => children();

const Form = styled.form({
  marginBottom: gridSize * 3,
});

// TODO: show updateInProgress and updateSuccessful / updateFailed UI

const getValues = (fieldsObject, item) => mapKeys(fieldsObject, field => field.serialize(item));

// Memoizing allows us to reduce the calls to `.serialize` when data hasn't
// changed.
const getInitialValues = memoizeOne(getValues);
const getCurrentValues = memoizeOne(getValues);

const deserializeItem = memoizeOne((list, data) =>
  list.deserializeItemData(data[list.gqlNames.itemQueryName])
);

import { numericOnly } from 'utils/form';
import confirmPin from 'utils/promisified/confirmPin';
import questionIcon from 'icons/question-mark-circle.svg';

// Internal Local
import Recipients from './Recipients';
import {
  getAccountOptions,
  getAddressNameMap,
  getRegisteredFieldNames,
  getAccountInfo,
} from './selectors';

__ = __context('Send');

const SendFormComponent = styled.form({
  maxWidth: 800,
  margin: '-.5em auto 0',
});

const SendFormButtons = styled.div({
  display: 'flex',
  justifyContent: 'space-between',
  marginTop: '2em',
});

const OptionsArrow = styled.span({
  display: 'inline-block',
  width: 15,
  verticalAlign: 'middle',
});

import {
  Accordion,
  AccordionActions,
  AccordionDetails,
  AccordionDivider,
  AccordionProps,
} from "../accordion";
import { Button } from "../button";
import { Alert } from "../Feedback";
import TextField from "../Input/text-field";
import { client } from "../Network";

import type { ChangeEventTarget } from "./hydrator";
import { convertChangeEvent, hydrateField } from "./hydrator";

const Form = styled.form({});

interface QueryResolverProps {
  /**
   * The inputType is the orignal resource type requested
   * eg: clutch.aws.ec2.v1.AutoscalingGroup
   */
  inputType: string;
  schemas: clutch.resolver.v1.Schema[];
  submitHandler: any;
  enableAutocomplete?: boolean;
}

const autoComplete = async (type: string, search: string): Promise => {
  // Check the length of the search query as the user might empty out the search
  // which will still trigger the on change handler
  if (search.length === 0) {

MetadataTable,
  NotePanel,
  Resolver,
  Select,
  TextField,
  useWizardContext,
} from "@clutch-sh/core";
import { useDataLayout } from "@clutch-sh/data-layout";
import type { WizardChild } from "@clutch-sh/wizard";
import { Wizard, WizardStep } from "@clutch-sh/wizard";
import styled from "@emotion/styled";
import { Grid } from "@material-ui/core";

import type { ResolverChild, WorkflowProps } from "./index";

const Form = styled.form({
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  justifyItems: "space-evenly",
  "> *": {
    padding: "8px 0",
  },
});

const StreamIdentifier: React.FC = ({ resolverType }) => {
  const { onSubmit } = useWizardContext();
  const resolvedResourceData = useDataLayout("resourceData");

  const onResolve = ({ results }) => {
    // Decide how to process results.
    resolvedResourceData.assign(results[0]);

const Container = styled.div({
  alignItems: 'center',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  minHeight: '100vh',
  width: '100%',
});

const Alerts = styled.div({
  margin: '20px auto',
  width: 650,
  height: 48,
});

const Form = styled.form({
  boxShadow: '0 2px 1px #f1f1f1',
  backgroundColor: 'white',
  border: '1px solid #e9e9e9',
  borderRadius: '0.3em',
  margin: '0 auto',
  minWidth: 650,
  padding: 40,
  display: 'flex',
  flexWrap: 'nowrap',
  justifyContent: 'center',
  alignItems: 'center',
});

const Divider = styled.div({
  borderRight: '1px solid #eee',
  minHeight: 185,

import styled from "@emotion/styled";

const Form = styled.form({
  width: "inherit",
  "> *": {
    margin: "8px 0",
  },
});

const FormRow = styled.div({
  display: "flex",
  "> *": {
    margin: "0 8px",
  },
  "> *:first-child": {
    margin: "0 8px 0 0",
  },
  "> *:last-child": {
    margin: "0 0 0 8px",