add all frontend files

node_modules/antd/es/form/FormItem/ItemHolder.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { Meta } from 'rc-field-form/lib/interface';
+import type { FormItemProps } from '.';
+import type { ReportMetaChange } from '../context';
+export interface ItemHolderProps extends FormItemProps {
+    prefixCls: string;
+    className?: string;
+    rootClassName?: string;
+    style?: React.CSSProperties;
+    errors: React.ReactNode[];
+    warnings: React.ReactNode[];
+    meta: Meta;
+    children?: React.ReactNode;
+    fieldId?: string;
+    isRequired?: boolean;
+    onSubItemMetaChange: ReportMetaChange;
+}
+export default function ItemHolder(props: ItemHolderProps): React.JSX.Element;

node_modules/antd/es/form/FormItem/ItemHolder.js

@@ -0,0 +1,133 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import isVisible from "rc-util/es/Dom/isVisible";
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import omit from "rc-util/es/omit";
+import { Row } from '../../grid';
+import { FormContext, NoStyleItemContext } from '../context';
+import FormItemInput from '../FormItemInput';
+import FormItemLabel from '../FormItemLabel';
+import useDebounce from '../hooks/useDebounce';
+import { getStatus } from '../util';
+import StatusProvider from './StatusProvider';
+export default function ItemHolder(props) {
+  const {
+      prefixCls,
+      className,
+      rootClassName,
+      style,
+      help,
+      errors,
+      warnings,
+      validateStatus,
+      meta,
+      hasFeedback,
+      hidden,
+      children,
+      fieldId,
+      required,
+      isRequired,
+      onSubItemMetaChange,
+      layout: propsLayout,
+      name
+    } = props,
+    restProps = __rest(props, ["prefixCls", "className", "rootClassName", "style", "help", "errors", "warnings", "validateStatus", "meta", "hasFeedback", "hidden", "children", "fieldId", "required", "isRequired", "onSubItemMetaChange", "layout", "name"]);
+  const itemPrefixCls = `${prefixCls}-item`;
+  const {
+    requiredMark,
+    layout: formLayout
+  } = React.useContext(FormContext);
+  const layout = propsLayout || formLayout;
+  const vertical = layout === 'vertical';
+  // ======================== Margin ========================
+  const itemRef = React.useRef(null);
+  const debounceErrors = useDebounce(errors);
+  const debounceWarnings = useDebounce(warnings);
+  const hasHelp = help !== undefined && help !== null;
+  const hasError = !!(hasHelp || errors.length || warnings.length);
+  const isOnScreen = !!itemRef.current && isVisible(itemRef.current);
+  const [marginBottom, setMarginBottom] = React.useState(null);
+  useLayoutEffect(() => {
+    if (hasError && itemRef.current) {
+      // The element must be part of the DOMTree to use getComputedStyle
+      // https://stackoverflow.com/questions/35360711/getcomputedstyle-returns-a-cssstyledeclaration-but-all-properties-are-empty-on-a
+      const itemStyle = getComputedStyle(itemRef.current);
+      setMarginBottom(Number.parseInt(itemStyle.marginBottom, 10));
+    }
+  }, [hasError, isOnScreen]);
+  const onErrorVisibleChanged = nextVisible => {
+    if (!nextVisible) {
+      setMarginBottom(null);
+    }
+  };
+  // ======================== Status ========================
+  const getValidateState = (isDebounce = false) => {
+    const _errors = isDebounce ? debounceErrors : meta.errors;
+    const _warnings = isDebounce ? debounceWarnings : meta.warnings;
+    return getStatus(_errors, _warnings, meta, '', !!hasFeedback, validateStatus);
+  };
+  const mergedValidateStatus = getValidateState();
+  // ======================== Render ========================
+  const itemClassName = classNames(itemPrefixCls, className, rootClassName, {
+    [`${itemPrefixCls}-with-help`]: hasHelp || debounceErrors.length || debounceWarnings.length,
+    // Status
+    [`${itemPrefixCls}-has-feedback`]: mergedValidateStatus && hasFeedback,
+    [`${itemPrefixCls}-has-success`]: mergedValidateStatus === 'success',
+    [`${itemPrefixCls}-has-warning`]: mergedValidateStatus === 'warning',
+    [`${itemPrefixCls}-has-error`]: mergedValidateStatus === 'error',
+    [`${itemPrefixCls}-is-validating`]: mergedValidateStatus === 'validating',
+    [`${itemPrefixCls}-hidden`]: hidden,
+    // Layout
+    [`${itemPrefixCls}-${layout}`]: layout
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: itemClassName,
+    style: style,
+    ref: itemRef
+  }, /*#__PURE__*/React.createElement(Row, Object.assign({
+    className: `${itemPrefixCls}-row`
+  }, omit(restProps, ['_internalItemRender', 'colon', 'dependencies', 'extra', 'fieldKey', 'getValueFromEvent', 'getValueProps', 'htmlFor', 'id',
+  // It is deprecated because `htmlFor` is its replacement.
+  'initialValue', 'isListField', 'label', 'labelAlign', 'labelCol', 'labelWrap', 'messageVariables', 'name', 'normalize', 'noStyle', 'preserve', 'requiredMark', 'rules', 'shouldUpdate', 'trigger', 'tooltip', 'validateFirst', 'validateTrigger', 'valuePropName', 'wrapperCol', 'validateDebounce'])), /*#__PURE__*/React.createElement(FormItemLabel, Object.assign({
+    htmlFor: fieldId
+  }, props, {
+    requiredMark: requiredMark,
+    required: required !== null && required !== void 0 ? required : isRequired,
+    prefixCls: prefixCls,
+    vertical: vertical
+  })), /*#__PURE__*/React.createElement(FormItemInput, Object.assign({}, props, meta, {
+    errors: debounceErrors,
+    warnings: debounceWarnings,
+    prefixCls: prefixCls,
+    status: mergedValidateStatus,
+    help: help,
+    marginBottom: marginBottom,
+    onErrorVisibleChanged: onErrorVisibleChanged
+  }), /*#__PURE__*/React.createElement(NoStyleItemContext.Provider, {
+    value: onSubItemMetaChange
+  }, /*#__PURE__*/React.createElement(StatusProvider, {
+    prefixCls: prefixCls,
+    meta: meta,
+    errors: meta.errors,
+    warnings: meta.warnings,
+    hasFeedback: hasFeedback,
+    // Already calculated
+    validateStatus: mergedValidateStatus,
+    name: name
+  }, children)))), !!marginBottom && (/*#__PURE__*/React.createElement("div", {
+    className: `${itemPrefixCls}-margin-offset`,
+    style: {
+      marginBottom: -marginBottom
+    }
+  })));
+}

