@plasmicpkgs/antd5 0.0.188 → 0.0.189

package/skinny/registerForm.esm.js

@@ -1,393 +1,59 @@
-import { deriveFieldConfigs, normalizeData, usePlasmicDataOp } from '@plasmicapp/data-sources';
-import { usePlasmicCanvasContext, DataProvider, repeatedElement } from '@plasmicapp/host';
-import { Form, Input, InputNumber, Radio } from 'antd';
-import equal from 'fast-deep-equal';
-import React, { isValidElement, cloneElement } from 'react';
-import { r as reactNodeToString, m as mergeProps } from './react-utils-79d444f6.esm.js';
-import { buttonComponentName } from './registerButton.esm.js';
-import { AntdCheckbox, checkboxComponentName } from './registerCheckbox.esm.js';
+import { f as formComponentName, b as buttonComponentName } from './names-73583568.esm.js';
+import { a as arrayEq, r as registerComponentHelper } from './utils-7d8f2418.esm.js';
+import { InputType, formHelpers } from './Form.esm.js';
+import { SchemaForm } from './SchemaForm.esm.js';
+import { Input, InputNumber, Radio } from 'antd';
+import React from 'react';
+import { AntdCheckbox } from './registerCheckbox.esm.js';
 import { AntdDatePicker } from './registerDatePicker.esm.js';
