formik/dist/formik.esm.js.map

Build forms in React, without the tears

{"version":3,"file":"formik.esm.js","sources":["../src/FormikContext.tsx","../src/utils.ts","../src/Formik.tsx","../src/Field.tsx","../src/Form.tsx","../src/withFormik.tsx","../src/connect.tsx","../src/FieldArray.tsx","../src/ErrorMessage.tsx","../src/FastField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormikContextType } from './types';\nimport invariant from 'tiny-warning';\n\nexport const FormikContext = React.createContext<FormikContextType<any>>(\n  undefined as any\n);\nFormikContext.displayName = 'FormikContext';\n\nexport const FormikProvider = FormikContext.Provider;\nexport const FormikConsumer = FormikContext.Consumer;\n\nexport function useFormikContext<Values>() {\n  const formik = React.useContext<FormikContextType<Values>>(FormikContext);\n\n  invariant(\n    !!formik,\n    `Formik context is undefined, please verify you are calling useFormikContext() as child of a <Formik> component.`\n  );\n\n  return formik;\n}\n","import clone from 'lodash/clone';\nimport toPath from 'lodash/toPath';\nimport * as React from 'react';\n\n// Assertions\n\n/** @private is the value an empty array? */\nexport const isEmptyArray = (value?: any) =>\n  Array.isArray(value) && value.length === 0;\n\n/** @private is the given object a Function? */\nexport const isFunction = (obj: any): obj is Function =>\n  typeof obj === 'function';\n\n/** @private is the given object an Object? */\nexport const isObject = (obj: any): obj is Object =>\n  obj !== null && typeof obj === 'object';\n\n/** @private is the given object an integer? */\nexport const isInteger = (obj: any): boolean =>\n  String(Math.floor(Number(obj))) === obj;\n\n/** @private is the given object a string? */\nexport const isString = (obj: any): obj is string =>\n  Object.prototype.toString.call(obj) === '[object String]';\n\n/** @private is the given object a NaN? */\n// eslint-disable-next-line no-self-compare\nexport const isNaN = (obj: any): boolean => obj !== obj;\n\n/** @private Does a React component have exactly 0 children? */\nexport const isEmptyChildren = (children: any): boolean =>\n  React.Children.count(children) === 0;\n\n/** @private is the given object/value a promise? */\nexport const isPromise = (value: any): value is PromiseLike<any> =>\n  isObject(value) && isFunction(value.then);\n\n/** @private is the given object/value a type of synthetic event? */\nexport const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>\n  value && isObject(value) && isObject(value.target);\n\n/**\n * Same as document.activeElement but wraps in a try-catch block. In IE it is\n * not safe to call document.activeElement if there is nothing focused.\n *\n * The activeElement will be null only if the document or document body is not\n * yet defined.\n *\n * @param {?Document} doc Defaults to current document.\n * @return {Element | null}\n * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js\n */\nexport function getActiveElement(doc?: Document): Element | null {\n  doc = doc || (typeof document !== 'undefined' ? document : undefined);\n  if (typeof doc === 'undefined') {\n    return null;\n  }\n  try {\n    return doc.activeElement || doc.body;\n  } catch (e) {\n    return doc.body;\n  }\n}\n\n/**\n * Deeply get a value from an object via its path.\n */\nexport function getIn(\n  obj: any,\n  key: string | string[],\n  def?: any,\n  p: number = 0\n) {\n  const path = toPath(key);\n  while (obj && p < path.length) {\n    obj = obj[path[p++]];\n  }\n\n  // check if path is not in the end\n  if (p !== path.length && !obj) {\n    return def;\n  }\n\n  return obj === undefined ? def : obj;\n}\n\n/**\n * Deeply set a value from in object via it's path. If the value at `path`\n * has changed, return a shallow copy of obj with `value` set at `path`.\n * If `value` has not changed, return the original `obj`.\n *\n * Existing objects / arrays along `path` are also shallow copied. Sibling\n * objects along path retain the same internal js reference. Since new\n * objects / arrays are only created along `path`, we can test if anything\n * changed in a nested structure by comparing the object's reference in\n * the old and new object, similar to how russian doll cache invalidation\n * works.\n *\n * In earlier versions of this function, which used cloneDeep, there were\n * issues whereby settings a nested value would mutate the parent\n * instead of creating a new object. `clone` avoids that bug making a\n * shallow copy of the objects along the update path\n * so no object is mutated in place.\n *\n * Before changing this function, please read through the following\n * discussions.\n *\n * @see https://github.com/developit/linkstate\n * @see https://github.com/jaredpalmer/formik/pull/123\n */\nexport function setIn(obj: any, path: string, value: any): any {\n  let res: any = clone(obj); // this keeps inheritance when obj is a class\n  let resVal: any = res;\n  let i = 0;\n  let pathArray = toPath(path);\n\n  for (; i < pathArray.length - 1; i++) {\n    const currentPath: string = pathArray[i];\n    let currentObj: any = getIn(obj, pathArray.slice(0, i + 1));\n\n    if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {\n      resVal = resVal[currentPath] = clone(currentObj);\n    } else {\n      const nextPath: string = pathArray[i + 1];\n      resVal = resVal[currentPath] =\n        isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};\n    }\n  }\n\n  // Return original object if new value is the same as current\n  if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {\n    return obj;\n  }\n\n  if (value === undefined) {\n    delete resVal[pathArray[i]];\n  } else {\n    resVal[pathArray[i]] = value;\n  }\n\n  // If the path array has a single element, the loop did not run.\n  // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.\n  if (i === 0 && value === undefined) {\n    delete res[pathArray[i]];\n  }\n\n  return res;\n}\n\n/**\n * Recursively a set the same value for all keys and arrays nested object, cloning\n * @param object\n * @param value\n * @param visited\n * @param response\n */\nexport function setNestedObjectValues<T>(\n  object: any,\n  value: any,\n  visited: any = new WeakMap(),\n  response: any = {}\n): T {\n  for (let k of Object.keys(object)) {\n    const val = object[k];\n    if (isObject(val)) {\n      if (!visited.get(val)) {\n        visited.set(val, true);\n        // In order to keep array values consistent for both dot path  and\n        // bracket syntax, we need to check if this is an array so that\n        // this will output  { friends: [true] } and not { friends: { \"0\": true } }\n        response[k] = Array.isArray(val) ? [] : {};\n        setNestedObjectValues(val, value, visited, response[k]);\n      }\n    } else {\n      response[k] = value;\n    }\n  }\n\n  return response;\n}\n","import deepmerge from 'deepmerge';\nimport isPlainObject from 'lodash/isPlainObject';\nimport cloneDeep from 'lodash/cloneDeep';\nimport * as React from 'react';\nimport isEqual from 'react-fast-compare';\nimport invariant from 'tiny-warning';\nimport { FieldConfig } from './Field';\nimport { FormikProvider } from './FormikContext';\nimport {\n  FieldHelperProps,\n  FieldInputProps,\n  FieldMetaProps,\n  FormikConfig,\n  FormikErrors,\n  FormikHandlers,\n  FormikHelpers,\n  FormikProps,\n  FormikState,\n  FormikTouched,\n  FormikValues,\n} from './types';\nimport {\n  getActiveElement,\n  getIn,\n  isEmptyChildren,\n  isFunction,\n  isObject,\n  isPromise,\n  isString,\n  setIn,\n  setNestedObjectValues,\n} from './utils';\n\ntype FormikMessage<Values> =\n  | { type: 'SUBMIT_ATTEMPT' }\n  | { type: 'SUBMIT_FAILURE' }\n  | { type: 'SUBMIT_SUCCESS' }\n  | { type: 'SET_ISVALIDATING'; payload: boolean }\n  | { type: 'SET_ISSUBMITTING'; payload: boolean }\n  | { type: 'SET_VALUES'; payload: Values }\n  | { type: 'SET_FIELD_VALUE'; payload: { field: string; value?: any } }\n  | { type: 'SET_FIELD_TOUCHED'; payload: { field: string; value?: boolean } }\n  | { type: 'SET_FIELD_ERROR'; payload: { field: string; value?: string } }\n  | { type: 'SET_TOUCHED'; payload: FormikTouched<Values> }\n  | { type: 'SET_ERRORS'; payload: FormikErrors<Values> }\n  | { type: 'SET_STATUS'; payload: any }\n  | {\n      type: 'SET_FORMIK_STATE';\n      payload: (s: FormikState<Values>) => FormikState<Values>;\n    }\n  | {\n      type: 'RESET_FORM';\n      payload: FormikState<Values>;\n    };\n\n// State reducer\nfunction formikReducer<Values>(\n  state: FormikState<Values>,\n  msg: FormikMessage<Values>\n) {\n  switch (msg.type) {\n    case 'SET_VALUES':\n      return { ...state, values: msg.payload };\n    case 'SET_TOUCHED':\n      return { ...state, touched: msg.payload };\n    case 'SET_ERRORS':\n      if (isEqual(state.errors, msg.payload)) {\n        return state;\n      }\n\n      return { ...state, errors: msg.payload };\n    case 'SET_STATUS':\n      return { ...state, status: msg.payload };\n    case 'SET_ISSUBMITTING':\n      return { ...state, isSubmitting: msg.payload };\n    case 'SET_ISVALIDATING':\n      return { ...state, isValidating: msg.payload };\n    case 'SET_FIELD_VALUE':\n      return {\n        ...state,\n        values: setIn(state.values, msg.payload.field, msg.payload.value),\n      };\n    case 'SET_FIELD_TOUCHED':\n      return {\n        ...state,\n        touched: setIn(state.touched, msg.payload.field, msg.payload.value),\n      };\n    case 'SET_FIELD_ERROR':\n      return {\n        ...state,\n        errors: setIn(state.errors, msg.payload.field, msg.payload.value),\n      };\n    case 'RESET_FORM':\n      return { ...state, ...msg.payload };\n    case 'SET_FORMIK_STATE':\n      return msg.payload(state);\n    case 'SUBMIT_ATTEMPT':\n      return {\n        ...state,\n        touched: setNestedObjectValues<FormikTouched<Values>>(\n          state.values,\n          true\n        ),\n        isSubmitting: true,\n        submitCount: state.submitCount + 1,\n      };\n    case 'SUBMIT_FAILURE':\n      return {\n        ...state,\n        isSubmitting: false,\n      };\n    case 'SUBMIT_SUCCESS':\n      return {\n        ...state,\n        isSubmitting: false,\n      };\n    default:\n      return state;\n  }\n}\n\n// Initial empty states // objects\nconst emptyErrors: FormikErrors<unknown> = {};\nconst emptyTouched: FormikTouched<unknown> = {};\n\n// This is an object that contains a map of all registered fields\n// and their validate functions\ninterface FieldRegistry {\n  [field: string]: {\n    validate: (value: any) => string | Promise<string> | undefined;\n  };\n}\n\nexport function useFormik<Values extends FormikValues = FormikValues>({\n  validateOnChange = true,\n  validateOnBlur = true,\n  validateOnMount = false,\n  isInitialValid,\n  enableReinitialize = false,\n  onSubmit,\n  ...rest\n}: FormikConfig<Values>) {\n  const props = {\n    validateOnChange,\n    validateOnBlur,\n    validateOnMount,\n    onSubmit,\n    ...rest,\n  };\n  const initialValues = React.useRef(props.initialValues);\n  const initialErrors = React.useRef(props.initialErrors || emptyErrors);\n  const initialTouched = React.useRef(props.initialTouched || emptyTouched);\n  const initialStatus = React.useRef(props.initialStatus);\n  const isMounted = React.useRef<boolean>(false);\n  const fieldRegistry = React.useRef<FieldRegistry>({});\n  if (__DEV__) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      invariant(\n        typeof isInitialValid === 'undefined',\n        'isInitialValid has been deprecated and will be removed in future versions of Formik. Please use initialErrors or validateOnMount instead.'\n      );\n      // eslint-disable-next-line\n    }, []);\n  }\n\n  React.useEffect(() => {\n    isMounted.current = true;\n\n    return () => {\n      isMounted.current = false;\n    };\n  }, []);\n\n  const [, setIteration] = React.useState(0);\n  const stateRef = React.useRef<FormikState<Values>>({\n    values: cloneDeep(props.initialValues),\n    errors: cloneDeep(props.initialErrors) || emptyErrors,\n    touched: cloneDeep(props.initialTouched) || emptyTouched,\n    status: cloneDeep(props.initialStatus),\n    isSubmitting: false,\n    isValidating: false,\n    submitCount: 0,\n  });\n\n  const state = stateRef.current;\n\n  const dispatch = React.useCallback((action: FormikMessage<Values>) => {\n    const prev = stateRef.current;\n\n    stateRef.current = formikReducer(prev, action);\n\n    // force rerender\n    if (prev !== stateRef.current) setIteration(x => x + 1);\n  }, []);\n\n  const runValidateHandler = React.useCallback(\n    (values: Values, field?: string): Promise<FormikErrors<Values>> => {\n      return new Promise((resolve, reject) => {\n        const maybePromisedErrors = (props.validate as any)(values, field);\n        if (maybePromisedErrors == null) {\n          // use loose null check here on purpose\n          resolve(emptyErrors);\n        } else if (isPromise(maybePromisedErrors)) {\n          (maybePromisedErrors as Promise<any>).then(\n            errors => {\n              resolve(errors || emptyErrors);\n            },\n            actualException => {\n              if (process.env.NODE_ENV !== 'production') {\n                console.warn(\n                  `Warning: An unhandled error was caught during validation in <Formik validate />`,\n                  actualException\n                );\n              }\n\n              reject(actualException);\n            }\n          );\n        } else {\n          resolve(maybePromisedErrors);\n        }\n      });\n    },\n    [props.validate]\n  );\n\n  /**\n   * Run validation against a Yup schema and optionally run a function if successful\n   */\n  const runValidationSchema = React.useCallback(\n    (values: Values, field?: string): Promise<FormikErrors<Values>> => {\n      const validationSchema = props.validationSchema;\n      const schema = isFunction(validationSchema)\n        ? validationSchema(field)\n        : validationSchema;\n      const promise =\n        field && schema.validateAt\n          ? schema.validateAt(field, values)\n          : validateYupSchema(values, schema);\n      return new Promise((resolve, reject) => {\n        promise.then(\n          () => {\n            resolve(emptyErrors);\n          },\n          (err: any) => {\n            // Yup will throw a validation error if validation fails. We catch those and\n            // resolve them into Formik errors. We can sniff if something is a Yup error\n            // by checking error.name.\n            // @see https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string\n            if (err.name === 'ValidationError') {\n              resolve(yupToFormErrors(err));\n            } else {\n              // We throw any other errors\n              if (process.env.NODE_ENV !== 'production') {\n                console.warn(\n                  `Warning: An unhandled error was caught during validation in <Formik validationSchema />`,\n                  err\n                );\n              }\n\n              reject(err);\n            }\n          }\n        );\n      });\n    },\n    [props.validationSchema]\n  );\n\n  const runSingleFieldLevelValidation = React.useCallback(\n    (field: string, value: void | string): Promise<string> => {\n      return new Promise(resolve =>\n        resolve(fieldRegistry.current[field].validate(value) as string)\n      );\n    },\n    []\n  );\n\n  const runFieldLevelValidations = React.useCallback(\n    (values: Values): Promise<FormikErrors<Values>> => {\n      const fieldKeysWithValidation: string[] = Object.keys(\n        fieldRegistry.current\n      ).filter(f => isFunction(fieldRegistry.current[f].validate));\n\n      // Construct an array with all of the field validation functions\n      const fieldValidations: Promise<string>[] =\n        fieldKeysWithValidation.length > 0\n          ? fieldKeysWithValidation.map(f =>\n              runSingleFieldLevelValidation(f, getIn(values, f))\n            )\n          : [Promise.resolve('DO_NOT_DELETE_YOU_WILL_BE_FIRED')]; // use special case ;)\n\n      return Promise.all(fieldValidations).then((fieldErrorsList: string[]) =>\n        fieldErrorsList.reduce((prev, curr, index) => {\n          if (curr === 'DO_NOT_DELETE_YOU_WILL_BE_FIRED') {\n            return prev;\n          }\n          if (curr) {\n            prev = setIn(prev, fieldKeysWithValidation[index], curr);\n          }\n          return prev;\n        }, {})\n      );\n    },\n    [runSingleFieldLevelValidation]\n  );\n\n  // Run all validations and return the result\n  const runAllValidations = React.useCallback(\n    (values: Values) => {\n      return Promise.all([\n        runFieldLevelValidations(values),\n        props.validationSchema ? runValidationSchema(values) : {},\n        props.validate ? runValidateHandler(values) : {},\n      ]).then(([fieldErrors, schemaErrors, validateErrors]) => {\n        const combinedErrors = deepmerge.all<FormikErrors<Values>>(\n          [fieldErrors, schemaErrors, validateErrors],\n          { arrayMerge }\n        );\n        return combinedErrors;\n      });\n    },\n    [\n      props.validate,\n      props.validationSchema,\n      runFieldLevelValidations,\n      runValidateHandler,\n      runValidationSchema,\n    ]\n  );\n\n  // Run all validations methods and update state accordingly\n  const validateFormWithHighPriority = useEventCallback(\n    (values: Values = state.values) => {\n      dispatch({ type: 'SET_ISVALIDATING', payload: true });\n      return runAllValidations(values).then(combinedErrors => {\n        if (!!isMounted.current) {\n          dispatch({ type: 'SET_ISVALIDATING', payload: false });\n          dispatch({ type: 'SET_ERRORS', payload: combinedErrors });\n        }\n        return combinedErrors;\n      });\n    }\n  );\n\n  React.useEffect(() => {\n    if (\n      validateOnMount &&\n      isMounted.current === true &&\n      isEqual(initialValues.current, props.initialValues)\n    ) {\n      validateFormWithHighPriority(initialValues.current);\n    }\n  }, [validateOnMount, validateFormWithHighPriority]);\n\n  const resetForm = React.useCallback(\n    (nextState?: Partial<FormikState<Values>>) => {\n      const values =\n        nextState && nextState.values\n          ? nextState.values\n          : initialValues.current;\n      const errors =\n        nextState && nextState.errors\n          ? nextState.errors\n          : initialErrors.current\n          ? initialErrors.current\n          : props.initialErrors || {};\n      const touched =\n        nextState && nextState.touched\n          ? nextState.touched\n          : initialTouched.current\n          ? initialTouched.current\n          : props.initialTouched || {};\n      const status =\n        nextState && nextState.status\n          ? nextState.status\n          : initialStatus.current\n          ? initialStatus.current\n          : props.initialStatus;\n      initialValues.current = values;\n      initialErrors.current = errors;\n      initialTouched.current = touched;\n      initialStatus.current = status;\n\n      const dispatchFn = () => {\n        dispatch({\n          type: 'RESET_FORM',\n          payload: {\n            isSubmitting: !!nextState && !!nextState.isSubmitting,\n            errors,\n            touched,\n            status,\n            values,\n            isValidating: !!nextState && !!nextState.isValidating,\n            submitCount:\n              !!nextState &&\n              !!nextState.submitCount &&\n              typeof nextState.submitCount === 'number'\n                ? nextState.submitCount\n                : 0,\n          },\n        });\n      };\n\n      if (props.onReset) {\n        const maybePromisedOnReset = (props.onReset as any)(\n          state.values,\n          imperativeMethods\n        );\n\n        if (isPromise(maybePromisedOnReset)) {\n          (maybePromisedOnReset as Promise<any>).then(dispatchFn);\n        } else {\n          dispatchFn();\n        }\n      } else {\n        dispatchFn();\n      }\n    },\n    [props.initialErrors, props.initialStatus, props.initialTouched, props.onReset]\n  );\n\n  React.useEffect(() => {\n    if (\n      isMounted.current === true &&\n      !isEqual(initialValues.current, props.initialValues)\n    ) {\n      if (enableReinitialize) {\n        initialValues.current = props.initialValues;\n        resetForm();\n        if (validateOnMount) {\n          validateFormWithHighPriority(initialValues.current);\n        }\n      }\n    }\n  }, [\n    enableReinitialize,\n    props.initialValues,\n    resetForm,\n    validateOnMount,\n    validateFormWithHighPriority,\n  ]);\n\n  React.useEffect(() => {\n    if (\n      enableReinitialize &&\n      isMounted.current === true &&\n      !isEqual(initialErrors.current, props.initialErrors)\n    ) {\n      initialErrors.current = props.initialErrors || emptyErrors;\n      dispatch({\n        type: 'SET_ERRORS',\n        payload: props.initialErrors || emptyErrors,\n      });\n    }\n  }, [enableReinitialize, props.initialErrors]);\n\n  React.useEffect(() => {\n    if (\n      enableReinitialize &&\n      isMounted.current === true &&\n      !isEqual(initialTouched.current, props.initialTouched)\n    ) {\n      initialTouched.current = props.initialTouched || emptyTouched;\n      dispatch({\n        type: 'SET_TOUCHED',\n        payload: props.initialTouched || emptyTouched,\n      });\n    }\n  }, [enableReinitialize, props.initialTouched]);\n\n  React.useEffect(() => {\n    if (\n      enableReinitialize &&\n      isMounted.current === true &&\n      !isEqual(initialStatus.current, props.initialStatus)\n    ) {\n      initialStatus.current = props.initialStatus;\n      dispatch({\n        type: 'SET_STATUS',\n        payload: props.initialStatus,\n      });\n    }\n  }, [enableReinitialize, props.initialStatus, props.initialTouched]);\n\n  const validateField = useEventCallback((name: string) => {\n    // This will efficiently validate a single field by avoiding state\n    // changes if the validation function is synchronous. It's different from\n    // what is called when using validateForm.\n\n    if (\n      fieldRegistry.current[name] &&\n      isFunction(fieldRegistry.current[name].validate)\n    ) {\n      const value = getIn(state.values, name);\n      const maybePromise = fieldRegistry.current[name].validate(value);\n      if (isPromise(maybePromise)) {\n        // Only flip isValidating if the function is async.\n        dispatch({ type: 'SET_ISVALIDATING', payload: true });\n        return maybePromise\n          .then((x: any) => x)\n          .then((error: string) => {\n            dispatch({\n              type: 'SET_FIELD_ERROR',\n              payload: { field: name, value: error },\n            });\n            dispatch({ type: 'SET_ISVALIDATING', payload: false });\n          });\n      } else {\n        dispatch({\n          type: 'SET_FIELD_ERROR',\n          payload: {\n            field: name,\n            value: maybePromise as string | undefined,\n          },\n        });\n        return Promise.resolve(maybePromise as string | undefined);\n      }\n    } else if (props.validationSchema) {\n      dispatch({ type: 'SET_ISVALIDATING', payload: true });\n      return runValidationSchema(state.values, name)\n        .then((x: any) => x)\n        .then((error: any) => {\n          dispatch({\n            type: 'SET_FIELD_ERROR',\n            payload: { field: name, value: getIn(error, name) },\n          });\n          dispatch({ type: 'SET_ISVALIDATING', payload: false });\n        });\n    }\n\n    return Promise.resolve();\n  });\n\n  const registerField = React.useCallback((name: string, { validate }: any) => {\n    fieldRegistry.current[name] = {\n      validate,\n    };\n  }, []);\n\n  const unregisterField = React.useCallback((name: string) => {\n    delete fieldRegistry.current[name];\n  }, []);\n\n  const setTouched = useEventCallback(\n    (touched: FormikTouched<Values>, shouldValidate?: boolean) => {\n      dispatch({ type: 'SET_TOUCHED', payload: touched });\n      const willValidate =\n        shouldValidate === undefined ? validateOnBlur : shouldValidate;\n      return willValidate\n        ? validateFormWithHighPriority(state.values)\n        : Promise.resolve();\n    }\n  );\n\n  const setErrors = React.useCallback((errors: FormikErrors<Values>) => {\n    dispatch({ type: 'SET_ERRORS', payload: errors });\n  }, []);\n\n  const setValues = useEventCallback(\n    (values: React.SetStateAction<Values>, shouldValidate?: boolean) => {\n      const resolvedValues = isFunction(values) ? values(state.values) : values;\n\n      dispatch({ type: 'SET_VALUES', payload: resolvedValues });\n      const willValidate =\n        shouldValidate === undefined ? validateOnChange : shouldValidate;\n      return willValidate\n        ? validateFormWithHighPriority(resolvedValues)\n        : Promise.resolve();\n    }\n  );\n\n  const setFieldError = React.useCallback(\n    (field: string, value: string | undefined) => {\n      dispatch({\n        type: 'SET_FIELD_ERROR',\n        payload: { field, value },\n      });\n    },\n    []\n  );\n\n  const setFieldValue = useEventCallback(\n    (field: string, value: React.SetStateAction<any>, shouldValidate?: boolean) => {\n      const resolvedValue = isFunction(value) ? value(getIn(state.values, field)) : value;\n\n      dispatch({\n        type: 'SET_FIELD_VALUE',\n        payload: {\n          field,\n          value: resolvedValue,\n        },\n      });\n      const willValidate =\n        shouldValidate === undefined ? validateOnChange : shouldValidate;\n      return willValidate\n        ? validateFormWithHighPriority(setIn(state.values, field, resolvedValue))\n        : Promise.resolve();\n    }\n  );\n\n  const executeChange = React.useCallback(\n    (eventOrTextValue: string | React.ChangeEvent<any>, maybePath?: string) => {\n      // By default, assume that the first argument is a string. This allows us to use\n      // handleChange with React Native and React Native Web's onChangeText prop which\n      // provides just the value of the input.\n      let field = maybePath;\n      let val = eventOrTextValue;\n      let parsed;\n      // If the first argument is not a string though, it has to be a synthetic React Event (or a fake one),\n      // so we handle like we would a normal HTML change event.\n      if (!isString(eventOrTextValue)) {\n        // If we can, persist the event\n        // @see https://reactjs.org/docs/events.html#event-pooling\n        if ((eventOrTextValue as any).persist) {\n          (eventOrTextValue as React.ChangeEvent<any>).persist();\n        }\n        const target = eventOrTextValue.target\n          ? (eventOrTextValue as React.ChangeEvent<any>).target\n          : (eventOrTextValue as React.ChangeEvent<any>).currentTarget;\n\n        const {\n          type,\n          name,\n          id,\n          value,\n          checked,\n          outerHTML,\n          options,\n          multiple,\n        } = target;\n\n        field = maybePath ? maybePath : name ? name : id;\n        if (!field && __DEV__) {\n          warnAboutMissingIdentifier({\n            htmlContent: outerHTML,\n            documentationAnchorLink: 'handlechange-e-reactchangeeventany--void',\n            handlerName: 'handleChange',\n          });\n        }\n        val = /number|range/.test(type)\n          ? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)\n          : /checkbox/.test(type) // checkboxes\n          ? getValueForCheckbox(getIn(state.values, field!), checked, value)\n          : options && multiple // <select multiple>\n          ? getSelectedValues(options)\n          : value;\n      }\n\n      if (field) {\n        // Set form fields by name\n        setFieldValue(field, val);\n      }\n    },\n    [setFieldValue, state.values]\n  );\n\n  const handleChange = useEventCallback<FormikHandlers['handleChange']>(\n    (\n      eventOrPath: string | React.ChangeEvent<any>\n    ): void | ((eventOrTextValue: string | React.ChangeEvent<any>) => void) => {\n      if (isString(eventOrPath)) {\n        return event => executeChange(event, eventOrPath);\n      } else {\n        executeChange(eventOrPath);\n      }\n    }\n  );\n\n  const setFieldTouched = useEventCallback(\n    (field: string, touched: boolean = true, shouldValidate?: boolean) => {\n      dispatch({\n        type: 'SET_FIELD_TOUCHED',\n        payload: {\n          field,\n          value: touched,\n        },\n      });\n      const willValidate =\n        shouldValidate === undefined ? validateOnBlur : shouldValidate;\n      return willValidate\n        ? validateFormWithHighPriority(state.values)\n        : Promise.resolve();\n    }\n  );\n\n  const executeBlur = React.useCallback(\n    (e: any, path?: string) => {\n      if (e.persist) {\n        e.persist();\n      }\n      const { name, id, outerHTML } = e.target;\n      const field = path ? path : name ? name : id;\n\n      if (!field && __DEV__) {\n        warnAboutMissingIdentifier({\n          htmlContent: outerHTML,\n          documentationAnchorLink: 'handleblur-e-any--void',\n          handlerName: 'handleBlur',\n        });\n      }\n\n      setFieldTouched(field, true);\n    },\n    [setFieldTouched]\n  );\n\n  const handleBlur = useEventCallback<FormikHandlers['handleBlur']>(\n    (eventOrString: any): void | ((e: any) => void) => {\n      if (isString(eventOrString)) {\n        return event => executeBlur(event, eventOrString);\n      } else {\n        executeBlur(eventOrString);\n      }\n    }\n  );\n\n  const setFormikState = React.useCallback(\n    (\n      stateOrCb:\n        | FormikState<Values>\n        | ((state: FormikState<Values>) => FormikState<Values>)\n    ): void => {\n      if (isFunction(stateOrCb)) {\n        dispatch({ type: 'SET_FORMIK_STATE', payload: stateOrCb });\n      } else {\n        dispatch({ type: 'SET_FORMIK_STATE', payload: () => stateOrCb });\n      }\n    },\n    []\n  );\n\n  const setStatus = React.useCallback((status: any) => {\n    dispatch({ type: 'SET_STATUS', payload: status });\n  }, []);\n\n  const setSubmitting = React.useCallback((isSubmitting: boolean) => {\n    dispatch({ type: 'SET_ISSUBMITTING', payload: isSubmitting });\n  }, []);\n\n  const submitForm = useEventCallback(() => {\n    dispatch({ type: 'SUBMIT_ATTEMPT' });\n    return validateFormWithHighPriority().then(\n      (combinedErrors: FormikErrors<Values>) => {\n        // In case an error was thrown and passed to the resolved Promise,\n        // `combinedErrors` can be an instance of an Error. We need to check\n        // that and abort the submit.\n        // If we don't do that, calling `Object.keys(new Error())` yields an\n        // empty array, which causes the validation to pass and the form\n        // to be submitted.\n\n        const isInstanceOfError = combinedErrors instanceof Error;\n        const isActuallyValid =\n          !isInstanceOfError && Object.keys(combinedErrors).length === 0;\n        if (isActuallyValid) {\n          // Proceed with submit...\n          //\n          // To respect sync submit fns, we can't simply wrap executeSubmit in a promise and\n          // _always_ dispatch SUBMIT_SUCCESS because isSubmitting would then always be false.\n          // This would be fine in simple cases, but make it impossible to disable submit\n          // buttons where people use callbacks or promises as side effects (which is basically\n          // all of v1 Formik code). Instead, recall that we are inside of a promise chain already,\n          //  so we can try/catch executeSubmit(), if it returns undefined, then just bail.\n          // If there are errors, throw em. Otherwise, wrap executeSubmit in a promise and handle\n          // cleanup of isSubmitting on behalf of the consumer.\n          let promiseOrUndefined;\n          try {\n            promiseOrUndefined = executeSubmit();\n            // Bail if it's sync, consumer is responsible for cleaning up\n            // via setSubmitting(false)\n            if (promiseOrUndefined === undefined) {\n              return;\n            }\n          } catch (error) {\n            throw error;\n          }\n\n          return Promise.resolve(promiseOrUndefined)\n            .then(result => {\n              if (!!isMounted.current) {\n                dispatch({ type: 'SUBMIT_SUCCESS' });\n              }\n              return result;\n            })\n            .catch(_errors => {\n              if (!!isMounted.current) {\n                dispatch({ type: 'SUBMIT_FAILURE' });\n                // This is a legit error rejected by the onSubmit fn\n                // so we don't want to break the promise chain\n                throw _errors;\n              }\n            });\n        } else if (!!isMounted.current) {\n          // ^^^ Make sure Formik is still mounted before updating state\n          dispatch({ type: 'SUBMIT_FAILURE' });\n          // throw combinedErrors;\n          if (isInstanceOfError) {\n            throw combinedErrors;\n          }\n        }\n        return;\n      }\n    );\n  });\n\n  const handleSubmit = useEventCallback(\n    (e?: React.FormEvent<HTMLFormElement>) => {\n      if (e && e.preventDefault && isFunction(e.preventDefault)) {\n        e.preventDefault();\n      }\n\n      if (e && e.stopPropagation && isFunction(e.stopPropagation)) {\n        e.stopPropagation();\n      }\n\n      // Warn if form submission is triggered by a <button> without a\n      // specified `type` attribute during development. This mitigates\n      // a common gotcha in forms with both reset and submit buttons,\n      // where the dev forgets to add type=\"button\" to the reset button.\n      if (__DEV__ && typeof document !== 'undefined') {\n        // Safely get the active element (works with IE)\n        const activeElement = getActiveElement();\n        if (\n          activeElement !== null &&\n          activeElement instanceof HTMLButtonElement\n        ) {\n          invariant(\n            activeElement.attributes &&\n              activeElement.attributes.getNamedItem('type'),\n            'You submitted a Formik form using a button with an unspecified `type` attribute.  Most browsers default button elements to `type=\"submit\"`. If this is not a submit button, please add `type=\"button\"`.'\n          );\n        }\n      }\n\n      submitForm().catch(reason => {\n        console.warn(\n          `Warning: An unhandled error was caught from submitForm()`,\n          reason\n        );\n      });\n    }\n  );\n\n  const imperativeMethods: FormikHelpers<Values> = {\n    resetForm,\n    validateForm: validateFormWithHighPriority,\n    validateField,\n    setErrors,\n    setFieldError,\n    setFieldTouched,\n    setFieldValue,\n    setStatus,\n    setSubmitting,\n    setTouched,\n    setValues,\n    setFormikState,\n    submitForm,\n  };\n\n  const executeSubmit = useEventCallback(() => {\n    return onSubmit(state.values, imperativeMethods);\n  });\n\n  const handleReset = useEventCallback(e => {\n    if (e && e.preventDefault && isFunction(e.preventDefault)) {\n      e.preventDefault();\n    }\n\n    if (e && e.stopPropagation && isFunction(e.stopPropagation)) {\n      e.stopPropagation();\n    }\n\n    resetForm();\n  });\n\n  const getFieldMeta = React.useCallback(\n    (name: string): FieldMetaProps<any> => {\n      return {\n        value: getIn(state.values, name),\n        error: getIn(state.errors, name),\n        touched: !!getIn(state.touched, name),\n        initialValue: getIn(initialValues.current, name),\n        initialTouched: !!getIn(initialTouched.current, name),\n        initialError: getIn(initialErrors.current, name),\n      };\n    },\n    [state.errors, state.touched, state.values]\n  );\n\n  const getFieldHelpers = React.useCallback(\n    (name: string): FieldHelperProps<any> => {\n      return {\n        setValue: (value: any, shouldValidate?: boolean) =>\n          setFieldValue(name, value, shouldValidate),\n        setTouched: (value: boolean, shouldValidate?: boolean) =>\n          setFieldTouched(name, value, shouldValidate),\n        setError: (value: any) => setFieldError(name, value),\n      };\n    },\n    [setFieldValue, setFieldTouched, setFieldError]\n  );\n\n  const getFieldProps = React.useCallback(\n    (nameOrOptions: string | FieldConfig<any>): FieldInputProps<any> => {\n      const isAnObject = isObject(nameOrOptions);\n      const name = isAnObject\n        ? (nameOrOptions as FieldConfig<any>).name\n        : nameOrOptions;\n      const valueState = getIn(state.values, name);\n\n      const field: FieldInputProps<any> = {\n        name,\n        value: valueState,\n        onChange: handleChange,\n        onBlur: handleBlur,\n      };\n      if (isAnObject) {\n        const {\n          type,\n          value: valueProp, // value is special for checkboxes\n          as: is,\n          multiple,\n        } = nameOrOptions as FieldConfig<any>;\n\n        if (type === 'checkbox') {\n          if (valueProp === undefined) {\n            field.checked = !!valueState;\n          } else {\n            field.checked = !!(\n              Array.isArray(valueState) && ~valueState.indexOf(valueProp)\n            );\n            field.value = valueProp;\n          }\n        } else if (type === 'radio') {\n          field.checked = valueState === valueProp;\n          field.value = valueProp;\n        } else if (is === 'select' && multiple) {\n          field.value = field.value || [];\n          field.multiple = true;\n        }\n      }\n      return field;\n    },\n    [handleBlur, handleChange, state.values]\n  );\n\n  const dirty = React.useMemo(\n    () => !isEqual(initialValues.current, state.values),\n    [initialValues.current, state.values]\n  );\n\n  const isValid = React.useMemo(\n    () =>\n      typeof isInitialValid !== 'undefined'\n        ? dirty\n          ? state.errors && Object.keys(state.errors).length === 0\n          : isInitialValid !== false && isFunction(isInitialValid)\n          ? (isInitialValid as (props: FormikConfig<Values>) => boolean)(props)\n          : (isInitialValid as boolean)\n        : state.errors && Object.keys(state.errors).length === 0,\n    [isInitialValid, dirty, state.errors, props]\n  );\n\n  const ctx = {\n    ...state,\n    initialValues: initialValues.current,\n    initialErrors: initialErrors.current,\n    initialTouched: initialTouched.current,\n    initialStatus: initialStatus.current,\n    handleBlur,\n    handleChange,\n    handleReset,\n    handleSubmit,\n    resetForm,\n    setErrors,\n    setFormikState,\n    setFieldTouched,\n    setFieldValue,\n    setFieldError,\n    setStatus,\n    setSubmitting,\n    setTouched,\n    setValues,\n    submitForm,\n    validateForm: validateFormWithHighPriority,\n    validateField,\n    isValid,\n    dirty,\n    unregisterField,\n    registerField,\n    getFieldProps,\n    getFieldMeta,\n    getFieldHelpers,\n    validateOnBlur,\n    validateOnChange,\n    validateOnMount,\n  };\n\n  return ctx;\n}\n\nexport function Formik<\n  Values extends FormikValues = FormikValues,\n  ExtraProps = {}\n>(props: FormikConfig<Values> & ExtraProps) {\n  const formikbag = useFormik<Values>(props);\n  const { component, children, render, innerRef } = props;\n\n  // This allows folks to pass a ref to <Formik />\n  React.useImperativeHandle(innerRef, () => formikbag);\n\n  if (__DEV__) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      invariant(\n        !props.render,\n        `<Formik render> has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace <Formik render={(props) => ...} /> with <Formik>{(props) => ...}</Formik>`\n      );\n      // eslint-disable-next-line\n    }, []);\n  }\n  return (\n    <FormikProvider value={formikbag}>\n      {component\n        ? React.createElement(component as any, formikbag)\n        : render\n        ? render(formikbag)\n        : children // children come last, always called\n        ? isFunction(children)\n          ? (children as (bag: FormikProps<Values>) => React.ReactNode)(\n              formikbag as FormikProps<Values>\n            )\n          : !isEmptyChildren(children)\n          ? React.Children.only(children)\n          : null\n        : null}\n    </FormikProvider>\n  );\n}\n\nfunction warnAboutMissingIdentifier({\n  htmlContent,\n  documentationAnchorLink,\n  handlerName,\n}: {\n  htmlContent: string;\n  documentationAnchorLink: string;\n  handlerName: string;\n}) {\n  console.warn(\n    `Warning: Formik called \\`${handlerName}\\`, but you forgot to pass an \\`id\\` or \\`name\\` attribute to your input:\n    ${htmlContent}\n    Formik cannot determine which value to update. For more info see https://formik.org/docs/api/formik#${documentationAnchorLink}\n  `\n  );\n}\n\n/**\n * Transform Yup ValidationError to a more usable object\n */\nexport function yupToFormErrors<Values>(yupError: any): FormikErrors<Values> {\n  let errors: FormikErrors<Values> = {};\n  if (yupError.inner) {\n    if (yupError.inner.length === 0) {\n      return setIn(errors, yupError.path, yupError.message);\n    }\n    for (let err of yupError.inner) {\n      if (!getIn(errors, err.path)) {\n        errors = setIn(errors, err.path, err.message);\n      }\n    }\n  }\n  return errors;\n}\n\n/**\n * Validate a yup schema.\n */\nexport function validateYupSchema<T extends FormikValues>(\n  values: T,\n  schema: any,\n  sync: boolean = false,\n  context?: any\n): Promise<Partial<T>> {\n  const normalizedValues: FormikValues = prepareDataForValidation(values);\n\n  return schema[sync ? 'validateSync' : 'validate'](normalizedValues, {\n    abortEarly: false,\n    context: context || normalizedValues,\n  });\n}\n\n/**\n * Recursively prepare values.\n */\nexport function prepareDataForValidation<T extends FormikValues>(\n  values: T\n): FormikValues {\n  let data: FormikValues = Array.isArray(values) ? [] : {};\n  for (let k in values) {\n    if (Object.prototype.hasOwnProperty.call(values, k)) {\n      const key = String(k);\n      if (Array.isArray(values[key]) === true) {\n        data[key] = values[key].map((value: any) => {\n          if (Array.isArray(value) === true || isPlainObject(value)) {\n            return prepareDataForValidation(value);\n          } else {\n            return value !== '' ? value : undefined;\n          }\n        });\n      } else if (isPlainObject(values[key])) {\n        data[key] = prepareDataForValidation(values[key]);\n      } else {\n        data[key] = values[key] !== '' ? values[key] : undefined;\n      }\n    }\n  }\n  return data;\n}\n\n/**\n * deepmerge array merging algorithm\n * https://github.com/KyleAMathews/deepmerge#combine-array\n */\nfunction arrayMerge(target: any[], source: any[], options: any): any[] {\n  const destination = target.slice();\n\n  source.forEach(function merge(e: any, i: number) {\n    if (typeof destination[i] === 'undefined') {\n      const cloneRequested = options.clone !== false;\n      const shouldClone = cloneRequested && options.isMergeableObject(e);\n      destination[i] = shouldClone\n        ? deepmerge(Array.isArray(e) ? [] : {}, e, options)\n        : e;\n    } else if (options.isMergeableObject(e)) {\n      destination[i] = deepmerge(target[i], e, options);\n    } else if (target.indexOf(e) === -1) {\n      destination.push(e);\n    }\n  });\n  return destination;\n}\n\n/** Return multi select values based on an array of options */\nfunction getSelectedValues(options: any[]) {\n  return Array.from(options)\n    .filter(el => el.selected)\n    .map(el => el.value);\n}\n\n/** Return the next value for a checkbox */\nfunction getValueForCheckbox(\n  currentValue: string | any[],\n  checked: boolean,\n  valueProp: any\n) {\n  // If the current value was a boolean, return a boolean\n  if (typeof currentValue === 'boolean') {\n    return Boolean(checked);\n  }\n\n  // If the currentValue was not a boolean we want to return an array\n  let currentArrayOfValues = [];\n  let isValueInArray = false;\n  let index = -1;\n\n  if (!Array.isArray(currentValue)) {\n    // eslint-disable-next-line eqeqeq\n    if (!valueProp || valueProp == 'true' || valueProp == 'false') {\n      return Boolean(checked);\n    }\n  } else {\n    // If the current value is already an array, use it\n    currentArrayOfValues = currentValue;\n    index = currentValue.indexOf(valueProp);\n    isValueInArray = index >= 0;\n  }\n\n  // If the checkbox was checked and the value is not already present in the aray we want to add the new value to the array of values\n  if (checked && valueProp && !isValueInArray) {\n    return currentArrayOfValues.concat(valueProp);\n  }\n\n  // If the checkbox was unchecked and the value is not in the array, simply return the already existing array of values\n  if (!isValueInArray) {\n    return currentArrayOfValues;\n  }\n\n  // If the checkbox was unchecked and the value is in the array, remove the value and return the array\n  return currentArrayOfValues\n    .slice(0, index)\n    .concat(currentArrayOfValues.slice(index + 1));\n}\n\n// React currently throws a warning when using useLayoutEffect on the server.\n// To get around it, we can conditionally useEffect on the server (no-op) and\n// useLayoutEffect in the browser.\n// @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' &&\n  typeof window.document !== 'undefined' &&\n  typeof window.document.createElement !== 'undefined'\n    ? React.useLayoutEffect\n    : React.useEffect;\n\nfunction useEventCallback<T extends (...args: any[]) => any>(fn: T): T {\n  const ref: any = React.useRef(fn);\n\n  // we copy a ref to the callback scoped to the current state/props on each render\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n\n  return React.useCallback(\n    (...args: any[]) => ref.current.apply(void 0, args),\n    []\n  ) as T;\n}\n","import * as React from 'react';\nimport {\n  FormikProps,\n  GenericFieldHTMLAttributes,\n  FieldMetaProps,\n  FieldHelperProps,\n  FieldInputProps,\n  FieldValidator,\n} from './types';\nimport { useFormikContext } from './FormikContext';\nimport { isFunction, isEmptyChildren, isObject } from './utils';\nimport invariant from 'tiny-warning';\n\nexport interface FieldProps<V = any, FormValues = any> {\n  field: FieldInputProps<V>;\n  form: FormikProps<FormValues>; // if ppl want to restrict this for a given form, let them.\n  meta: FieldMetaProps<V>;\n}\n\nexport interface FieldConfig<V = any> {\n  /**\n   * Field component to render. Can either be a string like 'select' or a component.\n   */\n  component?:\n  | string\n  | React.ComponentType<FieldProps<V>>\n  | React.ComponentType\n  | React.ForwardRefExoticComponent<any>;\n\n  /**\n   * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.\n   */\n  as?:\n  | React.ComponentType<FieldProps<V>['field']>\n  | string\n  | React.ComponentType\n  | React.ForwardRefExoticComponent<any>;\n\n  /**\n   * Render prop (works like React router's <Route render={props =>} />)\n   * @deprecated\n   */\n  render?: (props: FieldProps<V>) => React.ReactNode;\n\n  /**\n   * Children render function <Field name>{props => ...}</Field>)\n   */\n  children?: ((props: FieldProps<V>) => React.ReactNode) | React.ReactNode;\n\n  /**\n   * Validate a single field value independently\n   */\n  validate?: FieldValidator;\n\n  /**\n   * Used for 'select' and related input types.\n   */\n  multiple?: boolean;\n\n  /**\n   * Field name\n   */\n  name: string;\n\n  /** HTML input type */\n  type?: string;\n\n  /** Field value */\n  value?: any;\n\n  /** Inner ref */\n  innerRef?: (instance: any) => void;\n}\n\nexport type FieldAttributes<T> = { className?: string; } & GenericFieldHTMLAttributes &\n  FieldConfig<T> &\n  T & {\n    name: string,\n  };\n\nexport type FieldHookConfig<T> = GenericFieldHTMLAttributes & FieldConfig<T>;\n\nexport function useField<Val = any>(\n  propsOrFieldName: string | FieldHookConfig<Val>\n): [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>] {\n  const formik = useFormikContext();\n  const {\n    getFieldProps,\n    getFieldMeta,\n    getFieldHelpers,\n    registerField,\n    unregisterField,\n  } = formik;\n\n  const isAnObject = isObject(propsOrFieldName);\n\n  // Normalize propsOrFieldName to FieldHookConfig<Val>\n  const props: FieldHookConfig<Val> = isAnObject\n    ? (propsOrFieldName as FieldHookConfig<Val>)\n    : { name: propsOrFieldName as string };\n\n  const { name: fieldName, validate: validateFn } = props;\n\n  React.useEffect(() => {\n    if (fieldName) {\n      registerField(fieldName, {\n        validate: validateFn,\n      });\n    }\n    return () => {\n      if (fieldName) {\n        unregisterField(fieldName);\n      }\n    };\n  }, [registerField, unregisterField, fieldName, validateFn]);\n\n  if (__DEV__) {\n    invariant(\n      formik,\n      'useField() / <Field /> must be used underneath a <Formik> component or withFormik() higher order component'\n    );\n  }\n\n  invariant(\n    fieldName,\n    'Invalid field name. Either pass `useField` a string or an object containing a `name` key.'\n  );\n\n  const fieldHelpers = React.useMemo(() => getFieldHelpers(fieldName), [\n    getFieldHelpers,\n    fieldName,\n  ]);\n\n  return [getFieldProps(props), getFieldMeta(fieldName), fieldHelpers];\n}\n\nexport function Field({\n  validate,\n  name,\n  render,\n  children,\n  as: is, // `as` is reserved in typescript lol\n  component,\n