node_modules/antd/es/form/FormItem/StatusProvider.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Meta, NamePath } from 'rc-field-form/lib/interface';
+import type { FeedbackIcons, ValidateStatus } from '.';
+export interface StatusProviderProps {
+    children?: React.ReactNode;
+    validateStatus?: ValidateStatus;
+    prefixCls: string;
+    meta: Meta;
+    errors: React.ReactNode[];
+    warnings: React.ReactNode[];
+    hasFeedback?: boolean | {
+        icons?: FeedbackIcons;
+    };
+    noStyle?: boolean;
+    name?: NamePath;
+}
+export default function StatusProvider({ children, errors, warnings, hasFeedback, validateStatus, prefixCls, meta, noStyle, name, }: StatusProviderProps): React.JSX.Element;

node_modules/antd/es/form/FormItem/StatusProvider.js

@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from 'react';
+import CheckCircleFilled from "@ant-design/icons/es/icons/CheckCircleFilled";
+import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
+import ExclamationCircleFilled from "@ant-design/icons/es/icons/ExclamationCircleFilled";
+import LoadingOutlined from "@ant-design/icons/es/icons/LoadingOutlined";
+import classNames from 'classnames';
+import { FormContext, FormItemInputContext } from '../context';
+import { getStatus } from '../util';
+const iconMap = {
+  success: CheckCircleFilled,
+  warning: ExclamationCircleFilled,
+  error: CloseCircleFilled,
+  validating: LoadingOutlined
+};
+export default function StatusProvider({
+  children,
+  errors,
+  warnings,
+  hasFeedback,
+  validateStatus,
+  prefixCls,
+  meta,
+  noStyle,
+  name
+}) {
+  const itemPrefixCls = `${prefixCls}-item`;
+  const {
+    feedbackIcons
+  } = React.useContext(FormContext);
+  const mergedValidateStatus = getStatus(errors, warnings, meta, null, !!hasFeedback, validateStatus);
+  const {
+    isFormItemInput: parentIsFormItemInput,
+    status: parentStatus,
+    hasFeedback: parentHasFeedback,
+    feedbackIcon: parentFeedbackIcon,
+    name: parentName
+  } = React.useContext(FormItemInputContext);
+  // ====================== Context =======================
+  const formItemStatusContext = React.useMemo(() => {
+    var _a;
+    let feedbackIcon;
+    if (hasFeedback) {
+      const customIcons = hasFeedback !== true && hasFeedback.icons || feedbackIcons;
+      const customIconNode = mergedValidateStatus && ((_a = customIcons === null || customIcons === void 0 ? void 0 : customIcons({
+        status: mergedValidateStatus,
+        errors,
+        warnings
+      })) === null || _a === void 0 ? void 0 : _a[mergedValidateStatus]);
+      const IconNode = mergedValidateStatus ? iconMap[mergedValidateStatus] : null;
+      feedbackIcon = customIconNode !== false && IconNode ? (/*#__PURE__*/React.createElement("span", {
+        className: classNames(`${itemPrefixCls}-feedback-icon`, `${itemPrefixCls}-feedback-icon-${mergedValidateStatus}`)
+      }, customIconNode || /*#__PURE__*/React.createElement(IconNode, null))) : null;
+    }
+    const context = {
+      status: mergedValidateStatus || '',
+      errors,
+      warnings,
+      hasFeedback: !!hasFeedback,
+      feedbackIcon,
+      isFormItemInput: true,
+      name
+    };
+    // No style will follow parent context
+    if (noStyle) {
+      context.status = (mergedValidateStatus !== null && mergedValidateStatus !== void 0 ? mergedValidateStatus : parentStatus) || '';
+      context.isFormItemInput = parentIsFormItemInput;
+      context.hasFeedback = !!(hasFeedback !== null && hasFeedback !== void 0 ? hasFeedback : parentHasFeedback);
+      context.feedbackIcon = hasFeedback !== undefined ? context.feedbackIcon : parentFeedbackIcon;
+      context.name = name !== null && name !== void 0 ? name : parentName;
+    }
+    return context;
+  }, [mergedValidateStatus, hasFeedback, noStyle, parentIsFormItemInput, parentStatus]);
+  // ======================= Render =======================
+  return /*#__PURE__*/React.createElement(FormItemInputContext.Provider, {
+    value: formItemStatusContext
+  }, children);
+}