-import { inputComponentName, textAreaComponentName, inputNumberComponentName, passwordComponentName } from './registerInput.esm.js';
-import { AntdRadioGroup, radioGroupComponentName } from './registerRadio.esm.js';
-import { AntdSelect, selectComponentName } from './registerSelect.esm.js';
-import { switchComponentName } from './registerSwitch.esm.js';
-import { E as ErrorBoundary, o as omit, s as setFieldsToUndefined, p as pick, u as usePrevious, e as ensureArray, g as get, r as registerComponentHelper, a as arrayEq } from './utils-7d8f2418.esm.js';
-import 'classnames';
-import 'dayjs';
+import { AntdRadioGroup } from './registerRadio.esm.js';
+import { AntdSelect } from './registerSelect.esm.js';
+export { FormGroup } from './FormGroup.esm.js';
+export { FormItemWrapper } from './FormItem.esm.js';
+export { FormListWrapper } from './FormList.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
+import 'fast-deep-equal';
+import './contexts-4c7952c1.esm.js';
+import '@plasmicapp/data-sources';
+import 'dayjs';
+import './react-utils-79d444f6.esm.js';
+import 'classnames';
+import '@plasmicapp/host';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const FormItem = Form.Item;
-const FormList = Form.List;
-var InputType = /* @__PURE__ */ ((InputType2) => {
-  InputType2["Text"] = "Text";
-  InputType2["TextArea"] = "Text Area";
-  InputType2["Password"] = "Password";
-  InputType2["Number"] = "Number";
-  InputType2["Select"] = "Select";
-  InputType2["Option"] = "Option";
-  InputType2["OptionGroup"] = "Option Group";
-  InputType2["Radio"] = "Radio";
-  InputType2["RadioGroup"] = "Radio Group";
-  InputType2["Checkbox"] = "Checkbox";
-  InputType2["DatePicker"] = "DatePicker";
-  InputType2["Unknown"] = "Unkown";
-  return InputType2;
-})(InputType || {});
-var FormType = /* @__PURE__ */ ((FormType2) => {
-  FormType2[FormType2["NewEntry"] = 0] = "NewEntry";
-  FormType2[FormType2["UpdateEntry"] = 1] = "UpdateEntry";
-  return FormType2;
-})(FormType || {});
-const PathContext = React.createContext({ relativePath: [], fullPath: [] });
-const InternalFormInstanceContext = React.createContext(void 0);
-const FormLayoutContext = React.createContext(void 0);
-const Internal = React.forwardRef(
-  (props, ref) => {
-    var _b, _c, _d, _e;
-    const [form] = Form.useForm();
-    const values = form.getFieldsValue(true);
-    const lastValue = React.useRef(values);
-    const _a = props, {
-      extendedOnValuesChange,
-      forceRemount,
-      formLayout,
-      internalFieldCtx,
-      setInternalFieldCtx
-    } = _a, rest = __objRest(_a, [
-      "extendedOnValuesChange",
-      "forceRemount",
-      "formLayout",
-      "internalFieldCtx",
-      "setInternalFieldCtx"
-    ]);
-    let childrenNode;
-    if (props.mode !== "simplified") {
-      childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
-    } else {
-      childrenNode = /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = props.formItems) != null ? _b : []).map((formItem) => {
-        var _a2, _b2, _c2;
-        return /* @__PURE__ */ React.createElement(
-          ErrorBoundary,
-          {
-            canvasEnvId: props["data-plasmic-canvas-envs"],
-            message: `Error rendering input for ${(_b2 = (_a2 = formItem.label) != null ? _a2 : formItem.name) != null ? _b2 : "undefined"}`
-          },
-          /* @__PURE__ */ React.createElement(
-            FormItemWrapper,
-            __spreadProps(__spreadValues({}, omit(formItem, "key")), {
-              noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
-              valuePropName: (_c2 = formItem.valuePropName) != null ? _c2 : formItem.inputType === "Checkbox" /* Checkbox */ ? "checked" : void 0,
-              style: { width: "100%" }
-            }),
-            formItem.inputType === "Text" /* Text */ ? /* @__PURE__ */ React.createElement(Input, null) : formItem.inputType === "Password" /* Password */ ? /* @__PURE__ */ React.createElement(Input.Password, null) : formItem.inputType === "Text Area" /* TextArea */ ? /* @__PURE__ */ React.createElement(Input.TextArea, null) : formItem.inputType === "Number" /* Number */ ? /* @__PURE__ */ React.createElement(InputNumber, null) : formItem.inputType === "Checkbox" /* Checkbox */ ? /* @__PURE__ */ React.createElement(AntdCheckbox, null, formItem.label) : formItem.inputType === "Select" /* Select */ ? /* @__PURE__ */ React.createElement(AntdSelect, { options: formItem.options }) : formItem.inputType === "DatePicker" /* DatePicker */ ? /* @__PURE__ */ React.createElement(AntdDatePicker, { showTime: formItem.showTime }) : formItem.inputType === "Radio Group" /* RadioGroup */ ? /* @__PURE__ */ React.createElement(
-              AntdRadioGroup,
-              {
-                options: formItem.options,
-                optionType: formItem.optionType,
-                style: { padding: "8px" }
-              }
-            ) : null
-          )
-        );
-      }), props.submitSlot);
-    }
-    const fireOnValuesChange = React.useCallback(() => {
-      const values2 = form.getFieldsValue(true);
-      if (!equal(values2, lastValue.current)) {
-        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
-        lastValue.current = values2;
-      }
-    }, [form, lastValue]);
-    React.useEffect(() => {
-      fireOnValuesChange();
-    }, []);
-    React.useImperativeHandle(ref, () => ({
-      formInstance: form,
-      setFieldsValue: (newValues) => {
-        form.setFieldsValue(newValues);
-        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
-      },
-      setFieldValue: (namePath, value) => {
-        form.setFieldValue(namePath, value);
-        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
-      },
-      resetFields: () => {
-        form.resetFields();
-        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
-      },
-      validateFields: async (...args) => {
-        try {
-          return await form.validateFields(...args);
-        } catch (err) {
-          return err;
-        }
-      },
-      clearFields: () => {
-        const values2 = form.getFieldsValue(true);
-        setFieldsToUndefined(values2);
-        form.setFieldsValue(values2);
-        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
-      }
-    }));
-    const registerField = React.useCallback(
-      (fieldEntity) => {
-        setInternalFieldCtx((ctx) => ({
-          registeredFields: [...ctx.registeredFields, fieldEntity],
-          preservedRegisteredFields: [
-            ...ctx.preservedRegisteredFields,
-            fieldEntity
-          ]
-        }));
-        return () => {
-          setInternalFieldCtx((ctx) => ({
-            registeredFields: ctx.registeredFields.filter(
-              (ent) => ent !== fieldEntity
-            ),
-            preservedRegisteredFields: ctx.preservedRegisteredFields.filter(
-              (ent) => ent !== fieldEntity || fieldEntity.preserve
-            )
-          }));
-        };
-      },
-      [setInternalFieldCtx]
-    );
-    return /* @__PURE__ */ React.createElement(
-      InternalFormInstanceContext.Provider,
-      {
-        value: {
-          layout: formLayout,
-          fireOnValuesChange,
-          forceRemount,
-          registerField,
-          internalFieldCtx,
-          initialValues: (_c = props.initialValues) != null ? _c : {}
-        }
-      },
-      /* @__PURE__ */ React.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React.createElement(
-        Form,
-        __spreadProps(__spreadValues({}, rest), {
-          key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
-          onValuesChange: (...args) => {
-            var _a2;
-            (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
-            extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
-          },
-          onFinish: () => {
-            var _a2;
-            (_a2 = props.onFinish) == null ? void 0 : _a2.call(
-              props,
-              pick(
-                form.getFieldsValue(true),
-                ...internalFieldCtx.preservedRegisteredFields.map(
-                  (field) => field.fullPath
-                )
-              )
-            );
-          },
-          form,
-          labelCol: ((_d = props.labelCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-          wrapperCol: ((_e = props.wrapperCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
-        }),
-        /* @__PURE__ */ React.createElement("style", null, `
-          .ant-form-item-explain + div, .ant-form-item-margin-offset {
-            display: none;
-          }
-          `),
-        childrenNode
-      ))
-    );
-  }
-);
-function deriveFormFieldConfigs(dataFormItems, schema, data) {
-  return deriveFieldConfigs(
-    dataFormItems,
-    schema,
-    (field) => {
-      var _a;
-      return __spreadValues({
-        inputType: "Text" /* Text */
-      }, field && {
-        key: field.id,
-        fieldId: field.id,
-        label: (_a = field.label) != null ? _a : field.id,
-        name: field.id,
-        inputType: field.type === "string" ? "Text" /* Text */ : field.type === "number" ? "Number" /* Number */ : field.type === "boolean" ? "Checkbox" /* Checkbox */ : "Text" /* Text */,
-        //missing date and date-time
-        initialValue: data ? data[field.id] : void 0
-      });
-    }
-  );
-}
-function useFormItemDefinitions(rawData, props, formRef, commonFormCtxData) {
-  const { mode, dataFormItems, setControlContextData } = props;
-  const formInstance = formRef == null ? void 0 : formRef.formInstance;
-  return React.useMemo(() => {
-    const data = rawData && normalizeData(rawData);
-    const schema = data && (data == null ? void 0 : data.schema);
-    if (mode !== "simplified" || !rawData || rawData.isLoading || rawData.error || !data || !schema || !data.data) {
-      setControlContextData == null ? void 0 : setControlContextData(__spreadValues({
-        formInstance
-      }, commonFormCtxData));
-      return void 0;
-    }
-    const row = data.data.length > 0 ? data.data[0] : void 0;
-    const { mergedFields, minimalFullLengthFields } = deriveFormFieldConfigs(
-      dataFormItems != null ? dataFormItems : [],
-      schema,
-      row
-    );
-    setControlContextData == null ? void 0 : setControlContextData(__spreadValues({
-      schema: data.schema,
-      minimalFullLengthFields,
-      mergedFields,
-      formInstance
-    }, commonFormCtxData));
-    return mergedFields;
-  }, [
-    mode,
-    setControlContextData,
-    dataFormItems,
-    rawData,
-    formInstance,
-    commonFormCtxData
-  ]);
-}
-const useRawData = (props) => {
-  const rawData = usePlasmicDataOp(props.data);
-  return props.data ? rawData : void 0;
-};
-const FormWrapper = React.forwardRef(
-  (props, ref) => {
-    var _a;
-    const [remountKey, setRemountKey] = React.useState(0);
-    const forceRemount = React.useCallback(
-      () => setRemountKey((k) => k + 1),
-      [setRemountKey]
-    );
-    const previousInitialValues = usePrevious(props.initialValues);
-    const wrapperRef = React.useRef(null);
-    React.useEffect(() => {
-      if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
-        forceRemount();
-      }
-    }, [previousInitialValues, props.initialValues]);
-    const [internalFieldCtx, setInternalFieldCtx] = React.useState({
-      registeredFields: [],
-      preservedRegisteredFields: []
-    });
-    React.useImperativeHandle(
-      ref,
-      () => wrapperRef.current ? __spreadValues({}, wrapperRef.current) : {}
-    );
-    const formLayout = React.useMemo(
-      () => {
-        var _a2;
-        return {
-          layout: props.layout,
-          labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
-        };
-      },
-      [props.layout, (_a = props.labelCol) == null ? void 0 : _a.span]
-    );
-    const commonFormCtxData = React.useMemo(
-      () => ({
-        layout: formLayout,
-        internalFieldCtx
-      }),
-      [formLayout, internalFieldCtx]
-    );
-    const rawData = useRawData(props);
-    const formItemDefinitions = useFormItemDefinitions(
-      rawData,
-      props,
-      wrapperRef.current,
-      commonFormCtxData
-    );
-    React.useEffect(() => {
-      if (rawData && !rawData.isLoading) {
-        forceRemount();
-      }
-    }, [rawData]);
-    const previousDataOp = usePrevious(props.data);
-    React.useEffect(() => {
-      if (previousDataOp == null && props.data != null || previousDataOp != null && props.data == null) {
-        forceRemount();
-      }
-    }, [props.data]);
-    const _b = props, { dataFormItems, formItems, data } = _b, rest = __objRest(_b, ["dataFormItems", "formItems", "data"]);
-    const actualFormItems = props.mode === "simplified" && formItemDefinitions ? formItemDefinitions : data ? dataFormItems : formItems;
-    const previousFormItems = React.useRef([]);
-    React.useEffect(() => {
-      if (!(rawData && rawData.isLoading)) {
-        previousFormItems.current = actualFormItems != null ? actualFormItems : [];
-      }
-    }, [rawData, actualFormItems]);
-    if (props.mode === "simplified" && rawData && "error" in rawData) {
-      return /* @__PURE__ */ React.createElement("div", null, "Error when fetching data: ", rawData.error.message);
-    }
-    const isSchemaForm = props.mode === "simplified" && !!props.data;
-    const isLoadingData = rawData == null ? void 0 : rawData.isLoading;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      Internal,
-      __spreadProps(__spreadValues({
-        key: remountKey
-      }, rest), {
-        forceRemount,
-        formLayout,
-        internalFieldCtx,
-        setInternalFieldCtx,
-        formItems: rawData && rawData.isLoading ? previousFormItems.current : actualFormItems,
-        ref: wrapperRef,
-        style: isSchemaForm && isLoadingData ? {
-          opacity: 0.5,
-          transitionDelay: "250ms",
-          transition: "1s"
-        } : {}
-      })
-    ), isSchemaForm && isLoadingData && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          width: "100%",
-          height: "100%"
-        }
-      }
-    ));
-  }
-);
+const mapAntdComponentToInputType = /* @__PURE__ */ new Map([
+  [Input, InputType.Text],
+  [Input.TextArea, InputType.TextArea],
+  [Input.Password, InputType.Password],
+  [InputNumber, InputType.Number],
+  [AntdSelect, InputType.Select],
+  [AntdRadioGroup, InputType.RadioGroup],
+  [Radio, InputType.Radio],
+  [AntdDatePicker, InputType.DatePicker],
+  [AntdCheckbox, InputType.Checkbox]
+]);
+const mapPlumeTypeToInputType = /* @__PURE__ */ new Map([
+  ["text-input", InputType.Text],
+  ["select", InputType.Select],
+  ["checkbox", InputType.Checkbox],
+  ["switch", InputType.Checkbox]
+]);
 const COMMON_ACTIONS = [
   {
     type: "button-action",
@@ -430,709 +96,99 @@ const COMMON_ACTIONS = [
   //   },
   // },
 ];
-const colProp = (displayName, defaultValue, description) => ({
-  type: "object",
-  displayName,
-  advanced: true,
-  fields: {
-    span: {
-      type: "number",
-      displayName: "Width",
-      description: "The number of grid columns to span in width (out of 24 columns total)",
-      min: 1,
-      max: 24
-    },
-    offset: {
-      type: "number",
-      displayName: "Offset",
-      description: "Number of grid columns to skip from the left (out of 24 columns total)",
-      min: 0,
-      max: 23
-    },
-    horizontalOnly: {
-      type: "boolean",
-      displayName: "Horizontal only",
-      description: "Only apply when form layout is horizontal"
+function getDefaultValueHint(field) {
+  return (_props, contextData, { item }) => {
+    var _a;
+    if (!contextData || !("mergedFields" in contextData)) {
+      return void 0;
     }
-  },
-  nameFunc: () => `Edit ${displayName}`,
-  description,
-  defaultValue
-});
-const formHelpers = {
-  states: {
-    value: {
-      onMutate: (value, $ref) => {
-        var _a;
-        (_a = $ref == null ? void 0 : $ref.formInstance) == null ? void 0 : _a.setFieldsValue(value);
-      }
+    if (item == null ? void 0 : item.fieldId) {
+      const fieldSetting = (_a = contextData.mergedFields) == null ? void 0 : _a.find(
+        (f) => f.fieldId === item.fieldId
+      );
+      return fieldSetting == null ? void 0 : fieldSetting[field];
     }
-  }
-};
-const formComponentName = "plasmic-antd5-form";
-const formTypeDescription = `
-  You can create form with two different behaviors:
-  
-
-
-  1. Create a new entry: The form will be created empty and it will create a new row when submitted.
-  2. Update an entry: The form will be pre-filled with the row values and it will update the table entry when submitted.
-  
-
-
-  For both options, you can customize later.
-`;
-function registerForm(loader) {
-  registerComponentHelper(loader, FormWrapper, {
-    name: formComponentName,
-    displayName: "Form",
-    description: "[Learn how to use forms](https://docs.plasmic.app/learn/forms/)",
-    defaultStyles: {
-      layout: "vbox",
-      alignItems: "flex-start"
-    },
-    props: {
-      mode: {
-        type: "controlMode",
-        defaultValue: "simplified"
-      },
-      data: {
-        type: "formDataConnection",
-        disableDynamicValue: true,
-        disableLinkToProp: true,
-        hidden: (ps) => ps.mode !== "simplified" || !ps.data
-      },
-      formItems: {
-        displayName: "Fields",
-        type: "array",
-        itemType: commonSimplifiedFormArrayItemType("formItems"),
-        defaultValue: [
-          {
-            label: "Name",
-            name: "name",
-            inputType: "Text" /* Text */
-          },
-          {
-            label: "Message",
-            name: "message",
-            inputType: "Text Area" /* TextArea */
-          }
-        ],
-        hidden: (ps) => {
-          if (ps.mode === "advanced") {
-            return true;
-          }
-          return !!ps.data;
+    return void 0;
+  };
+}
+function commonFormItemProps(usage) {
+  const getFormItemProps = (ps, _ctx, { item }) => {
+    if (usage === "simplified-form-item") {
+      return item;
+    } else {
+      return ps;
+    }
+  };
+  return {
+    name: {
+      type: "string",
+      required: true,
+      displayName: "Field key",
+      description: "Key name for this field value in the submitted form data.",
+      validator: (value, _ps, ctx) => {
+        var _a, _b, _c;
+        let currFullPath = [];
+        if (usage === "simplified-form-item") {
+          currFullPath = [value];
+        } else {
+          const formItemCtx = ctx;
+          currFullPath = [...(_a = formItemCtx == null ? void 0 : formItemCtx.parentFormItemPath) != null ? _a : [], value];
         }
+        const nameCounter = ((_c = (_b = ctx == null ? void 0 : ctx.internalFieldCtx) == null ? void 0 : _b.registeredFields) != null ? _c : []).filter((formItem) => arrayEq(formItem.fullPath, currFullPath)).length;
+        return nameCounter === 1 ? true : `Repeated form field key: ${currFullPath.join(" \u2192 ")}`;
       },
-      /**
-       * dataFormItems are used to expand the form items from schema forms.
-       * We can't use the formItems prop because it has a default value. Therefore, if we unset the formItems prop,
-       * we would end up with the default value of formItems + schema form items.
-       * Ideally, we would need to support dynamic default value.
-       */
-      dataFormItems: {
-        displayName: "Data Fields",
-        type: "array",
-        itemType: commonSimplifiedFormArrayItemType("dataFormItems"),
-        hidden: (ps) => {
-          if (ps.mode === "advanced") {
-            return true;
-          }
-          return !ps.data;
-        },
-        unstable__keyFunc: (x) => x.key,
-        unstable__minimalValue: (ps, contextData) => {
-          return ps.data ? contextData == null ? void 0 : contextData.minimalFullLengthFields : void 0;
-        },
-        unstable__canDelete: (item, ps, ctx) => {
-          if (ps.mode !== "simplified") {
-            return true;
-          }
-          if (!(ctx == null ? void 0 : ctx.schema)) {
-            return false;
-          }
-          if (item.fieldId && ctx.schema.fields.some((f) => f.id === item.fieldId)) {
-            return false;
+      defaultValueHint: getDefaultValueHint("name")
+    },
+    initialValue: {
+      type: "dynamic",
+      control: (ps, ctx, {
+        item,
+        path
+      }) => {
+        var _a, _b, _c, _d;
+        let inputType = InputType.Unknown;
+        if (usage === "simplified-form-item") {
+          inputType = item.inputType;
+          if (!ps.data) {
+            inputType = item.inputType;
+          } else if (path != null && typeof path[1] === "number") {
+            inputType = (_b = (_a = ctx == null ? void 0 : ctx.mergedFields) == null ? void 0 : _a[path[1]].inputType) != null ? _b : InputType.Unknown;
           }
-          return true;
-        }
-      },
-      submitSlot: __spreadValues({
-        type: "slot",
-        hidden: () => true,
-        defaultValue: {
-          type: "component",
-          name: buttonComponentName,
-          props: {
-            type: "primary",
-            submitsForm: true,
-            children: {
-              type: "text",
-              value: "Submit"
-            }
-          }
-        }
-      }, {
-        mergeWithParent: () => true,
-        hiddenMergedProps: (ps) => !ps.mode
-      }),
-      children: {
-        type: "slot",
-        hidden: (props) => props.mode !== "advanced"
-      },
-      initialValues: {
-        displayName: "Initial field values",
-        type: "object"
-      },
-      layout: {
-        displayName: "Form layout",
-        type: "choice",
-        options: ["horizontal", "vertical", "inline"],
-        defaultValue: "vertical"
-      },
-      labelAlign: {
-        type: "choice",
-        options: ["left", "right"],
-        defaultValueHint: "right",
-        advanced: true,
-        hidden: (ps) => ps.layout !== "horizontal"
-      },
-      labelCol: colProp(
-        "Label layout",
-        {
-          span: 8,
-          horizontalOnly: true
-        },
-        "Set the width and offset of the labels"
-      ),
-      wrapperCol: colProp(
-        "Control layout",
-        {
-          span: 16,
-          horizontalOnly: true
-        },
-        "Set the width and offset of the form controls"
-      ),
-      colon: {
-        type: "boolean",
-        description: `Show a colon after labels by default (only for horizontal layout)`,
-        defaultValueHint: true,
-        advanced: true,
-        hidden: (props) => {
-          var _a;
-          return ((_a = props.layout) != null ? _a : "horizontal") !== "horizontal";
-        }
-      },
-      requiredMark: {
-        displayName: "Required/optional indicators",
-        type: "choice",
-        options: [
-          {
-            value: "optional",
-            label: "Indicate optional fields"
-          },
-          {
-            value: true,
-            label: "Indicate required fields with asterisk"
-          },
-          {
-            value: false,
-            label: "Show no indicators"
-          }
-        ],
-        advanced: true,
-        defaultValueHint: true
-      },
-      extendedOnValuesChange: {
-        type: "eventHandler",
-        displayName: "On values change",
-        argTypes: [
-          {
-            name: "changedValues",
-            type: "object"
-          },
-          {
-            name: "allValues",
-            type: "object"
-          }
-        ]
-      },
-      onFinish: {
-        type: "eventHandler",
-        displayName: "On submit",
-        argTypes: [
-          {
-            name: "values",
-            type: "object"
-          }
-        ]
-      },
-      onFinishFailed: {
-        // function({ values, errorFields, outOfDate })
-        type: "eventHandler",
-        displayName: "On invalid submit",
-        argTypes: [
-          {
-            name: "data",
-            type: "object"
-          }
-        ]
-      },
-      validateTrigger: {
-        displayName: "Validate when",
-        type: "choice",
-        options: [
-          { value: "onBlur", label: "a field loses focus" },
-          { value: "onChange", label: "a field changes" },
-          { value: "onSubmit", label: "the form is submitted" }
-        ],
-        multiSelect: true,
-        defaultValueHint: ["onChange"],
-        advanced: true
-      }
-    },
-    actions: [
-      ...COMMON_ACTIONS,
-      {
-        type: "form-schema",
-        hidden: (ps) => ps.mode !== "simplified" || !!ps.data
-      }
-    ],
-    states: {
-      value: {
-        type: "readonly",
-        variableType: "object",
-        onChangeProp: "extendedOnValuesChange"
-      }
-    },
-    componentHelpers: {
-      helpers: formHelpers,
-      importName: "formHelpers",
-      importPath: "@plasmicpkgs/antd5/skinny/registerForm"
-    },
-    refActions: {
-      setFieldsValue: {
-        displayName: "Set multiple fields",
-        argTypes: [
-          {
-            name: "newValues",
-            displayName: "New Values",
-            type: "exprEditor"
-          }
-        ]
-      },
-      setFieldValue: {
-        displayName: "Set field",
-        argTypes: [
-          {
-            name: "namePath",
-            displayName: "Name Path",
-            type: {
-              type: "dataSelector",
-              data: (_, ctx) => {
-                if (!(ctx == null ? void 0 : ctx.formInstance)) {
-                  return {};
-                }
-                return ctx.formInstance.getFieldsValue(true);
-              }
-            }
-          },
-          {
-            name: "value",
-            displayName: "New Value",
-            type: "exprEditor"
-          }
-        ]
-      },
-      resetFields: {
-        displayName: "Reset fields to initial value",
-        argTypes: []
-      },
-      clearFields: {
-        displayName: "Clear fields",
-        argTypes: []
-      },
-      validateFields: {
-        displayName: "Validate fields",
-        argTypes: [
-          {
-            name: "nameList",
-            displayName: "Name List",
-            type: "object"
-          },
-          {
-            name: "options",
-            displayName: "Options",
-            type: "object"
-          }
-        ]
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormWrapper"
-  });
-}
-function plasmicRulesToAntdRules(plasmicRules, label) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const effectiveLabel = label || "This field";
-  const rules = [];
-  for (const plasmicRule of plasmicRules) {
-    switch (plasmicRule.ruleType) {
-      case "enum":
-        rules.push({
-          type: "enum",
-          enum: (_b = (_a = plasmicRule.options) == null ? void 0 : _a.map((opt) => opt.value)) != null ? _b : [],
-          message: (_c = plasmicRule.message) != null ? _c : `${effectiveLabel} must be a valid value`
-        });
-        break;
-      case "required":
-        rules.push({
-          required: true,
-          message: (_d = plasmicRule.message) != null ? _d : `${effectiveLabel} is required`
-        });
-        break;
-      case "regex":
-        rules.push({
-          pattern: new RegExp((_e = plasmicRule.pattern) != null ? _e : ""),
-          message: (_f = plasmicRule.message) != null ? _f : `${effectiveLabel} must be a valid value`
-        });
-        break;
-      case "whitespace":
-        rules.push({
-          whitespace: true,
-          message: (_g = plasmicRule.message) != null ? _g : `${effectiveLabel} is required`
-        });
-        break;
-      case "min":
-        rules.push({
-          [plasmicRule.ruleType]: plasmicRule.length,
-          message: (_h = plasmicRule.message) != null ? _h : `${effectiveLabel} must be at least ${plasmicRule.length} characters`
-        });
-        break;
-      case "max":
-        rules.push({
-          [plasmicRule.ruleType]: plasmicRule.length,
-          message: (_i = plasmicRule.message) != null ? _i : `${effectiveLabel} must be at most ${plasmicRule.length} characters`
-        });
-        break;
-      case "advanced":
-        rules.push({
-          validator: (...args) => {
-            var _a2;
-            return ((_a2 = plasmicRule.custom) == null ? void 0 : _a2.apply(null, args)) ? Promise.resolve() : Promise.reject();
-          },
-          message: plasmicRule.message
-        });
-    }
-  }
-  return rules;
-}
-const useFormItemRelativeName = (name) => {
-  const pathCtx = React.useContext(PathContext);
-  return typeof name === "object" ? [...pathCtx.relativePath, ...name] : typeof name === "string" ? [...pathCtx.relativePath, name] : void 0;
-};
-const useFormItemFullName = (name) => {
-  const pathCtx = React.useContext(PathContext);
-  return typeof name === "object" ? [...pathCtx.fullPath, ...name] : typeof name === "string" ? [...pathCtx.fullPath, name] : void 0;
-};
-function useFormInstanceMaybe() {
-  return Form.useFormInstance();
-}
-function FormItemWrapper(props) {
-  var _b, _c, _d;
-  const _a = props, {
-    rules: plasmicRules,
-    description,
-    noLabel,
-    name,
-    hideValidationMessage,
-    customizeProps,
-    setControlContextData,
-    alignLabellessWithControls = true
-  } = _a, rest = __objRest(_a, [
-    "rules",
-    "description",
-    "noLabel",
-    "name",
-    "hideValidationMessage",
-    "customizeProps",
-    "setControlContextData",
-    "alignLabellessWithControls"
-  ]);
-  const relativeFormItemName = useFormItemRelativeName(name);
-  const fullFormItemName = useFormItemFullName(name);
-  const pathCtx = React.useContext(PathContext);
-  const fieldEntity = React.useRef({
-    preserve: (_b = props.preserve) != null ? _b : true,
-    fullPath: pathCtx.fullPath,
-    name
-  }).current;
-  const bestEffortLabel = !noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
-  const rules = plasmicRules ? plasmicRulesToAntdRules(
-    plasmicRules,
-    typeof bestEffortLabel === "number" ? "" + bestEffortLabel : bestEffortLabel
-  ) : void 0;
-  const layoutContext = React.useContext(FormLayoutContext);
-  const inCanvas = !!usePlasmicCanvasContext();
-  const {
-    fireOnValuesChange,
-    forceRemount,
-    registerField,
-    initialValues,
-    internalFieldCtx
-  } = (_c = React.useContext(InternalFormInstanceContext)) != null ? _c : {};
-  if (inCanvas) {
-    const form = useFormInstanceMaybe();
-    const prevPropValues = React.useRef({
-      initialValue: props.initialValue,
-      name: props.name
-    });
-    (_d = props.setControlContextData) == null ? void 0 : _d.call(props, {
-      internalFieldCtx,
-      formInstance: form,
-      parentFormItemPath: pathCtx.fullPath,
-      layout: layoutContext
-    });
-    React.useEffect(() => {
-      if (prevPropValues.current.name !== props.name) {
-        forceRemount == null ? void 0 : forceRemount();
-      }
-      if (!fullFormItemName || get(initialValues, fullFormItemName) != null || props.initialValue == null) {
-        return;
-      }
-      form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
-      prevPropValues.current.initialValue = props.initialValue;
-      fireOnValuesChange == null ? void 0 : fireOnValuesChange();
-    }, [
-      form,
-      props.initialValue,
-      JSON.stringify(pathCtx.fullPath),
-      props.name,
-      props.preserve
-    ]);
-  }
-  React.useEffect(() => {
-    var _a2;
-    fieldEntity.fullPath = [
-      ...pathCtx.fullPath,
-      ...props.name != null ? [props.name] : []
-    ];
-    fieldEntity.name = props.name;
-    fieldEntity.preserve = (_a2 = props.preserve) != null ? _a2 : true;
-  }, [pathCtx.fullPath, props.name, props.preserve]);
-  React.useEffect(() => {
-    const unregister = registerField == null ? void 0 : registerField(fieldEntity);
-    return () => unregister == null ? void 0 : unregister();
-  }, []);
-  return /* @__PURE__ */ React.createElement(
-    FormItem,
-    __spreadProps(__spreadValues({}, rest), {
-      label: noLabel ? void 0 : props.label,
-      name: relativeFormItemName,
-      rules,
-      extra: description,
-      help: hideValidationMessage ? "" : props.help,
-      colon: noLabel ? false : void 0,
-      valuePropName: deriveValuePropName(props),
-      trigger: deriveOnChangePropName(props),
-      wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
-    }),
-    /* @__PURE__ */ React.createElement(FormItemForwarder, { formItemProps: props })
-  );
-}
-function deriveValuePropName(props) {
-  var _a;
-  if (props.valuePropName) {
-    return props.valuePropName;
-  }
-  const valueProps = ((_a = React.Children.map(props.children, (child) => {
-    var _a2;
-    if (React.isValidElement(child)) {
-      const childType = child.type;
-      if (childType) {
-        const x = (_a2 = childType.__plasmicFormFieldMeta) == null ? void 0 : _a2.valueProp;
-        if (x) {
-          return x;
-        }
-        const plumeType = childType.__plumeType;
-        if (plumeType && (plumeType === "checkbox" || plumeType === "switch")) {
-          return "isChecked";
-        }
-      }
-    }
-    return void 0;
-  })) != null ? _a : []).filter((x) => !!x);
-  if (valueProps.length > 0) {
-    return valueProps[0];
-  }
-  return void 0;
-}
-function deriveOnChangePropName(props) {
-  var _a;
-  if (props.trigger) {
-    return props.trigger;
-  }
-  const triggerProps = ((_a = React.Children.map(props.children, (child) => {
-    var _a2;
-    if (React.isValidElement(child)) {
-      const childType = child.type;
-      if (childType) {
-        const x = (_a2 = childType.__plasmicFormFieldMeta) == null ? void 0 : _a2.onChangeProp;
-        if (x) {
-          return x;
-        }
-      }
-    }
-    return void 0;
-  })) != null ? _a : []).filter((x) => !!x);
-  if (triggerProps.length > 0) {
-    return triggerProps[0];
-  }
-  return void 0;
-}
-function FormItemForwarder(_a) {
-  var _b = _a, { formItemProps } = _b, props = __objRest(_b, ["formItemProps"]);
-  var _a2;
-  const status = Form.Item.useStatus();
-  const internalFormCtx = React.useContext(InternalFormInstanceContext);
-  const data = {
-    status: status.status
-  };
-  (_a2 = props.setControlContextData) == null ? void 0 : _a2.call(props, {
-    internalFormCtx,
-    status
-  });
-  return React.Children.map(formItemProps.children, (child, i) => {
-    var _a3;
-    if (i === 0 && isValidElement(child)) {
-      let newProps = __spreadProps(__spreadValues(__spreadValues({
-        name: formItemProps.name
-      }, (_a3 = child.props) != null ? _a3 : {}), props), {
-        __plasmicFormField: true
-      });
-      if (formItemProps.customizeProps) {
-        newProps = mergeProps(
-          newProps,
-          formItemProps.customizeProps(data, newProps)
-        );
-      }
-      return cloneElement(child, newProps);
-    } else {
-      return child;
-    }
-  });
-}
-function getDefaultValueHint(field) {
-  return (_props, contextData, { item }) => {
-    var _a;
-    if (!contextData || !("mergedFields" in contextData)) {
-      return void 0;
-    }
-    if (item == null ? void 0 : item.fieldId) {
-      const fieldSetting = (_a = contextData.mergedFields) == null ? void 0 : _a.find(
-        (f) => f.fieldId === item.fieldId
-      );
-      return fieldSetting == null ? void 0 : fieldSetting[field];
-    }
-    return void 0;
-  };
-}
-const mapAntdComponentToInputType = /* @__PURE__ */ new Map([
-  [Input, "Text" /* Text */],
-  [Input.TextArea, "Text Area" /* TextArea */],
-  [Input.Password, "Password" /* Password */],
-  [InputNumber, "Number" /* Number */],
-  [AntdSelect, "Select" /* Select */],
-  [AntdRadioGroup, "Radio Group" /* RadioGroup */],
-  [Radio, "Radio" /* Radio */],
-  [AntdDatePicker, "DatePicker" /* DatePicker */],
-  [AntdCheckbox, "Checkbox" /* Checkbox */]
-]);
-const mapPlumeTypeToInputType = /* @__PURE__ */ new Map([
-  ["text-input", "Text" /* Text */],
-  ["select", "Select" /* Select */],
-  ["checkbox", "Checkbox" /* Checkbox */],
-  ["switch", "Checkbox" /* Checkbox */]
-]);
-function commonFormItemProps(usage) {
-  const getFormItemProps = (ps, _ctx, { item }) => {
-    if (usage === "simplified-form-item") {
-      return item;
-    } else {
-      return ps;
-    }
-  };
-  return {
-    name: {
-      type: "string",
-      required: true,
-      displayName: "Field key",
-      description: "Key name for this field value in the submitted form data.",
-      validator: (value, _ps, ctx) => {
-        var _a, _b, _c;
-        let currFullPath = [];
-        if (usage === "simplified-form-item") {
-          currFullPath = [value];
-        } else {
-          const formItemCtx = ctx;
-          currFullPath = [...(_a = formItemCtx == null ? void 0 : formItemCtx.parentFormItemPath) != null ? _a : [], value];
-        }
-        const nameCounter = ((_c = (_b = ctx == null ? void 0 : ctx.internalFieldCtx) == null ? void 0 : _b.registeredFields) != null ? _c : []).filter((formItem) => arrayEq(formItem.fullPath, currFullPath)).length;
-        return nameCounter === 1 ? true : `Repeated form field key: ${currFullPath.join(" \u2192 ")}`;
-      },
-      defaultValueHint: getDefaultValueHint("name")
-    },
-    initialValue: {
-      type: "dynamic",
-      control: (ps, ctx, {
-        item,
-        path
-      }) => {
-        var _a, _b, _c, _d;
-        let inputType = "Unkown" /* Unknown */;
-        if (usage === "simplified-form-item") {
-          inputType = item.inputType;
-          if (!ps.data) {
-            inputType = item.inputType;
-          } else if (path != null && typeof path[1] === "number") {
-            inputType = (_b = (_a = ctx == null ? void 0 : ctx.mergedFields) == null ? void 0 : _a[path[1]].inputType) != null ? _b : "Unkown" /* Unknown */;
-          }
-        } else {
-          if (!React.isValidElement(ps.children) || typeof ps.children.type === "string") {
-            inputType = "Unkown" /* Unknown */;
-          } else {
-            if (mapAntdComponentToInputType.has(ps.children.type)) {
-              inputType = (_c = mapAntdComponentToInputType.get(ps.children.type)) != null ? _c : "Unkown" /* Unknown */;
-            } else if ("__plumeType" in ps.children.type) {
-              inputType = (_d = mapPlumeTypeToInputType.get(
-                ps.children.type.__plumeType
-              )) != null ? _d : "Unkown" /* Unknown */;
+        } else {
+          if (!React.isValidElement(ps.children) || typeof ps.children.type === "string") {
+            inputType = InputType.Unknown;
+          } else {
+            if (mapAntdComponentToInputType.has(ps.children.type)) {
+              inputType = (_c = mapAntdComponentToInputType.get(ps.children.type)) != null ? _c : InputType.Unknown;
+            } else if ("__plumeType" in ps.children.type) {
+              inputType = (_d = mapPlumeTypeToInputType.get(
+                ps.children.type.__plumeType
+              )) != null ? _d : InputType.Unknown;
             }
           }
         }
         if ([
-          "Text" /* Text */,
-          "Text Area" /* TextArea */,
-          "Password" /* Password */,
-          "Select" /* Select */,
-          "Radio Group" /* RadioGroup */
+          InputType.Text,
+          InputType.TextArea,
+          InputType.Password,
+          InputType.Select,
+          InputType.RadioGroup
         ].includes(inputType)) {
           return {
             type: "string",
             defaultValueHint: getDefaultValueHint("initialValue")
           };
-        } else if ("Number" /* Number */ === inputType) {
+        } else if (InputType.Number === inputType) {
           return {
             type: "number",
             defaultValueHint: getDefaultValueHint("initialValue")
           };
-        } else if ("Checkbox" /* Checkbox */ === inputType) {
+        } else if (InputType.Checkbox === inputType) {
           return {
             type: "boolean",
             defaultValueHint: getDefaultValueHint("initialValue")
           };
-        } else if ("DatePicker" /* DatePicker */ === inputType) {
+        } else if (InputType.DatePicker === inputType) {
           return {
             type: "dateString",
             defaultValueHint: getDefaultValueHint("initialValue")
@@ -1258,7 +314,7 @@ function commonFormItemProps(usage) {
 }
 const commonSimplifiedFormArrayItemType = (propName) => ({
   type: "object",
-  fields: __spreadValues({
+  fields: __spreadValues$1({
     label: {
       type: "string",
       defaultValueHint: getDefaultValueHint("label")
@@ -1267,13 +323,13 @@ const commonSimplifiedFormArrayItemType = (propName) => ({
       type: "choice",
       options: Object.values(InputType).filter(
         (inputType) => ![
-          "Option" /* Option */,
-          "Option Group" /* OptionGroup */,
-          "Radio" /* Radio */,
-          "Unkown" /* Unknown */
+          InputType.Option,
+          InputType.OptionGroup,
+          InputType.Radio,
+          InputType.Unknown
         ].includes(inputType)
       ),
-      defaultValue: "Text" /* Text */,
+      defaultValue: InputType.Text,
       defaultValueHint: getDefaultValueHint("inputType")
     },
     options: {
@@ -1290,7 +346,7 @@ const commonSimplifiedFormArrayItemType = (propName) => ({
             defaultValue: "option",
             hidden: (ps, _ctx, { path }) => {
               var _a, _b;
-              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
+              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== InputType.Select) {
                 return true;
               }
               return false;
@@ -1301,7 +357,7 @@ const commonSimplifiedFormArrayItemType = (propName) => ({
             type: "string",
             hidden: (ps, _ctx, { path, item }) => {
               var _a, _b;
-              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
+              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== InputType.Select) {
                 return false;
               }
               return item.type !== "option";
@@ -1319,362 +375,391 @@ const commonSimplifiedFormArrayItemType = (propName) => ({
             },
             hidden: (ps, _ctx, { path, item }) => {
               var _a, _b;
-              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
+              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== InputType.Select) {
                 return true;
               }
               return item.type !== "option-group";
             }
           }
         },
-        nameFunc: (item) => item == null ? void 0 : item.label
+        nameFunc: (item) => item == null ? void 0 : item.label
+      },
+      hidden: (_ps, _ctx, { item }) => ![InputType.Select, InputType.RadioGroup].includes(item.inputType)
+    },
+    optionType: {
+      type: "choice",
+      options: [
+        { value: "default", label: "Radio" },
+        { value: "button", label: "Button" }
+      ],
+      hidden: (_ps, _ctx, { item }) => InputType.RadioGroup !== item.inputType,
+      defaultValueHint: "Radio",
+      displayName: "Option Type"
+    },
+    showTime: {
+      type: "boolean",
+      displayName: "Show Time",
+      description: "To provide an additional time selection",
+      hidden: (_ps, _ctx, { item }) => ![InputType.DatePicker].includes(item.inputType)
+    }
+  }, commonFormItemProps("simplified-form-item")),
+  nameFunc: (item) => {
+    var _a, _b;
+    return (_b = (_a = item.fieldId) != null ? _a : item.label) != null ? _b : item.name;
+  }
+});
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const colProp = (displayName, defaultValue, description) => ({
+  type: "object",
+  displayName,
+  advanced: true,
+  fields: {
+    span: {
+      type: "number",
+      displayName: "Width",
+      description: "The number of grid columns to span in width (out of 24 columns total)",
+      min: 1,
+      max: 24
+    },
+    offset: {
+      type: "number",
+      displayName: "Offset",
+      description: "Number of grid columns to skip from the left (out of 24 columns total)",
+      min: 0,
+      max: 23
+    },
+    horizontalOnly: {
+      type: "boolean",
+      displayName: "Horizontal only",
+      description: "Only apply when form layout is horizontal"
+    }
+  },
+  nameFunc: () => `Edit ${displayName}`,
+  description,
+  defaultValue
+});
+const formTypeDescription = `
+  You can create form with two different behaviors:
+  
+
+
+  1. Create a new entry: The form will be created empty and it will create a new row when submitted.
+  2. Update an entry: The form will be pre-filled with the row values and it will update the table entry when submitted.
+  
+
+
+  For both options, you can customize later.
+`;
+function registerForm(loader) {
+  registerComponentHelper(loader, SchemaForm, {
+    name: formComponentName,
+    displayName: "Form",
+    description: "[Learn how to use forms](https://docs.plasmic.app/learn/forms/)",
+    defaultStyles: {
+      layout: "vbox",
+      alignItems: "flex-start"
+    },
+    props: {
+      mode: {
+        type: "controlMode",
+        defaultValue: "simplified"
+      },
+      data: {
+        type: "formDataConnection",
+        disableDynamicValue: true,
+        disableLinkToProp: true,
+        hidden: (ps) => ps.mode !== "simplified" || !ps.data,
+        invariantable: true
+      },
+      formItems: {
+        displayName: "Fields",
+        type: "array",
+        itemType: commonSimplifiedFormArrayItemType("formItems"),
+        defaultValue: [
+          {
+            label: "Name",
+            name: "name",
+            inputType: InputType.Text
+          },
+          {
+            label: "Message",
+            name: "message",
+            inputType: InputType.TextArea
+          }
+        ],
+        hidden: (ps) => {
+          if (ps.mode === "advanced") {
+            return true;
+          }
+          return !!ps.data;
+        },
+        invariantable: true
+      },
+      /**
+       * dataFormItems are used to expand the form items from schema forms.
+       * We can't use the formItems prop because it has a default value. Therefore, if we unset the formItems prop,
+       * we would end up with the default value of formItems + schema form items.
+       * Ideally, we would need to support dynamic default value.
+       */
+      dataFormItems: {
+        displayName: "Data Fields",
+        type: "array",
+        itemType: commonSimplifiedFormArrayItemType("dataFormItems"),
+        hidden: (ps) => {
+          if (ps.mode === "advanced") {
+            return true;
+          }
+          return !ps.data;
+        },
+        unstable__keyFunc: (x) => x.key,
+        unstable__minimalValue: (ps, contextData) => {
+          return ps.data ? contextData == null ? void 0 : contextData.minimalFullLengthFields : void 0;
+        },
+        unstable__canDelete: (item, ps, ctx) => {
+          if (ps.mode !== "simplified") {
+            return true;
+          }
+          if (!(ctx == null ? void 0 : ctx.schema)) {
+            return false;
+          }
+          if (item.fieldId && ctx.schema.fields.some((f) => f.id === item.fieldId)) {
+            return false;
+          }
+          return true;
+        },
+        invariantable: true
       },
-      hidden: (_ps, _ctx, { item }) => !["Select" /* Select */, "Radio Group" /* RadioGroup */].includes(item.inputType)
-    },
-    optionType: {
-      type: "choice",
-      options: [
-        { value: "default", label: "Radio" },
-        { value: "button", label: "Button" }
-      ],
-      hidden: (_ps, _ctx, { item }) => "Radio Group" /* RadioGroup */ !== item.inputType,
-      defaultValueHint: "Radio",
-      displayName: "Option Type"
-    },
-    showTime: {
-      type: "boolean",
-      displayName: "Show Time",
-      description: "To provide an additional time selection",
-      hidden: (_ps, _ctx, { item }) => !["DatePicker" /* DatePicker */].includes(item.inputType)
-    }
-  }, commonFormItemProps("simplified-form-item")),
-  nameFunc: (item) => {
-    var _a, _b;
-    return (_b = (_a = item.fieldId) != null ? _a : item.label) != null ? _b : item.name;
-  }
-});
-const formItemComponentName = "plasmic-antd5-form-item";
-function registerFormItem(loader) {
-  registerComponentHelper(loader, FormItemWrapper, __spreadValues({
-    name: formItemComponentName,
-    displayName: "Form Field",
-    parentComponentName: formComponentName,
-    defaultStyles: {
-      marginBottom: "24px",
-      width: "stretch"
-    },
-    props: __spreadValues({
-      label: __spreadValues({
-        type: "slot",
-        defaultValue: {
-          type: "text",
-          value: "Label"
-        },
-        hidden: (ps) => !!ps.noLabel
-      }, { mergeWithParent: true }),
-      children: __spreadValues({
+      submitSlot: __spreadValues({
         type: "slot",
+        hidden: () => true,
         defaultValue: {
           type: "component",
-          name: inputComponentName
-        }
-      }, { mergeWithParent: true })
-    }, commonFormItemProps("advanced-form-item")),
-    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormItemWrapper",
-    treeLabel: (ps) => ps.name,
-    templates: {
-      Text: {
-        props: {
-          children: {
-            type: "component",
-            name: inputComponentName
+          name: buttonComponentName,
+          props: {
+            type: "primary",
+            submitsForm: true,
+            children: {
+              type: "text",
+              value: "Submit"
+            }
           }
         }
+      }, {
+        mergeWithParent: () => true,
+        hiddenMergedProps: (ps) => !ps.mode
+      }),
+      children: {
+        type: "slot",
+        hidden: (props) => props.mode !== "advanced"
       },
-      "Long Text": {
-        props: {
-          children: {
-            type: "component",
-            name: textAreaComponentName
-          }
-        }
+      initialValues: {
+        displayName: "Initial field values",
+        type: "object"
       },
-      "Select dropdown": {
-        props: {
-          children: {
-            type: "component",
-            name: selectComponentName
-          }
-        }
+      layout: {
+        displayName: "Form layout",
+        type: "choice",
+        options: ["horizontal", "vertical", "inline"],
+        defaultValue: "vertical"
       },
-      Number: {
-        props: {
-          children: {
-            type: "component",
-            name: inputNumberComponentName
-          }
-        }
+      labelAlign: {
+        type: "choice",
+        options: ["left", "right"],
+        defaultValueHint: "right",
+        advanced: true,
+        hidden: (ps) => ps.layout !== "horizontal"
       },
-      Checkbox: {
-        props: {
-          children: {
-            type: "component",
-            name: checkboxComponentName
-          },
-          noLabel: true
+      labelCol: colProp(
+        "Label layout",
+        {
+          span: 8,
+          horizontalOnly: true
+        },
+        "Set the width and offset of the labels"
+      ),
+      wrapperCol: colProp(
+        "Control layout",
+        {
+          span: 16,
+          horizontalOnly: true
+        },
+        "Set the width and offset of the form controls"
+      ),
+      colon: {
+        type: "boolean",
+        description: `Show a colon after labels by default (only for horizontal layout)`,
+        defaultValueHint: true,
+        advanced: true,
+        hidden: (props) => {
+          var _a;
+          return ((_a = props.layout) != null ? _a : "horizontal") !== "horizontal";
         }
       },
-      Switch: {
-        props: {
-          children: {
-            type: "component",
-            name: switchComponentName
+      requiredMark: {
+        displayName: "Required/optional indicators",
+        type: "choice",
+        options: [
+          {
+            value: "optional",
+            label: "Indicate optional fields"
           },
-          noLabel: true
-        }
-      },
-      Radios: {
-        props: {
-          children: {
-            type: "component",
-            name: radioGroupComponentName
-          }
-        }
-      },
-      Password: {
-        props: {
-          children: {
-            type: "component",
-            name: passwordComponentName
+          {
+            value: true,
+            label: "Indicate required fields with asterisk"
+          },
+          {
+            value: false,
+            label: "Show no indicators"
           }
-        }
+        ],
+        advanced: true,
+        defaultValueHint: true
       },
-      "Submit button": {
-        props: {
-          children: {
-            type: "component",
-            name: buttonComponentName,
-            props: {
-              type: "primary"
-            }
+      extendedOnValuesChange: {
+        type: "eventHandler",
+        displayName: "On values change",
+        argTypes: [
+          {
+            name: "changedValues",
+            type: "object"
           },
-          noLabel: true
-        }
-      }
-    }
-  }, { trapsSelection: true }));
-}
-function FormGroup(props) {
-  const pathCtx = React.useContext(PathContext);
-  return /* @__PURE__ */ React.createElement(
-    PathContext.Provider,
-    {
-      value: {
-        relativePath: [...pathCtx.relativePath, props.name],
-        fullPath: [...pathCtx.fullPath, props.name]
-      }
-    },
-    props.children
-  );
-}
-const formGroupComponentName = "plasmic-antd5-form-group";
-function registerFormGroup(loader) {
-  registerComponentHelper(loader, FormGroup, {
-    name: formGroupComponentName,
-    displayName: "Form Field Group",
-    parentComponentName: formComponentName,
-    actions: COMMON_ACTIONS,
-    props: {
-      name: {
-        type: "string",
-        displayName: "Form group key",
-        description: "Name of the field key for this group of form fields in the submitted form data."
-      },
-      children: {
-        type: "slot"
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormGroup"
-  });
-}
-const FormListWrapper = React.forwardRef(function FormListWrapper2(props, ref) {
-  var _a;
-  const relativeFormItemName = useFormItemRelativeName(props.name);
-  const fullFormItemName = useFormItemFullName(props.name);
-  const operationsRef = React.useRef(
-    void 0
-  );
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      add(defaultValue, insertIndex) {
-        if (operationsRef.current) {
-          const { add } = operationsRef.current[1];
-          add(defaultValue, insertIndex);
-        }
-      },
-      remove(index) {
-        if (operationsRef.current) {
-          const { remove } = operationsRef.current[1];
-          remove(index);
-        }
-      },
-      move(from, to) {
-        if (operationsRef.current) {
-          const { move } = operationsRef.current[1];
-          move(from, to);
-        }
-      }
-    }),
-    [operationsRef]
-  );
-  const inCanvas = !!usePlasmicCanvasContext();
-  if (inCanvas) {
-    const form = useFormInstanceMaybe();
-    const prevPropValues = React.useRef({
-      initialValue: props.initialValue,
-      name: props.name
-    });
-    const { fireOnValuesChange, forceRemount } = (_a = React.useContext(InternalFormInstanceContext)) != null ? _a : {};
-    React.useEffect(() => {
-      if (prevPropValues.current.name !== props.name) {
-        forceRemount == null ? void 0 : forceRemount();
-      }
-      if (fullFormItemName) {
-        form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
-        prevPropValues.current.initialValue = props.initialValue;
-        fireOnValuesChange == null ? void 0 : fireOnValuesChange();
-      }
-    }, [JSON.stringify(props.initialValue), JSON.stringify(fullFormItemName)]);
-  }
-  return /* @__PURE__ */ React.createElement(FormList, __spreadProps(__spreadValues({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
-    operationsRef.current = args;
-    return args[0].map((field, index) => /* @__PURE__ */ React.createElement(
-      PathContext.Provider,
-      {
-        value: {
-          relativePath: [field.name],
-          fullPath: [...fullFormItemName != null ? fullFormItemName : [], field.name]
-        }
-      },
-      /* @__PURE__ */ React.createElement(DataProvider, { name: "currentField", data: field }, /* @__PURE__ */ React.createElement(DataProvider, { name: "currentFieldIndex", data: index }, repeatedElement(index, props.children)))
-    ));
-  });
-});
-const formListComponentName = "plasmic-antd5-form-list";
-function registerFormList(loader) {
-  registerComponentHelper(loader, FormListWrapper, {
-    name: formListComponentName,
-    parentComponentName: formComponentName,
-    displayName: "Form List",
-    actions: COMMON_ACTIONS,
-    providesData: true,
-    props: {
-      children: {
-        type: "slot",
-        defaultValue: [
           {
-            type: "hbox",
-            children: [
-              {
-                type: "component",
-                name: formItemComponentName,
-                props: {
-                  name: "firstName",
-                  label: {
-                    type: "text",
-                    value: "First name"
-                  },
-                  children: {
-                    type: "component",
-                    name: "plasmic-antd5-input"
-                  }
-                }
-              },
-              {
-                type: "component",
-                name: formItemComponentName,
-                props: {
-                  name: "lastName",
-                  label: {
-                    type: "text",
-                    value: "Last name"
-                  },
-                  children: {
-                    type: "component",
-                    name: "plasmic-antd5-input"
-                  }
-                }
-              }
-            ]
+            name: "allValues",
+            type: "object"
           }
         ]
       },
-      name: {
-        type: "string",
-        defaultValue: "guests"
-      },
-      initialValue: {
-        type: "array",
-        defaultValue: [
+      onFinish: {
+        type: "eventHandler",
+        displayName: "On submit",
+        argTypes: [
           {
-            firstName: "Jane",
-            lastName: "Doe"
-          },
+            name: "values",
+            type: "object"
+          }
+        ]
+      },
+      onFinishFailed: {
+        // function({ values, errorFields, outOfDate })
+        type: "eventHandler",
+        displayName: "On invalid submit",
+        argTypes: [
           {
-            firstName: "John",
-            lastName: "Smith"
+            name: "data",
+            type: "object"
           }
         ]
+      },
+      validateTrigger: {
+        displayName: "Validate when",
+        type: "choice",
+        options: [
+          { value: "onBlur", label: "a field loses focus" },
+          { value: "onChange", label: "a field changes" },
+          { value: "onSubmit", label: "the form is submitted" }
+        ],
+        multiSelect: true,
+        defaultValueHint: ["onChange"],
+        advanced: true
+      }
+    },
+    actions: [
+      ...COMMON_ACTIONS,
+      {
+        type: "form-schema",
+        hidden: (ps) => ps.mode !== "simplified" || !!ps.data
+      }
+    ],
+    states: {
+      value: {
+        type: "readonly",
+        variableType: "object",
+        onChangeProp: "extendedOnValuesChange"
       }
     },
+    componentHelpers: {
+      helpers: formHelpers,
+      importName: "formHelpers",
+      importPath: "@plasmicpkgs/antd5/skinny/Form"
+    },
     refActions: {
-      add: {
-        displayName: "Add an item",
+      setFieldsValue: {
+        displayName: "Set multiple fields",
         argTypes: [
           {
-            name: "defaultValue",
-            displayName: "Default value",
-            type: "object"
-          },
-          {
-            name: "insertIndex",
-            displayName: "Insert index",
-            type: "number"
+            name: "newValues",
+            displayName: "New Values",
+            type: "exprEditor"
           }
         ]
       },
-      remove: {
-        displayName: "Remove an item",
+      setFieldValue: {
+        displayName: "Set field",
         argTypes: [
           {
-            name: "index",
-            displayName: "Index",
-            type: "number"
+            name: "namePath",
+            displayName: "Name Path",
+            type: {
+              type: "dataSelector",
+              data: (_, ctx) => {
+                if (!(ctx == null ? void 0 : ctx.formInstance)) {
+                  return {};
+                }
+                return ctx.formInstance.getFieldsValue(true);
+              }
+            }
+          },
+          {
+            name: "value",
+            displayName: "New Value",
+            type: "exprEditor"
           }
         ]
       },
-      move: {
-        displayName: "Move field",
+      resetFields: {
+        displayName: "Reset fields to initial value",
+        argTypes: []
+      },
+      clearFields: {
+        displayName: "Clear fields",
+        argTypes: []
+      },
+      validateFields: {
+        displayName: "Validate fields",
         argTypes: [
           {
-            name: "from",
-            displayName: "From",
-            type: "number"
+            name: "nameList",
+            displayName: "Name List",
+            type: "object"
           },
           {
-            name: "to",
-            displayName: "To",
-            type: "number"
+            name: "options",
+            displayName: "Options",
+            type: "object"
           }
         ]
       }
     },
-    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormListWrapper"
+    importPath: "@plasmicpkgs/antd5/skinny/SchemaForm",
+    importName: "FormWrapper"
   });
 }
 
-export { FormGroup, FormItemWrapper, FormListWrapper, FormType, FormWrapper, InputType, deriveFormFieldConfigs, formComponentName, formGroupComponentName, formHelpers, formItemComponentName, formListComponentName, formTypeDescription, registerForm, registerFormGroup, registerFormItem, registerFormList, useFormInstanceMaybe };
+export { SchemaForm as FormWrapper, formHelpers, formTypeDescription, registerForm };
 //# sourceMappingURL=registerForm.esm.js.map