node_modules/antd/es/form/FormItem/index.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import type { FieldProps } from 'rc-field-form/lib/Field';
+import type { FormInstance, FormItemLayout } from '../Form';
+import type { FormItemInputProps } from '../FormItemInput';
+import type { FormItemLabelProps, LabelTooltipType } from '../FormItemLabel';
+import useFormItemStatus from '../hooks/useFormItemStatus';
+declare const _ValidateStatuses: readonly ["success", "warning", "error", "validating", ""];
+export type ValidateStatus = (typeof _ValidateStatuses)[number];
+type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
+type RcFieldProps<Values = any> = Omit<FieldProps<Values>, 'children'>;
+type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
+export type FeedbackIcons = (itemStatus: {
+    status: ValidateStatus;
+    errors?: React.ReactNode[];
+    warnings?: React.ReactNode[];
+}) => {
+    [key in ValidateStatus]?: React.ReactNode;
+};
+export interface FormItemProps<Values = any> extends Omit<FormItemLabelProps, 'requiredMark'>, FormItemInputProps, RcFieldProps<Values> {
+    prefixCls?: string;
+    noStyle?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    rootClassName?: string;
+    children?: ChildrenType<Values>;
+    id?: string;
+    hasFeedback?: boolean | {
+        icons: FeedbackIcons;
+    };
+    validateStatus?: ValidateStatus;
+    required?: boolean;
+    hidden?: boolean;
+    initialValue?: any;
+    messageVariables?: Record<string, string>;
+    tooltip?: LabelTooltipType;
+    /** @deprecated No need anymore */
+    fieldKey?: React.Key | React.Key[];
+    layout?: FormItemLayout;
+}
+declare function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement;
+type InternalFormItemType = typeof InternalFormItem;
+type CompoundedComponent = InternalFormItemType & {
+    useStatus: typeof useFormItemStatus;
+};
+declare const FormItem: CompoundedComponent;
+export default FormItem;

node_modules/antd/es/form/FormItem/index.js

@@ -0,0 +1,278 @@
+"use client";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import * as React from 'react';
+import classNames from 'classnames';
+import { Field, FieldContext, ListContext } from 'rc-field-form';
+import useState from "rc-util/es/hooks/useState";
+import { supportRef } from "rc-util/es/ref";
+import { cloneElement } from '../../_util/reactNode';
+import { devUseWarning } from '../../_util/warning';
+import { ConfigContext } from '../../config-provider';
+import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
+import { FormContext, NoStyleItemContext } from '../context';
+import useChildren from '../hooks/useChildren';
+import useFormItemStatus from '../hooks/useFormItemStatus';
+import useFrameState from '../hooks/useFrameState';
+import useItemRef from '../hooks/useItemRef';
+import useStyle from '../style';
+import { getFieldId, toArray } from '../util';
+import ItemHolder from './ItemHolder';
+import StatusProvider from './StatusProvider';
+const NAME_SPLIT = '__SPLIT__';
+const _ValidateStatuses = ['success', 'warning', 'error', 'validating', ''];
+// https://github.com/ant-design/ant-design/issues/46417
+// `getValueProps` may modify the value props name,
+// we should check if the control is similar.
+function isSimilarControl(a, b) {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  return keysA.length === keysB.length && keysA.every(key => {
+    const propValueA = a[key];
+    const propValueB = b[key];
+    return propValueA === propValueB || typeof propValueA === 'function' || typeof propValueB === 'function';
+  });
+}
+const MemoInput = /*#__PURE__*/React.memo(({
+  children
+}) => children, (prev, next) => isSimilarControl(prev.control, next.control) && prev.update === next.update && prev.childProps.length === next.childProps.length && prev.childProps.every((value, index) => value === next.childProps[index]));
+function genEmptyMeta() {
+  return {
+    errors: [],
+    warnings: [],
+    touched: false,
+    validating: false,
+    name: [],
+    validated: false
+  };
+}
+function InternalFormItem(props) {
+  const {
+    name,
+    noStyle,
+    className,
+    dependencies,
+    prefixCls: customizePrefixCls,
+    shouldUpdate,
+    rules,
+    children,
+    required,
+    label,
+    messageVariables,
+    trigger = 'onChange',
+    validateTrigger,
+    hidden,
+    help,
+    layout
+  } = props;
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const {
+    name: formName
+  } = React.useContext(FormContext);
+  const mergedChildren = useChildren(children);
+  const isRenderProps = typeof mergedChildren === 'function';
+  const notifyParentMetaChange = React.useContext(NoStyleItemContext);
+  const {
+    validateTrigger: contextValidateTrigger
+  } = React.useContext(FieldContext);
+  const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
+  const hasName = !(name === undefined || name === null);
+  const prefixCls = getPrefixCls('form', customizePrefixCls);
+  // Style
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+  // ========================= Warn =========================
+  const warning = devUseWarning('Form.Item');
+  if (process.env.NODE_ENV !== 'production') {
+    process.env.NODE_ENV !== "production" ? warning(name !== null, 'usage', '`null` is passed as `name` property') : void 0;
+  }
+  // ========================= MISC =========================
+  // Get `noStyle` required info
+  const listContext = React.useContext(ListContext);
+  const fieldKeyPathRef = React.useRef(null);
+  // ======================== Errors ========================
+  // >>>>> Collect sub field errors
+  const [subFieldErrors, setSubFieldErrors] = useFrameState({});
+  // >>>>> Current field errors
+  const [meta, setMeta] = useState(() => genEmptyMeta());
+  const onMetaChange = nextMeta => {
+    // This keyInfo is not correct when field is removed
+    // Since origin keyManager no longer keep the origin key anymore
+    // Which means we need cache origin one and reuse when removed
+    const keyInfo = listContext === null || listContext === void 0 ? void 0 : listContext.getKey(nextMeta.name);
+    // Destroy will reset all the meta
+    setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta, true);
+    // Bump to parent since noStyle
+    if (noStyle && help !== false && notifyParentMetaChange) {
+      let namePath = nextMeta.name;
+      if (!nextMeta.destroy) {
+        if (keyInfo !== undefined) {
+          const [fieldKey, restPath] = keyInfo;
+          namePath = [fieldKey].concat(_toConsumableArray(restPath));
+          fieldKeyPathRef.current = namePath;
+        }
+      } else {
+        // Use origin cache data
+        namePath = fieldKeyPathRef.current || namePath;
+      }
+      notifyParentMetaChange(nextMeta, namePath);
+    }
+  };
+  // >>>>> Collect noStyle Field error to the top FormItem
+  const onSubItemMetaChange = (subMeta, uniqueKeys) => {
+    // Only `noStyle` sub item will trigger
+    setSubFieldErrors(prevSubFieldErrors => {
+      const clone = Object.assign({}, prevSubFieldErrors);
+      // name: ['user', 1] + key: [4] = ['user', 4]
+      const mergedNamePath = [].concat(_toConsumableArray(subMeta.name.slice(0, -1)), _toConsumableArray(uniqueKeys));
+      const mergedNameKey = mergedNamePath.join(NAME_SPLIT);
+      if (subMeta.destroy) {
+        // Remove
+        delete clone[mergedNameKey];
+      } else {
+        // Update
+        clone[mergedNameKey] = subMeta;
+      }
+      return clone;
+    });
+  };
+  // >>>>> Get merged errors
+  const [mergedErrors, mergedWarnings] = React.useMemo(() => {
+    const errorList = _toConsumableArray(meta.errors);
+    const warningList = _toConsumableArray(meta.warnings);
+    Object.values(subFieldErrors).forEach(subFieldError => {
+      errorList.push.apply(errorList, _toConsumableArray(subFieldError.errors || []));
+      warningList.push.apply(warningList, _toConsumableArray(subFieldError.warnings || []));
+    });
+    return [errorList, warningList];
+  }, [subFieldErrors, meta.errors, meta.warnings]);
+  // ===================== Children Ref =====================
+  const getItemRef = useItemRef();
+  // ======================== Render ========================
+  function renderLayout(baseChildren, fieldId, isRequired) {
+    if (noStyle && !hidden) {
+      return /*#__PURE__*/React.createElement(StatusProvider, {
+        prefixCls: prefixCls,
+        hasFeedback: props.hasFeedback,
+        validateStatus: props.validateStatus,
+        meta: meta,
+        errors: mergedErrors,
+        warnings: mergedWarnings,
+        noStyle: true,
+        name: name
+      }, baseChildren);
+    }
+    return /*#__PURE__*/React.createElement(ItemHolder, Object.assign({
+      key: "row"
+    }, props, {
+      className: classNames(className, cssVarCls, rootCls, hashId),
+      prefixCls: prefixCls,
+      fieldId: fieldId,
+      isRequired: isRequired,
+      errors: mergedErrors,
+      warnings: mergedWarnings,
+      meta: meta,
+      onSubItemMetaChange: onSubItemMetaChange,
+      layout: layout,
+      name: name
+    }), baseChildren);
+  }
+  if (!hasName && !isRenderProps && !dependencies) {
+    return wrapCSSVar(renderLayout(mergedChildren));
+  }
+  let variables = {};
+  if (typeof label === 'string') {
+    variables.label = label;
+  } else if (name) {
+    variables.label = String(name);
+  }
+  if (messageVariables) {
+    variables = Object.assign(Object.assign({}, variables), messageVariables);
+  }
+  // >>>>> With Field
+  return wrapCSSVar(/*#__PURE__*/React.createElement(Field, Object.assign({}, props, {
+    messageVariables: variables,
+    trigger: trigger,
+    validateTrigger: mergedValidateTrigger,
+    onMetaChange: onMetaChange
+  }), (control, renderMeta, context) => {
+    const mergedName = toArray(name).length && renderMeta ? renderMeta.name : [];
+    const fieldId = getFieldId(mergedName, formName);
+    const isRequired = required !== undefined ? required : !!(rules === null || rules === void 0 ? void 0 : rules.some(rule => {
+      if (rule && typeof rule === 'object' && rule.required && !rule.warningOnly) {
+        return true;
+      }
+      if (typeof rule === 'function') {
+        const ruleEntity = rule(context);
+        return (ruleEntity === null || ruleEntity === void 0 ? void 0 : ruleEntity.required) && !(ruleEntity === null || ruleEntity === void 0 ? void 0 : ruleEntity.warningOnly);
+      }
+      return false;
+    }));
+    // ======================= Children =======================
+    const mergedControl = Object.assign({}, control);
+    let childNode = null;
+    process.env.NODE_ENV !== "production" ? warning(!(shouldUpdate && dependencies), 'usage', "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.") : void 0;
+    if (Array.isArray(mergedChildren) && hasName) {
+      process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.') : void 0;
+      childNode = mergedChildren;
+    } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
+      process.env.NODE_ENV !== "production" ? warning(!!(shouldUpdate || dependencies), 'usage', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.') : void 0;
+      process.env.NODE_ENV !== "production" ? warning(!hasName, 'usage', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.') : void 0;
+    } else if (dependencies && !isRenderProps && !hasName) {
+      process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'Must set `name` or use a render function when `dependencies` is set.') : void 0;
+    } else if (/*#__PURE__*/React.isValidElement(mergedChildren)) {
+      process.env.NODE_ENV !== "production" ? warning(mergedChildren.props.defaultValue === undefined, 'usage', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.') : void 0;
+      const childProps = Object.assign(Object.assign({}, mergedChildren.props), mergedControl);
+      if (!childProps.id) {
+        childProps.id = fieldId;
+      }
+      if (help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
+        const describedbyArr = [];
+        if (help || mergedErrors.length > 0) {
+          describedbyArr.push(`${fieldId}_help`);
+        }
+        if (props.extra) {
+          describedbyArr.push(`${fieldId}_extra`);
+        }
+        childProps['aria-describedby'] = describedbyArr.join(' ');
+      }
+      if (mergedErrors.length > 0) {
+        childProps['aria-invalid'] = 'true';
+      }
+      if (isRequired) {
+        childProps['aria-required'] = 'true';
+      }
+      if (supportRef(mergedChildren)) {
+        childProps.ref = getItemRef(mergedName, mergedChildren);
+      }
+      // We should keep user origin event handler
+      const triggers = new Set([].concat(_toConsumableArray(toArray(trigger)), _toConsumableArray(toArray(mergedValidateTrigger))));
+      triggers.forEach(eventName => {
+        childProps[eventName] = (...args) => {
+          var _a2, _c2;
+          var _a, _b, _c;
+          (_a = mergedControl[eventName]) === null || _a === void 0 ? void 0 : (_a2 = _a).call.apply(_a2, [mergedControl].concat(args));
+          (_c = (_b = mergedChildren.props)[eventName]) === null || _c === void 0 ? void 0 : (_c2 = _c).call.apply(_c2, [_b].concat(args));
+        };
+      });
+      // List of props that need to be watched for changes -> if changes are detected in MemoInput -> rerender
+      const watchingChildProps = [childProps['aria-required'], childProps['aria-invalid'], childProps['aria-describedby']];
+      childNode = /*#__PURE__*/React.createElement(MemoInput, {
+        control: mergedControl,
+        update: mergedChildren,
+        childProps: watchingChildProps
+      }, cloneElement(mergedChildren, childProps));
+    } else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
+      childNode = mergedChildren(context);
+    } else {
+      process.env.NODE_ENV !== "production" ? warning(!mergedName.length || !!noStyle, 'usage', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.') : void 0;
+      childNode = mergedChildren;
+    }
+    return renderLayout(childNode, fieldId, isRequired);
+  }));
+}
+const FormItem = InternalFormItem;
+FormItem.useStatus = useFormItemStatus;
+export default FormItem;