@plasmicpkgs/antd5 0.0.56 → 0.0.59

package/dist/index.js

@@ -74,33 +74,33 @@ function usePrevious(value) {
   return prevValue.current;
 }
 
-var __defProp$c = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+  if (source != null && __getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -110,16 +110,17 @@ function AntdButton(props) {
   const target = props.target === true ? "_blank" : props.target === false ? void 0 : props.target;
   return /* @__PURE__ */ React__default.default.createElement(
     antd.Button,
-    __spreadProps$9(__spreadValues$c(__spreadProps$9(__spreadValues$c({}, rest), {
+    __spreadProps$a(__spreadValues$d(__spreadProps$a(__spreadValues$d({}, rest), {
       htmlType: submitsForm ? "submit" : "button"
     }), rest), {
       target
     })
   );
 }
+const buttonComponentName = "plasmic-antd5-button";
 function registerButton(loader) {
   registerComponentHelper(loader, AntdButton, {
-    name: "plasmic-antd5-button",
+    name: buttonComponentName,
     displayName: "Button",
     props: {
       type: {
@@ -180,7 +181,7 @@ function registerButton(loader) {
         hidden: (props) => !props.href,
         defaultValueHint: false
       },
-      children: __spreadValues$c({
+      children: __spreadValues$d({
         type: "slot",
         defaultValue: [
           {
@@ -204,33 +205,33 @@ function registerButton(loader) {
   });
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+  if (source != null && __getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -244,12 +245,15 @@ function AntdCheckbox(props) {
       return void 0;
     }
   }, [onChange]);
-  return /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, __spreadProps$8(__spreadValues$b({}, rest), { onChange: wrappedOnChange }));
+  return /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, __spreadProps$9(__spreadValues$c({}, rest), { onChange: wrappedOnChange }));
 }
+AntdCheckbox.__plasmicFormFieldMeta = { valueProp: "checked" };
 const AntdCheckboxGroup = antd.Checkbox.Group;
+const checkboxComponentName = "plasmic-antd5-checkbox";
+const checkboxGroupComponentName = "plasmic-antd5-checkbox";
 function registerCheckbox(loader) {
   registerComponentHelper(loader, AntdCheckbox, {
-    name: "plasmic-antd5-checkbox",
+    name: checkboxComponentName,
     displayName: "Checkbox",
     props: {
       checked: {
@@ -257,11 +261,12 @@ function registerCheckbox(loader) {
         editOnly: true,
         uncontrolledProp: "defaultChecked",
         description: "Specifies the initial state: whether or not the checkbox is selected",
-        defaultValueHint: false
+        defaultValueHint: false,
+        hidden: (ps) => !!ps.__plasmicFormField
       },
       disabled: {
         type: "boolean",
-        description: "If disable checkbox",
+        description: "If checkbox is disabled",
         defaultValueHint: false
       },
       indeterminate: {
@@ -269,18 +274,13 @@ function registerCheckbox(loader) {
         description: "The indeterminate checked state of checkbox",
         defaultValueHint: false
       },
-      value: {
-        type: "string",
-        description: "The checkbox value",
-        advanced: true
-      },
       autoFocus: {
         type: "boolean",
         description: "If get focus when component mounted",
         defaultValueHint: false,
         advanced: true
       },
-      children: __spreadValues$b({
+      children: __spreadValues$c({
         type: "slot",
         defaultValue: [
           {
@@ -306,7 +306,7 @@ function registerCheckbox(loader) {
     importName: "AntdCheckbox"
   });
   registerComponentHelper(loader, AntdCheckboxGroup, {
-    name: "plasmic-antd5-checkbox-group",
+    name: checkboxGroupComponentName,
     displayName: "Checkbox Group",
     props: {
       value: {
@@ -357,37 +357,37 @@ function registerCheckbox(loader) {
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerCheckbox",
     importName: "AntdCheckboxGroup",
-    parentComponentName: "plasmic-antd5-checkbox"
+    parentComponentName: checkboxComponentName
   });
 }
 
-var __defProp$a = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -438,9 +438,9 @@ function AntdConfigProvider(props) {
   const _a = props, { children, themeStyles } = _a, rest = __objRest$7(_a, ["children", "themeStyles"]);
   return /* @__PURE__ */ React__default.default.createElement(
     antd.ConfigProvider,
-    __spreadValues$a({
+    __spreadValues$b({
       locale: defaultLocale
-    }, themeToAntdConfig(__spreadProps$7(__spreadValues$a({}, rest), {
+    }, themeToAntdConfig(__spreadProps$8(__spreadValues$b({}, rest), {
       fontFamily: themeStyles.fontFamily,
       fontSize: themeStyles.fontSize ? parseInt(themeStyles.fontSize) : void 0,
       lineHeight: themeStyles.lineHeight ? parseInt(themeStyles.lineHeight) : void 0,
@@ -476,7 +476,7 @@ function InnerConfigProvider(props) {
       showNotification: (opts) => {
         var _b;
         const _a = opts, rest = __objRest$7(_a, ["type"]);
-        app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$a({}, rest));
+        app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$b({}, rest));
       },
       hideNotifications: () => {
         app.notification.destroy();
@@ -773,7 +773,7 @@ function registerTokens(loader) {
 }
 const registerConfigProvider = makeRegisterGlobalContext(
   AntdConfigProvider,
-  __spreadProps$7(__spreadValues$a({
+  __spreadProps$8(__spreadValues$b({
     name: "plasmic-antd5-config-provider",
     displayName: "Ant Design System Settings",
     props: {
@@ -875,22 +875,25 @@ const registerConfigProvider = makeRegisterGlobalContext(
   })
 );
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 const AntdMenu = antd.Menu;
 const AntdMenuDivider = antd.Menu.Divider;
 const AntdMenuItem = antd.Menu.Item;
@@ -936,10 +939,23 @@ const MENU_ITEM_TYPE = {
       type: "array",
       displayName: "Menu items",
       hidden: (ps) => ps.type !== "submenu" && ps.type !== "group"
+    },
+    onClick: {
+      type: "eventHandler",
+      displayName: "Action",
+      description: "Action to perform when this item is selected",
+      argTypes: [{ name: "info", type: "object" }],
+      hidden: (ps) => ps.type !== "item"
     }
   }
 };
+const UNKEYED_MENU_ITEM_TYPE = __spreadProps$7(__spreadValues$a({}, MENU_ITEM_TYPE), {
+  fields: Object.fromEntries(
+    Object.entries(MENU_ITEM_TYPE.fields).filter(([k]) => k !== "key")
+  )
+});
 MENU_ITEM_TYPE.fields.children.itemType = MENU_ITEM_TYPE;
+UNKEYED_MENU_ITEM_TYPE.fields.children.itemType = UNKEYED_MENU_ITEM_TYPE;
 function registerMenu(loader) {
   registerComponentHelper(loader, AntdMenu, {
     name: "plasmic-antd5-menu",
@@ -1019,7 +1035,7 @@ function registerMenu(loader) {
         type: "string",
         description: "Set display title for collapsed item"
       },
-      children: __spreadValues$9({
+      children: __spreadValues$a({
         type: "slot",
         defaultValue: [
           {
@@ -1127,21 +1143,21 @@ function registerMenu(loader) {
   });
 }
 
-var __defProp$8 = Object.defineProperty;
+var __defProp$9 = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
@@ -1149,11 +1165,11 @@ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
+  if (source != null && __getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1176,7 +1192,7 @@ function AntdDropdown(props) {
   ]);
   return /* @__PURE__ */ React__default.default.createElement(
     antd.Dropdown,
-    __spreadProps$6(__spreadValues$8({}, rest), {
+    __spreadProps$6(__spreadValues$9({}, rest), {
       trigger: [trigger],
       overlay: () => {
         var _a2;
@@ -1225,7 +1241,7 @@ function registerDropdown(loader) {
         type: "array",
         displayName: "Menu Items",
         hidden: (ps) => ps.useMenuItemsSlot,
-        itemType: MENU_ITEM_TYPE,
+        itemType: UNKEYED_MENU_ITEM_TYPE,
         defaultValue: [
           {
             type: "item",
@@ -1281,7 +1297,7 @@ function registerDropdown(loader) {
         advanced: true,
         description: "Instead of configuring a list of menu items, build the menu items using MenuItem elements. This gives you greater control over item styling."
       },
-      children: __spreadValues$8({
+      children: __spreadValues$9({
         type: "slot",
         defaultValue: [
           {
@@ -1312,19 +1328,19 @@ function registerDropdown(loader) {
   });
 }
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
@@ -1335,7 +1351,7 @@ function mergeProps(props, ...restProps) {
   if (restProps.every((rest) => Object.keys(rest).length === 0)) {
     return props;
   }
-  const result = __spreadValues$7({}, props);
+  const result = __spreadValues$8({}, props);
   for (const rest of restProps) {
     for (const key of Object.keys(rest)) {
       result[key] = mergePropVals(key, result[key], rest[key]);
@@ -1372,7 +1388,7 @@ function mergePropVals(name, val1, val2) {
   } else if (name === "className") {
     return classNames__default.default(val1, val2);
   } else if (name === "style") {
-    return __spreadValues$7(__spreadValues$7({}, val1), val2);
+    return __spreadValues$8(__spreadValues$8({}, val1), val2);
   } else if (name === "ref") {
     return mergeRefs(val1, val2);
   } else if (typeof val1 !== typeof val2) {
@@ -1393,1588 +1409,2009 @@ function mergePropVals(name, val1, val2) {
   }
 }
 
-var __defProp$6 = Object.defineProperty;
+var __defProp$7 = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$5 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
-        target[prop] = source[prop];
+const AntdInput = antd.Input;
+const AntdTextArea = antd.Input.TextArea;
+const AntdPassword = antd.Input.Password;
+const AntdInputNumber = antd.InputNumber;
+const inputHelpers = {
+  states: {
+    value: {
+      onChangeArgsToValue: (e) => {
+        return e.target.value;
+      }
     }
-  return target;
+  }
 };
-const reactNodeToString = function(reactNode) {
-  let string = "";
-  if (typeof reactNode === "string") {
-    string = reactNode;
-  } else if (typeof reactNode === "number") {
-    string = reactNode.toString();
-  } else if (reactNode instanceof Array) {
-    reactNode.forEach(function(child) {
-      string += reactNodeToString(child);
-    });
-  } else if (React.isValidElement(reactNode)) {
-    string += reactNodeToString(reactNode.props.children);
+const COMMON_HELPERS_CONFIG = {
+  helpers: inputHelpers,
+  importName: "inputHelpers",
+  importPath: "@plasmicpkgs/antd5/skinny/registerInput"
+};
+const COMMON_STATES = {
+  value: {
+    type: "writable",
+    valueProp: "value",
+    variableType: "text",
+    onChangeProp: "onChange"
   }
-  return string;
 };
-function ensureArray(x) {
-  return Array.isArray(x) ? x : [x];
-}
-const FormItem = antd.Form.Item;
-const FormList = antd.Form.List;
-const PathContext = React__default.default.createContext({ relativePath: [], fullPath: [] });
-const InternalFormInstanceContext = React__default.default.createContext(void 0);
-const FormLayoutContext = React__default.default.createContext(void 0);
-const Internal = (props) => {
-  var _b, _c, _d;
-  const [form] = antd.Form.useForm();
-  const values = form.getFieldsValue(true);
-  const lastValue = React__default.default.useRef(values);
-  const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$5(_a, ["extendedOnValuesChange", "setRemountKey"]);
-  const childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
-  const fireOnValuesChange = React__default.default.useCallback(() => {
-    const values2 = form.getFieldsValue(true);
-    if (!equal__default.default(values2, lastValue.current)) {
-      extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
-      lastValue.current = values2;
-    }
-  }, [form, lastValue]);
-  React__default.default.useEffect(() => {
-    fireOnValuesChange();
-  }, []);
-  const formLayout = React__default.default.useMemo(
-    () => {
-      var _a2;
-      return {
-        layout: props.layout,
-        labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
-      };
-    },
-    [props.layout, (_b = props.labelCol) == null ? void 0 : _b.span]
-  );
-  return /* @__PURE__ */ React__default.default.createElement(
-    InternalFormInstanceContext.Provider,
-    {
+const COMMON_DECORATOR_PROPS = {
+  prefix: {
+    type: "slot",
+    hidePlaceholder: true
+  },
+  suffix: {
+    type: "slot",
+    hidePlaceholder: true
+  },
+  addonAfter: {
+    type: "slot",
+    hidePlaceholder: true
+  },
+  addonBefore: {
+    type: "slot",
+    hidePlaceholder: true
+  }
+};
+const COMMON_ADVANCED_PROPS = {
+  maxLength: {
+    type: "number",
+    advanced: true
+  },
+  bordered: {
+    type: "boolean",
+    advanced: true,
+    defaultValueHint: true
+  },
+  allowClear: {
+    type: "boolean",
+    advanced: true
+  },
+  autoFocus: {
+    type: "boolean",
+    advanced: true
+  },
+  readOnly: {
+    type: "boolean",
+    advanced: true
+  }
+};
+const COMMON_EVENT_HANDLERS = {
+  onChange: {
+    type: "eventHandler",
+    argTypes: [
+      {
+        name: "event",
+        type: "object"
+      }
+    ]
+  },
+  onPressEnter: {
+    type: "eventHandler",
+    argTypes: [
+      {
+        name: "event",
+        type: "object"
+      }
+    ]
+  }
+};
+const inputComponentName = "plasmic-antd5-input";
+function registerInput(loader) {
+  registerComponentHelper(loader, AntdInput, __spreadProps$5(__spreadValues$7({
+    name: inputComponentName,
+    displayName: "Input",
+    props: __spreadValues$7(__spreadValues$7(__spreadValues$7({
       value: {
-        layout: formLayout,
-        fireOnValuesChange,
-        forceRemount: () => setRemountKey((k) => k + 1)
+        type: "string",
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      placeholder: {
+        type: "string"
+      },
+      size: {
+        type: "choice",
+        options: ["large", "middle", "small"]
+      },
+      disabled: {
+        type: "boolean"
+      },
+      type: {
+        type: "choice",
+        options: [
+          "text",
+          "password",
+          "number",
+          "date",
+          "datetime-local",
+          "time",
+          "email",
+          "tel",
+          "hidden"
+        ],
+        defaultValueHint: "text"
       }
-    },
-    /* @__PURE__ */ React__default.default.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React__default.default.createElement(
-      antd.Form,
-      __spreadProps$5(__spreadValues$6({}, 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(args[1]);
-        },
-        form,
-        labelCol: ((_c = props.labelCol) == null ? void 0 : _c.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-        wrapperCol: ((_d = props.wrapperCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
-      }),
-      /* @__PURE__ */ React__default.default.createElement("style", null, `
-          .ant-form-item-explain + div, .ant-form-item-margin-offset {
-            display: none;
+    }, COMMON_ADVANCED_PROPS), COMMON_DECORATOR_PROPS), COMMON_EVENT_HANDLERS),
+    states: __spreadValues$7({}, COMMON_STATES)
+  }, { trapsSelection: true }), {
+    componentHelpers: COMMON_HELPERS_CONFIG,
+    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
+    importName: "AntdInput"
+  }));
+}
+const textAreaComponentName = "plasmic-antd5-textarea";
+function registerTextArea(loader) {
+  registerComponentHelper(loader, AntdTextArea, {
+    name: textAreaComponentName,
+    parentComponentName: inputComponentName,
+    displayName: "Text Area",
+    props: __spreadValues$7({
+      value: {
+        type: "string",
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      placeholder: {
+        type: "string"
+      },
+      disabled: {
+        type: "boolean"
+      },
+      maxLength: {
+        type: "number",
+        advanced: true
+      },
+      bordered: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: true
+      }
+    }, COMMON_EVENT_HANDLERS),
+    states: __spreadValues$7({}, COMMON_STATES),
+    componentHelpers: COMMON_HELPERS_CONFIG,
+    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
+    importName: "AntdTextArea"
+  });
+}
+const passwordComponentName = "plasmic-antd5-input-password";
+function registerPasswordInput(loader) {
+  registerComponentHelper(loader, AntdPassword, {
+    name: passwordComponentName,
+    parentComponentName: inputComponentName,
+    displayName: "Password Input",
+    props: __spreadValues$7({
+      value: {
+        type: "string",
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      placeholder: {
+        type: "string"
+      },
+      disabled: {
+        type: "boolean"
+      },
+      maxLength: {
+        type: "number",
+        advanced: true
+      },
+      bordered: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: true
+      }
+    }, COMMON_EVENT_HANDLERS),
+    states: __spreadValues$7({}, COMMON_STATES),
+    componentHelpers: COMMON_HELPERS_CONFIG,
+    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
+    importName: "AntdPassword"
+  });
+}
+const inputNumberComponentName = "plasmic-antd5-input-number";
+function registerNumberInput(loader) {
+  registerComponentHelper(loader, AntdInputNumber, __spreadProps$5(__spreadValues$7({
+    name: inputNumberComponentName,
+    parentComponentName: inputComponentName,
+    displayName: "Number Input",
+    props: __spreadProps$5(__spreadValues$7(__spreadValues$7(__spreadValues$7({
+      value: {
+        type: "number",
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      placeholder: {
+        type: "string"
+      },
+      disabled: {
+        type: "boolean"
+      },
+      max: {
+        type: "number"
+      },
+      min: {
+        type: "number"
+      },
+      step: {
+        type: "number",
+        helpText: "Increment or decrement step"
+      },
+      controls: {
+        type: "boolean",
+        displayName: "Show add/minus controls?",
+        advanced: true
+      }
+    }, COMMON_DECORATOR_PROPS), COMMON_ADVANCED_PROPS), COMMON_EVENT_HANDLERS), {
+      // onChange directly called with the number
+      onChange: {
+        type: "eventHandler",
+        argTypes: [
+          {
+            name: "value",
+            type: "number"
           }
-          `),
-      childrenNode
-    ))
-  );
-};
-function FormWrapper(props) {
-  const [remountKey, setRemountKey] = React__default.default.useState(0);
-  const previousInitialValues = usePrevious(props.initialValues);
-  React__default.default.useEffect(() => {
-    if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
-      setRemountKey((k) => k + 1);
-    }
-  }, [previousInitialValues, props.initialValues]);
-  return /* @__PURE__ */ React__default.default.createElement(Internal, __spreadProps$5(__spreadValues$6({ key: remountKey }, props), { setRemountKey }));
+        ]
+      }
+    }),
+    states: __spreadValues$7({}, COMMON_STATES)
+  }, { trapsSelection: true }), {
+    // don't need component helpers
+    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
+    importName: "AntdInputNumber"
+  }));
 }
-const COMMON_ACTIONS = [
-  {
-    type: "button-action",
-    label: "Append new Form Item",
-    onClick: ({ studioOps }) => {
-      studioOps.appendToSlot(
-        {
-          type: "component",
-          name: "plasmic-antd5-form-item"
-        },
-        "children"
-      );
+
+var __defProp$6 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
-  }
-  // {
-  //   type: "button-action" as const,
-  //   label: "Append new Form Group",
-  //   onClick: ({ studioOps }: ActionProps<any>) => {
-  //     studioOps.appendToSlot(
-  //       {
-  //         type: "component",
-  //         name: "plasmic-antd5-form-group",
-  //       },
-  //       "children"
-  //     );
-  //   },
-  // },
-  // {
-  //   type: "button-action" as const,
-  //   label: "Append new Form List",
-  //   onClick: ({ studioOps }: ActionProps<any>) => {
-  //     studioOps.appendToSlot(
-  //       {
-  //         type: "component",
-  //         name: "plasmic-antd5-form-list",
-  //       },
-  //       "children"
-  //     );
-  //   },
-  // },
-];
-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 to horizontal layout"
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __objRest$5 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+        target[prop] = source[prop];
     }
-  },
-  description,
-  defaultValue
-});
-function registerForm(loader) {
-  registerComponentHelper(loader, FormWrapper, {
-    name: "plasmic-antd5-form",
-    displayName: "Form",
-    defaultStyles: {
-      layout: "vbox",
-      alignItems: "flex-start"
-    },
+  return target;
+};
+const RadioGroup = antd.Radio.Group;
+const AntdRadio = antd.Radio;
+const AntdRadioButton = antd.Radio.Button;
+function AntdRadioGroup(props) {
+  const _a = props, { onChange, useChildren } = _a, rest = __objRest$5(_a, ["onChange", "useChildren"]);
+  const wrappedOnChange = React__default.default.useMemo(() => {
+    if (onChange) {
+      return (event) => onChange(event.target.value);
+    } else {
+      return void 0;
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    RadioGroup,
+    __spreadProps$4(__spreadValues$6({}, rest), {
+      onChange: wrappedOnChange,
+      options: useChildren ? void 0 : rest.options
+    })
+  );
+}
+const radioComponentName = "plasmic-antd5-radio";
+const radioButtonComponentName = "plasmic-antd5-radio-button";
+const radioGroupComponentName = "plasmic-antd5-radio-group";
+function registerRadio(loader) {
+  registerComponentHelper(loader, AntdRadio, {
+    name: radioComponentName,
+    displayName: "Radio",
     props: {
-      children: {
+      value: {
+        type: "string",
+        description: "The radio option value"
+      },
+      disabled: {
+        type: "boolean",
+        defaultValueHint: false
+      },
+      autoFocus: {
+        type: "boolean",
+        description: "If focused when first shown",
+        defaultValueHint: false,
+        advanced: true
+      },
+      children: __spreadValues$6({
         type: "slot",
         defaultValue: [
           {
-            type: "component",
-            name: "plasmic-antd5-form-item",
-            props: {
-              label: {
-                type: "text",
-                value: "Name"
-              },
-              name: "name",
-              children: {
-                type: "component",
-                name: "plasmic-antd5-input"
-              }
-            }
-          },
-          {
-            type: "component",
-            name: "plasmic-antd5-form-item",
-            props: {
-              label: {
-                type: "text",
-                value: "Message"
-              },
-              name: "message",
-              children: {
-                type: "component",
-                name: "plasmic-antd5-textarea"
-              }
-            }
-          },
-          {
-            type: "component",
-            name: "plasmic-antd5-form-item",
-            props: {
-              noLabel: true,
-              children: {
-                type: "component",
-                name: "plasmic-antd5-button",
-                props: {
-                  children: {
-                    type: "text",
-                    value: "Submit"
-                  },
-                  type: "primary",
-                  submitsForm: true
-                }
-              }
-            }
+            type: "text",
+            value: "Radio"
           }
         ]
+      }, { mergeWithParent: true })
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
+    importName: "AntdRadio",
+    parentComponentName: radioGroupComponentName
+  });
+  registerComponentHelper(loader, AntdRadioButton, {
+    name: radioButtonComponentName,
+    displayName: "Radio Button",
+    props: {
+      value: {
+        type: "string",
+        description: "The radio option value"
       },
-      initialValues: {
-        type: "object"
-      },
-      layout: {
-        type: "choice",
-        options: ["horizontal", "vertical", "inline"],
-        defaultValue: "vertical"
-      },
-      labelAlign: {
-        type: "choice",
-        options: ["left", "right"],
-        defaultValueHint: "right",
-        advanced: true,
-        hidden: (ps) => ps.layout !== "horizontal"
+      disabled: {
+        type: "boolean",
+        defaultValueHint: false
       },
-      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: {
+      autoFocus: {
         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";
-        }
+        description: "If focused when first shown",
+        defaultValueHint: false,
+        advanced: true
       },
-      requiredMark: {
-        displayName: "Required/optional mark",
-        type: "choice",
-        options: [
+      children: __spreadValues$6({
+        type: "slot",
+        defaultValue: [
           {
-            value: "optional",
-            label: "Indicate optional fields"
-          },
+            type: "text",
+            value: "Radio"
+          }
+        ]
+      }, { mergeWithParent: true })
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
+    importName: "AntdRadioButton",
+    parentComponentName: radioGroupComponentName
+  });
+  registerComponentHelper(loader, AntdRadioGroup, __spreadValues$6({
+    name: radioGroupComponentName,
+    displayName: "Radio Group",
+    props: {
+      options: {
+        type: "array",
+        hidden: (ps) => !!ps.useChildren,
+        itemType: {
+          type: "object",
+          nameFunc: (item) => item.label || item.value,
+          fields: {
+            value: "string",
+            label: "string"
+          }
+        },
+        defaultValue: [
           {
-            value: true,
-            label: "Indicate required fields with asterisk"
+            value: "option1",
+            label: "Option 1"
           },
           {
-            value: false,
-            label: "Show no indicators"
+            value: "option2",
+            label: "Option 2"
           }
+        ]
+      },
+      optionType: {
+        type: "choice",
+        options: [
+          { value: "default", label: "Radio" },
+          { value: "button", label: "Button" }
         ],
+        hidden: (ps) => !!ps.useChildren,
+        defaultValueHint: "default"
+      },
+      value: {
+        type: "choice",
+        editOnly: true,
+        uncontrolledProp: "defaultValue",
+        description: "Default selected value",
+        options: (ps) => {
+          var _a;
+          if (ps.useChildren) {
+            const options = /* @__PURE__ */ new Set();
+            traverseReactEltTree(ps.children, (elt) => {
+              var _a2;
+              if (typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
+                options.add(elt.props.value);
+              }
+            });
+            return Array.from(options.keys());
+          } else {
+            return (_a = ps.options) != null ? _a : [];
+          }
+        },
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      disabled: {
+        type: "boolean",
+        description: "Disables all radios",
+        defaultValueHint: false
+      },
+      useChildren: {
+        displayName: "Use slot",
+        type: "boolean",
+        defaultValueHint: false,
         advanced: true,
-        defaultValueHint: true
+        description: "Instead of configuring a list of options, customize the contents of the RadioGroup by dragging and dropping Radio in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Radio and RadioButton."
       },
-      extendedOnValuesChange: {
-        type: "eventHandler",
-        displayName: "On values change",
-        argTypes: [
+      children: {
+        type: "slot",
+        allowedComponents: [
+          "plasmic-antd5-radio",
+          "plasmic-antd5-radio-button"
+        ],
+        defaultValue: [
           {
-            name: "changedValues",
-            type: "object"
+            type: "component",
+            name: "plasmic-antd5-radio",
+            props: {
+              value: "op1",
+              children: {
+                type: "text",
+                value: "Option 1"
+              }
+            }
           },
           {
-            name: "allValues",
-            type: "object"
-          }
-        ]
-      },
-      onFinish: {
-        type: "eventHandler",
-        displayName: "On submit",
-        argTypes: [
-          {
-            name: "values",
-            type: "object"
+            type: "component",
+            name: "plasmic-antd5-radio",
+            props: {
+              value: "op2",
+              children: {
+                type: "text",
+                value: "Option 2"
+              }
+            }
           }
         ]
       },
-      onFinishFailed: {
-        // function({ values, errorFields, outOfDate })
+      onChange: {
         type: "eventHandler",
-        displayName: "On invalid submit",
-        argTypes: [
-          {
-            name: "data",
-            type: "object"
-          }
-        ]
-      },
-      validateTrigger: {
-        type: "choice",
-        options: ["onSubmit", "onChange", "onBlur"],
-        multiSelect: true,
-        defaultValueHint: ["onChange"],
-        advanced: true
+        argTypes: [{ name: "value", type: "string" }]
       }
     },
-    actions: COMMON_ACTIONS,
     states: {
       value: {
-        type: "readonly",
-        variableType: "object",
-        onChangeProp: "extendedOnValuesChange"
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
       }
     },
-    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
-        });
+    importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
+    importName: "AntdRadioGroup",
+    defaultStyles: {
+      layout: "hbox"
     }
-  }
-  return rules;
+  }, {
+    trapsSelection: true
+  }));
 }
-const useFormItemRelativeName = (name) => {
-  const pathCtx = React__default.default.useContext(PathContext);
-  return typeof name === "object" ? [...pathCtx.relativePath, ...name] : typeof name === "string" ? [...pathCtx.relativePath, name] : void 0;
+
+var __defProp$5 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
 };
-const useFormItemFullName = (name) => {
-  const pathCtx = React__default.default.useContext(PathContext);
-  return typeof name === "object" ? [...pathCtx.fullPath, ...name] : typeof name === "string" ? [...pathCtx.fullPath, name] : void 0;
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$4 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
 };
-function useFormInstanceMaybe() {
-  return antd.Form.useFormInstance();
-}
-function FormItemWrapper(props) {
-  var _b;
+const AntdOption = antd.Select.Option;
+const AntdOptionGroup = antd.Select.OptGroup;
+function AntdSelect(props) {
   const _a = props, {
-    rules: plasmicRules,
-    description,
-    noLabel,
-    name,
-    hideValidationMessage,
-    customizeProps,
-    setControlContextData,
-    alignLabellessWithControls = true
-  } = _a, rest = __objRest$5(_a, [
-    "rules",
-    "description",
-    "noLabel",
-    "name",
-    "hideValidationMessage",
-    "customizeProps",
-    "setControlContextData",
-    "alignLabellessWithControls"
+    popupClassName,
+    popupScopeClassName,
+    defaultStylesClassName,
+    suffixIcon,
+    mode,
+    useChildren
+  } = _a, rest = __objRest$4(_a, [
+    "popupClassName",
+    "popupScopeClassName",
+    "defaultStylesClassName",
+    "suffixIcon",
+    "mode",
+    "useChildren"
   ]);
-  const relativeFormItemName = useFormItemRelativeName(name);
-  const fullFormItemName = useFormItemFullName(name);
-  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__default.default.useContext(FormLayoutContext);
-  const inCanvas = !!host.usePlasmicCanvasContext();
-  if (inCanvas) {
-    const form = useFormInstanceMaybe();
-    const prevPropValues = React__default.default.useRef({
-      initialValue: props.initialValue,
-      name: props.name
-    });
-    const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
-    const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
-    (_b = props.setControlContextData) == null ? void 0 : _b.call(props, {
-      internalFormCtx
-    });
-    React__default.default.useEffect(() => {
-      if (prevPropValues.current.name !== props.name) {
-        forceRemount == null ? void 0 : forceRemount();
-      }
-      if (!fullFormItemName || (form == null ? void 0 : form.getFieldValue(fullFormItemName)) !== prevPropValues.current.initialValue) {
-        return;
-      }
-      form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
-      prevPropValues.current.initialValue = props.initialValue;
-      fireOnValuesChange == null ? void 0 : fireOnValuesChange();
-    }, [form, props.initialValue, fullFormItemName]);
+  const curated = __spreadValues$5({}, rest);
+  if (useChildren) {
+    curated.options = void 0;
   }
   return /* @__PURE__ */ React__default.default.createElement(
-    FormItem,
-    __spreadProps$5(__spreadValues$6({}, rest), {
-      label: noLabel ? void 0 : props.label,
-      name: relativeFormItemName,
-      rules,
-      extra: description,
-      help: hideValidationMessage ? "" : props.help,
-      colon: noLabel ? false : void 0,
-      wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
-    }),
-    props.customizeProps ? /* @__PURE__ */ React__default.default.createElement(FormItemForwarder, { formItemProps: props }) : props.children
+    antd.Select,
+    __spreadValues$5(__spreadProps$3(__spreadValues$5({}, curated), {
+      mode: !mode || mode === "single" ? void 0 : mode,
+      popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`
+    }), suffixIcon && { suffixIcon })
   );
 }
-function FormItemForwarder(_a) {
-  var _b = _a, { formItemProps } = _b, props = __objRest$5(_b, ["formItemProps"]);
-  var _a2;
-  const status = antd.Form.Item.useStatus();
-  const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
-  const data = {
-    status: status.status
-  };
-  (_a2 = props.setControlContextData) == null ? void 0 : _a2.call(props, {
-    internalFormCtx,
-    status
-  });
-  return React__default.default.Children.map(formItemProps.children, (child, i) => {
-    var _a3;
-    const baseProps = __spreadValues$6(__spreadValues$6({}, (_a3 = child.props) != null ? _a3 : {}), props);
-    return i === 0 && React.isValidElement(child) ? React.cloneElement(
-      child,
-      mergeProps(baseProps, formItemProps.customizeProps(data, baseProps))
-    ) : child;
-  });
-}
-function registerFormItem(loader) {
-  registerComponentHelper(loader, FormItemWrapper, __spreadValues$6({
-    name: "plasmic-antd5-form-item",
-    displayName: "Form Item",
-    parentComponentName: "plasmic-antd5-form",
-    defaultStyles: {
-      marginBottom: "24px",
-      width: "stretch"
-    },
+const selectComponentName = "plasmic-antd5-select";
+const optionComponentName = "plasmic-antd5-option";
+const optionGroupComponentName = "plasmic-antd5-option-group";
+function registerSelect(loader) {
+  registerComponentHelper(loader, AntdSelect, __spreadProps$3(__spreadValues$5({
+    name: selectComponentName,
+    displayName: "Select",
     props: {
-      label: __spreadValues$6({
-        type: "slot",
-        defaultValue: {
-          type: "text",
-          value: "Label"
+      options: {
+        type: "array",
+        hidden: (ps) => !!ps.useChildren,
+        itemType: {
+          type: "object",
+          nameFunc: (item) => item.label || item.value,
+          fields: {
+            type: {
+              type: "choice",
+              options: [
+                { value: "option", label: "Option" },
+                { value: "option-group", label: "Option Group" }
+              ],
+              defaultValue: "option"
+            },
+            value: {
+              type: "string",
+              hidden: (ps) => ps.type !== "option"
+            },
+            label: "string",
+            options: {
+              type: "array",
+              hidden: (ps) => {
+                return ps.type !== "option-group";
+              },
+              itemType: {
+                type: "object",
+                nameFunc: (item) => item.label || item.value,
+                fields: {
+                  value: "string",
+                  label: "string"
+                }
+              }
+            }
+          }
         },
-        hidden: (ps) => !!ps.noLabel
-      }, { mergeWithParent: true }),
-      children: __spreadValues$6({
-        type: "slot",
-        defaultValue: {
-          type: "component",
-          name: "plasmic-antd5-input"
-        }
-      }, { mergeWithParent: true }),
-      name: {
-        type: "string"
+        defaultValue: [
+          {
+            value: "option1",
+            label: "Option 1"
+          },
+          {
+            value: "option2",
+            label: "Option 2"
+          }
+        ]
       },
-      initialValue: {
-        type: "string"
+      useChildren: {
+        displayName: "Use slot",
+        type: "boolean",
+        defaultValueHint: false,
+        advanced: true,
+        description: "Instead of configuring a list of options, customize the contents of the Select by dragging and dropping options in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Options, and also use Option Groups."
       },
-      rules: {
-        type: "formValidationRules"
+      children: {
+        type: "slot",
+        allowedComponents: [
+          optionComponentName,
+          optionGroupComponentName
+        ],
+        hidden: (ps) => !ps.useChildren
       },
-      valuePropName: {
-        type: "string",
-        advanced: true,
-        defaultValueHint: "value",
-        description: "The prop name for specifying the value of the form control component"
+      placeholder: {
+        type: "slot",
+        defaultValue: "Select..."
       },
-      noLabel: {
-        type: "boolean",
-        advanced: true
+      suffixIcon: {
+        type: "slot",
+        hidePlaceholder: true
       },
-      alignLabellessWithControls: {
+      open: {
         type: "boolean",
-        displayName: "Align with controls?",
-        description: "Aligns the content with form controls in the grid",
-        hidden: (ps, ctx) => {
+        editOnly: true,
+        uncontrolledProp: "defaultOpen"
+      },
+      value: {
+        type: "choice",
+        displayName: "Selected value",
+        editOnly: true,
+        uncontrolledProp: "defaultValue",
+        description: "Initial selected option",
+        multiSelect: (ps) => ps.mode === "multiple",
+        options: (ps) => {
           var _a;
-          return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+          const options = /* @__PURE__ */ new Set();
+          if (!ps.useChildren) {
+            const rec = (op) => {
+              var _a2;
+              if (typeof op === "string") {
+                return [{ value: op, label: op }];
+              } else if ("options" in op) {
+                return ((_a2 = op.options) != null ? _a2 : []).flatMap((sub) => rec(sub));
+              } else {
+                return [{ value: op.value, label: op.label || op.value }];
+              }
+            };
+            return ((_a = ps.options) != null ? _a : []).flatMap((o) => rec(o));
+          } else {
+            traverseReactEltTree(ps.children, (elt) => {
+              var _a2;
+              if ((elt == null ? void 0 : elt.type) === antd.Select.Option && typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
+                options.add(elt.props.value);
+              }
+            });
+          }
+          return Array.from(options.keys());
         },
-        defaultValueHint: true
+        hidden: (ps) => !!ps.__plasmicFormField
       },
-      colon: {
-        type: "boolean",
-        defaultValueHint: true,
-        advanced: true,
-        hidden: () => true
+      mode: {
+        type: "choice",
+        options: ["single", "multiple"],
+        defaultValueHint: "single"
       },
-      labelAlign: {
+      size: {
         type: "choice",
-        options: ["left", "right"],
-        advanced: true,
-        hidden: (ps, ctx) => {
-          var _a;
-          return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
-        }
+        options: ["small", "middle", "large"]
+      },
+      disabled: {
+        type: "boolean",
+        defaultValueHint: false
       },
-      hidden: {
+      showSearch: {
         type: "boolean",
+        defaultValueHint: false,
         advanced: true
       },
-      validateTrigger: {
+      status: {
         type: "choice",
-        options: ["onSubmit", "onChange", "onBlur"],
-        multiSelect: true,
+        options: ["error", "warning"],
         advanced: true
       },
-      shouldUpdate: {
+      bordered: {
         type: "boolean",
-        advanced: true,
-        displayName: "Always re-render",
-        description: "Form items normally only re-render when the corresponding form value changes, for performance. This forces it to always re-render."
-      },
-      dependencies: {
-        type: "array",
-        advanced: true,
-        displayName: "Dependencies",
-        description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
+        defaultValueHint: true
       },
-      hideValidationMessage: {
+      autoFocus: {
         type: "boolean",
-        displayName: "Hide validation message?",
-        description: "If true, will hide the validation error message",
+        displayName: "Focus automatically",
         defaultValueHint: false,
         advanced: true
       },
-      description: {
-        type: "slot",
-        hidePlaceholder: true
+      onChange: {
+        type: "eventHandler",
+        argTypes: [
+          { name: "value", type: "string" },
+          { name: "option", type: "object" }
+        ]
+      },
+      dropdownMatchSelectWidth: {
+        type: "boolean",
+        displayName: "Should dropdown match trigger button width?",
+        defaultValueHint: true,
+        advanced: true
+      },
+      triggerClassName: {
+        type: "class",
+        displayName: "Trigger styles",
+        noSelf: true,
+        selectors: [
+          {
+            selector: ":component .ant-select-selector.ant-select-selector",
+            label: "Base"
+          },
+          {
+            selector: ":component .ant-select-selector:hover",
+            label: "Hovered"
+          }
+        ],
+        advanced: true
+      },
+      popupScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "popup"
       },
-      customizeProps: {
-        type: "function",
-        description: "Customize the props passed into the wrapped field component. Takes the current status ('success', 'warning', 'error', or 'validating').)",
-        argNames: ["fieldData"],
-        argValues: (_ps, ctx) => {
-          var _a;
-          return [
-            {
-              status: (_a = ctx == null ? void 0 : ctx.status) == null ? void 0 : _a.status
-            }
-          ];
-        },
+      popupClassName: {
+        type: "class",
+        displayName: "Popup styles",
+        selectors: [],
         advanced: true
       },
-      noStyle: {
-        type: "boolean",
-        displayName: "Field control only",
-        description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
-        advanced: true
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormItemWrapper",
-    templates: {
-      Text: {
-        props: {
-          children: {
-            type: "component",
-            name: "plasmic-antd5-input"
+      optionClassName: {
+        type: "class",
+        displayName: "Option styles",
+        noSelf: true,
+        selectors: [
+          {
+            selector: ":popup.ant-select-dropdown .ant-select-item-option",
+            label: "Base"
+          },
+          {
+            selector: ":popup.ant-select-dropdown .ant-select-item-option-active",
+            label: "Focused"
+          },
+          {
+            selector: ":popup.ant-select-dropdown .ant-select-item-option-selected",
+            label: "Selected"
           }
-        }
+        ],
+        advanced: true
       },
-      "Long Text": {
-        props: {
-          children: {
-            type: "component",
-            name: "plasmic-antd5-textarea"
+      placeholderClassName: {
+        type: "class",
+        displayName: "Placeholder styles",
+        selectors: [
+          {
+            selector: ":component .ant-select-selector .ant-select-selection-placeholder",
+            label: "Base"
           }
-        }
+        ],
+        advanced: true
       },
-      "Select dropdown": {
-        props: {
-          children: {
+      defaultStylesClassName: {
+        type: "themeResetClass"
+      }
+    },
+    states: {
+      value: {
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
+      }
+    }
+  }, { trapsSelection: true }), {
+    importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
+    importName: "AntdSelect"
+  }));
+  registerComponentHelper(loader, AntdOption, {
+    name: optionComponentName,
+    displayName: "Option",
+    parentComponentName: selectComponentName,
+    props: {
+      children: __spreadValues$5({
+        type: "slot",
+        defaultValue: "Option"
+      }, { mergeWithParent: true }),
+      value: {
+        type: "string"
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
+    importName: "AntdOption"
+  });
+  registerComponentHelper(loader, AntdOptionGroup, {
+    name: optionGroupComponentName,
+    displayName: "Option Group",
+    parentComponentName: selectComponentName,
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: [
+          {
             type: "component",
-            name: "plasmic-antd5-select"
-          }
-        }
-      },
-      Number: {
-        props: {
-          children: {
+            name: "plasmic-antd5-option",
+            props: {
+              value: "option1",
+              children: {
+                type: "text",
+                value: "Option 1"
+              }
+            }
+          },
+          {
             type: "component",
-            name: "plasmic-antd5-input-number"
+            name: "plasmic-antd5-option",
+            props: {
+              value: "option2",
+              children: {
+                type: "text",
+                value: "Option 1"
+              }
+            }
           }
-        }
+        ]
       },
-      Checkbox: {
-        props: {
-          children: {
-            type: "component",
-            name: "plasmic-antd5-checkbox"
-          },
-          valuePropName: "checked",
-          noLabel: true
-        }
+      label: {
+        type: "slot",
+        defaultValue: "Group label"
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
+    importName: "AntdOptionGroup"
+  });
+}
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+function AntdSwitch(props) {
+  return /* @__PURE__ */ React__default.default.createElement(antd.Switch, __spreadValues$4({}, props));
+}
+AntdSwitch.__plasmicFormFieldMeta = { valueProp: "checked" };
+const switchComponentName = "plasmic-antd5-switch";
+function registerSwitch(loader) {
+  registerComponentHelper(loader, AntdSwitch, {
+    name: switchComponentName,
+    displayName: "Switch",
+    props: {
+      checked: {
+        type: "boolean",
+        editOnly: true,
+        uncontrolledProp: "defaultChecked",
+        description: "Whether the switch is toggled on",
+        defaultValueHint: false,
+        hidden: (ps) => !!ps.__plasmicFormField
       },
-      Radios: {
-        props: {
-          children: {
-            type: "component",
-            name: "plasmic-antd5-radio-group"
-          }
-        }
+      disabled: {
+        type: "boolean",
+        description: "If switch is disabled",
+        defaultValueHint: false
       },
-      Password: {
-        props: {
-          children: {
-            type: "component",
-            name: "plasmic-antd5-input-password"
-          }
-        }
+      autoFocus: {
+        type: "boolean",
+        description: "If get focus when component mounted",
+        defaultValueHint: false,
+        advanced: true
       },
-      "Submit button": {
-        props: {
-          children: {
-            type: "component",
-            name: "plasmic-antd5-button",
-            props: {
-              type: "primary"
-            }
-          },
-          noLabel: true
+      onChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "checked", type: "boolean" }]
+      }
+    },
+    states: {
+      checked: {
+        type: "writable",
+        valueProp: "checked",
+        onChangeProp: "onChange",
+        variableType: "boolean"
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerSwitch",
+    importName: "AntdSwitch"
+  });
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const reactNodeToString = function(reactNode) {
+  let string = "";
+  if (typeof reactNode === "string") {
+    string = reactNode;
+  } else if (typeof reactNode === "number") {
+    string = reactNode.toString();
+  } else if (reactNode instanceof Array) {
+    reactNode.forEach(function(child) {
+      string += reactNodeToString(child);
+    });
+  } else if (React.isValidElement(reactNode)) {
+    string += reactNodeToString(reactNode.props.children);
+  }
+  return string;
+};
+function ensureArray(x) {
+  return Array.isArray(x) ? x : [x];
+}
+const FormItem = antd.Form.Item;
+const FormList = antd.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";
+  return InputType2;
+})(InputType || {});
+const PathContext = React__default.default.createContext({ relativePath: [], fullPath: [] });
+const InternalFormInstanceContext = React__default.default.createContext(void 0);
+const FormLayoutContext = React__default.default.createContext(void 0);
+const Internal = (props) => {
+  var _b, _c, _d, _e;
+  const [form] = antd.Form.useForm();
+  const values = form.getFieldsValue(true);
+  const lastValue = React__default.default.useRef(values);
+  const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$3(_a, ["extendedOnValuesChange", "setRemountKey"]);
+  let childrenNode;
+  if (props.mode !== "simplified") {
+    childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
+  } else {
+    childrenNode = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, ((_b = props.formItems) != null ? _b : []).map((formItem) => /* @__PURE__ */ React__default.default.createElement(
+      FormItemWrapper,
+      __spreadProps$2(__spreadValues$3({}, formItem), {
+        noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
+        style: { width: "100%" }
+      }),
+      formItem.inputType === "Text" /* Text */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input, null) : formItem.inputType === "Password" /* Password */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.Password, null) : formItem.inputType === "Text Area" /* TextArea */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.TextArea, null) : formItem.inputType === "Number" /* Number */ ? /* @__PURE__ */ React__default.default.createElement(antd.InputNumber, null) : formItem.inputType === "Checkbox" /* Checkbox */ ? /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, null, formItem.label) : formItem.inputType === "Select" /* Select */ ? /* @__PURE__ */ React__default.default.createElement(antd.Select, { options: formItem.options }) : formItem.inputType === "Radio" /* Radio */ ? /* @__PURE__ */ React__default.default.createElement(
+        antd.Radio.Group,
+        {
+          options: formItem.options,
+          optionType: formItem.optionType
         }
-      }
+      ) : null
+    )), props.submitSlot);
+  }
+  const fireOnValuesChange = React__default.default.useCallback(() => {
+    const values2 = form.getFieldsValue(true);
+    if (!equal__default.default(values2, lastValue.current)) {
+      extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
+      lastValue.current = values2;
     }
-  }, { trapsSelection: true }));
-}
-function FormGroup(props) {
-  const pathCtx = React__default.default.useContext(PathContext);
+  }, [form, lastValue]);
+  React__default.default.useEffect(() => {
+    fireOnValuesChange();
+  }, []);
+  const formLayout = React__default.default.useMemo(
+    () => {
+      var _a2;
+      return {
+        layout: props.layout,
+        labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
+      };
+    },
+    [props.layout, (_c = props.labelCol) == null ? void 0 : _c.span]
+  );
   return /* @__PURE__ */ React__default.default.createElement(
-    PathContext.Provider,
+    InternalFormInstanceContext.Provider,
     {
       value: {
-        relativePath: [...pathCtx.relativePath, props.name],
-        fullPath: [...pathCtx.fullPath, props.name]
+        layout: formLayout,
+        fireOnValuesChange,
+        forceRemount: () => setRemountKey((k) => k + 1)
       }
     },
-    props.children
+    /* @__PURE__ */ React__default.default.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React__default.default.createElement(
+      antd.Form,
+      __spreadProps$2(__spreadValues$3({}, 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(args[1]);
+        },
+        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__default.default.createElement("style", null, `
+          .ant-form-item-explain + div, .ant-form-item-margin-offset {
+            display: none;
+          }
+          `),
+      childrenNode
+    ))
   );
+};
+function FormWrapper(props) {
+  const [remountKey, setRemountKey] = React__default.default.useState(0);
+  const previousInitialValues = usePrevious(props.initialValues);
+  React__default.default.useEffect(() => {
+    if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
+      setRemountKey((k) => k + 1);
+    }
+  }, [previousInitialValues, props.initialValues]);
+  return /* @__PURE__ */ React__default.default.createElement(Internal, __spreadProps$2(__spreadValues$3({ key: remountKey }, props), { setRemountKey }));
 }
-function registerFormGroup(loader) {
-  registerComponentHelper(loader, FormGroup, {
-    name: "plasmic-antd5-form-group",
-    displayName: "Form Group",
-    parentComponentName: "plasmic-antd5-form",
-    actions: COMMON_ACTIONS,
-    props: {
-      name: {
-        type: "string"
-      },
-      children: {
-        type: "slot"
-      }
+const COMMON_ACTIONS = [
+  {
+    type: "button-action",
+    label: "Append new Form Field",
+    onClick: ({ studioOps }) => {
+      studioOps.appendToSlot(
+        {
+          type: "component",
+          name: "plasmic-antd5-form-item"
+        },
+        "children"
+      );
     },
-    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormGroup"
-  });
-}
-const FormListWrapper = React__default.default.forwardRef(function FormListWrapper2(props, ref) {
-  var _a;
-  const relativeFormItemName = useFormItemRelativeName(props.name);
-  const fullFormItemName = useFormItemFullName(props.name);
-  const operationsRef = React__default.default.useRef(
-    void 0
-  );
-  React__default.default.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 = !!host.usePlasmicCanvasContext();
-  if (inCanvas) {
-    const form = useFormInstanceMaybe();
-    const prevPropValues = React__default.default.useRef({
-      initialValue: props.initialValue,
-      name: props.name
-    });
-    const { fireOnValuesChange, forceRemount } = (_a = React__default.default.useContext(InternalFormInstanceContext)) != null ? _a : {};
-    React__default.default.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();
-      }
-    }, [props.initialValue, fullFormItemName]);
+    hidden: (props) => props.mode !== "advanced"
   }
-  return /* @__PURE__ */ React__default.default.createElement(FormList, __spreadProps$5(__spreadValues$6({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
-    operationsRef.current = args;
-    return args[0].map((field, index) => /* @__PURE__ */ React__default.default.createElement(
-      PathContext.Provider,
-      {
-        value: {
-          relativePath: [field.name],
-          fullPath: [...fullFormItemName != null ? fullFormItemName : [], field.name]
-        }
-      },
-      /* @__PURE__ */ React__default.default.createElement(host.DataProvider, { name: "currentField", data: field }, /* @__PURE__ */ React__default.default.createElement(host.DataProvider, { name: "currentFieldIndex", data: index }, host.repeatedElement(index, props.children)))
-    ));
-  });
+  // {
+  //   type: "button-action" as const,
+  //   label: "Append new Form Field Group",
+  //   onClick: ({ studioOps }: ActionProps<any>) => {
+  //     studioOps.appendToSlot(
+  //       {
+  //         type: "component",
+  //         name: "plasmic-antd5-form-group",
+  //       },
+  //       "children"
+  //     );
+  //   },
+  // },
+  // {
+  //   type: "button-action" as const,
+  //   label: "Append new Form List",
+  //   onClick: ({ studioOps }: ActionProps<any>) => {
+  //     studioOps.appendToSlot(
+  //       {
+  //         type: "component",
+  //         name: "plasmic-antd5-form-list",
+  //       },
+  //       "children"
+  //     );
+  //   },
+  // },
+];
+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 to horizontal layout"
+    }
+  },
+  description,
+  defaultValue
 });
-function registerFormList(loader) {
-  registerComponentHelper(loader, FormListWrapper, {
-    name: "plasmic-antd5-form-list",
-    parentComponentName: "plasmic-antd5-form",
-    displayName: "Form List",
-    actions: COMMON_ACTIONS,
+const formComponentName = "plasmic-antd5-form";
+function registerForm(loader) {
+  registerComponentHelper(loader, FormWrapper, {
+    name: formComponentName,
+    displayName: "Form",
+    defaultStyles: {
+      layout: "vbox",
+      alignItems: "flex-start"
+    },
     props: {
-      children: {
-        type: "slot",
-        defaultValue: [
-          {
-            type: "hbox",
-            children: [
-              {
-                type: "component",
-                name: "plasmic-antd5-form-item",
-                props: {
-                  name: "firstName",
-                  label: {
-                    type: "text",
-                    value: "First name"
-                  },
-                  children: {
-                    type: "component",
-                    name: "plasmic-antd5-input"
-                  }
-                }
-              },
-              {
-                type: "component",
-                name: "plasmic-antd5-form-item",
-                props: {
-                  name: "lastName",
-                  label: {
-                    type: "text",
-                    value: "Last name"
+      mode: "controlMode",
+      formItems: {
+        type: "array",
+        itemType: {
+          type: "object",
+          fields: __spreadValues$3({
+            label: "string",
+            inputType: {
+              type: "choice",
+              options: Object.values(InputType),
+              defaultValue: "Text" /* Text */
+            },
+            options: {
+              type: "array",
+              itemType: {
+                type: "object",
+                fields: {
+                  type: {
+                    type: "choice",
+                    options: [
+                      { value: "option", label: "Option" },
+                      { value: "option-group", label: "Option Group" }
+                    ],
+                    defaultValue: "option"
                   },
-                  children: {
-                    type: "component",
-                    name: "plasmic-antd5-input"
+                  label: "string",
+                  value: {
+                    type: "string",
+                    hidden: (ps) => ps.type !== "option-group"
+                  },
+                  options: {
+                    type: "array",
+                    itemType: {
+                      type: "object",
+                      nameFunc: (item) => item.label || item.value,
+                      fields: {
+                        value: "string",
+                        label: "string"
+                      }
+                    }
                   }
-                }
-              }
-            ]
-          }
-        ]
-      },
-      name: {
-        type: "string",
-        defaultValue: "guests"
+                },
+                nameFunc: (item) => item == null ? void 0 : item.label
+              },
+              hidden: (ps) => !["Select" /* Select */, "Radio" /* Radio */].includes(ps.inputType)
+            },
+            optionType: {
+              type: "choice",
+              options: [
+                { value: "default", label: "Radio" },
+                { value: "button", label: "Button" }
+              ],
+              hidden: (ps) => "Radio" /* Radio */ !== ps.inputType,
+              defaultValueHint: "Radio",
+              displayName: "Option Type"
+            }
+          }, commonFormItemProps),
+          nameFunc: (item) => item.label
+        },
+        hidden: (props) => props.mode === "advanced"
       },
-      initialValue: {
-        type: "array",
-        defaultValue: [
-          {
-            firstName: "Jane",
-            lastName: "Doe"
-          },
-          {
-            firstName: "John",
-            lastName: "Smith"
+      submitSlot: __spreadValues$3({
+        type: "slot",
+        hidden: () => true,
+        defaultValue: {
+          type: "component",
+          name: buttonComponentName,
+          props: {
+            type: "primary",
+            submitsForm: true,
+            children: {
+              type: "text",
+              value: "Submit"
+            }
           }
-        ]
-      }
-    },
-    refActions: {
-      add: {
-        displayName: "Add an item",
-        argTypes: [
+        }
+      }, {
+        mergeWithParent: () => true,
+        hiddenMergedProps: (ps) => !ps.mode
+      }),
+      children: {
+        type: "slot",
+        defaultValue: [
           {
-            name: "defaultValue",
-            displayName: "Default value",
-            type: "object"
+            type: "component",
+            name: formItemComponentName,
+            props: {
+              label: {
+                type: "text",
+                value: "Name"
+              },
+              name: "name",
+              children: {
+                type: "component",
+                name: inputComponentName
+              }
+            }
           },
           {
-            name: "insertIndex",
-            displayName: "Insert index",
-            type: "number"
-          }
-        ]
-      },
-      remove: {
-        displayName: "Remove an item",
-        argTypes: [
-          {
-            name: "index",
-            displayName: "Index",
-            type: "number"
-          }
-        ]
-      },
-      move: {
-        displayName: "Move field",
-        argTypes: [
-          {
-            name: "from",
-            displayName: "From",
-            type: "number"
+            type: "component",
+            name: formItemComponentName,
+            props: {
+              label: {
+                type: "text",
+                value: "Message"
+              },
+              name: "message",
+              children: {
+                type: "component",
+                name: textAreaComponentName
+              }
+            }
           },
           {
-            name: "to",
-            displayName: "To",
-            type: "number"
+            type: "component",
+            name: buttonComponentName,
+            props: {
+              children: {
+                type: "text",
+                value: "Submit"
+              },
+              type: "primary",
+              submitsForm: true
+            }
           }
-        ]
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
-    importName: "FormListWrapper"
-  });
-}
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const AntdInput = antd.Input;
-const AntdTextArea = antd.Input.TextArea;
-const AntdPassword = antd.Input.Password;
-const AntdInputNumber = antd.InputNumber;
-const inputHelpers = {
-  states: {
-    value: {
-      onChangeArgsToValue: (e) => {
-        return e.target.value;
-      }
-    }
-  }
-};
-const COMMON_HELPERS_CONFIG = {
-  helpers: inputHelpers,
-  importName: "inputHelpers",
-  importPath: "@plasmicpkgs/antd5/skinny/registerInput"
-};
-const COMMON_STATES = {
-  value: {
-    type: "writable",
-    valueProp: "value",
-    variableType: "text",
-    onChangeProp: "onChange"
-  }
-};
-const COMMON_DECORATOR_PROPS = {
-  prefix: {
-    type: "slot",
-    hidePlaceholder: true
-  },
-  suffix: {
-    type: "slot",
-    hidePlaceholder: true
-  },
-  addonAfter: {
-    type: "slot",
-    hidePlaceholder: true
-  },
-  addonBefore: {
-    type: "slot",
-    hidePlaceholder: true
-  }
-};
-const COMMON_ADVANCED_PROPS = {
-  maxLength: {
-    type: "number",
-    advanced: true
-  },
-  bordered: {
-    type: "boolean",
-    advanced: true,
-    defaultValueHint: true
-  },
-  allowClear: {
-    type: "boolean",
-    advanced: true
-  },
-  autoFocus: {
-    type: "boolean",
-    advanced: true
-  },
-  readOnly: {
-    type: "boolean",
-    advanced: true
-  }
-};
-const COMMON_EVENT_HANDLERS = {
-  onChange: {
-    type: "eventHandler",
-    argTypes: [
-      {
-        name: "event",
-        type: "object"
-      }
-    ]
-  },
-  onPressEnter: {
-    type: "eventHandler",
-    argTypes: [
-      {
-        name: "event",
-        type: "object"
-      }
-    ]
-  }
-};
-function registerInput(loader) {
-  registerComponentHelper(loader, AntdInput, __spreadProps$4(__spreadValues$5({
-    name: "plasmic-antd5-input",
-    displayName: "Input",
-    props: __spreadValues$5(__spreadValues$5(__spreadValues$5({
-      value: {
-        type: "string"
-      },
-      placeholder: {
-        type: "string"
-      },
-      size: {
-        type: "choice",
-        options: ["large", "middle", "small"]
-      },
-      disabled: {
-        type: "boolean"
-      },
-      type: {
-        type: "choice",
-        options: [
-          "text",
-          "password",
-          "number",
-          "date",
-          "datetime-local",
-          "time",
-          "email",
-          "tel",
-          "hidden"
         ],
-        defaultValueHint: "text"
-      }
-    }, COMMON_ADVANCED_PROPS), COMMON_DECORATOR_PROPS), COMMON_EVENT_HANDLERS),
-    states: __spreadValues$5({}, COMMON_STATES)
-  }, { trapsSelection: true }), {
-    componentHelpers: COMMON_HELPERS_CONFIG,
-    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
-    importName: "AntdInput"
-  }));
-}
-function registerTextArea(loader) {
-  registerComponentHelper(loader, AntdTextArea, {
-    name: "plasmic-antd5-textarea",
-    parentComponentName: "plasmic-antd5-input",
-    displayName: "Text Area",
-    props: __spreadValues$5({
-      value: {
-        type: "string"
+        hidden: (props) => props.mode !== "advanced"
       },
-      placeholder: {
-        type: "string"
+      initialValues: {
+        type: "object"
       },
-      disabled: {
-        type: "boolean"
+      layout: {
+        type: "choice",
+        options: ["horizontal", "vertical", "inline"],
+        defaultValue: "vertical"
       },
-      maxLength: {
-        type: "number",
-        advanced: true
+      labelAlign: {
+        type: "choice",
+        options: ["left", "right"],
+        defaultValueHint: "right",
+        advanced: true,
+        hidden: (ps) => ps.layout !== "horizontal"
       },
-      bordered: {
+      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,
-        defaultValueHint: true
-      }
-    }, COMMON_EVENT_HANDLERS),
-    states: __spreadValues$5({}, COMMON_STATES),
-    componentHelpers: COMMON_HELPERS_CONFIG,
-    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
-    importName: "AntdTextArea"
-  });
-}
-function registerPasswordInput(loader) {
-  registerComponentHelper(loader, AntdPassword, {
-    name: "plasmic-antd5-input-password",
-    parentComponentName: "plasmic-antd5-input",
-    displayName: "Password Input",
-    props: __spreadValues$5({
-      value: {
-        type: "string"
-      },
-      placeholder: {
-        type: "string"
-      },
-      disabled: {
-        type: "boolean"
-      },
-      maxLength: {
-        type: "number",
-        advanced: true
+        hidden: (props) => {
+          var _a;
+          return ((_a = props.layout) != null ? _a : "horizontal") !== "horizontal";
+        }
       },
-      bordered: {
-        type: "boolean",
+      requiredMark: {
+        displayName: "Required/optional mark",
+        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
-      }
-    }, COMMON_EVENT_HANDLERS),
-    states: __spreadValues$5({}, COMMON_STATES),
-    componentHelpers: COMMON_HELPERS_CONFIG,
-    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
-    importName: "AntdPassword"
-  });
-}
-function registerNumberInput(loader) {
-  registerComponentHelper(loader, AntdInputNumber, __spreadProps$4(__spreadValues$5({
-    name: "plasmic-antd5-input-number",
-    parentComponentName: "plasmic-antd5-input",
-    displayName: "Number Input",
-    props: __spreadProps$4(__spreadValues$5(__spreadValues$5(__spreadValues$5({
-      value: {
-        type: "number"
       },
-      placeholder: {
-        type: "string"
-      },
-      disabled: {
-        type: "boolean"
-      },
-      max: {
-        type: "number"
+      extendedOnValuesChange: {
+        type: "eventHandler",
+        displayName: "On values change",
+        argTypes: [
+          {
+            name: "changedValues",
+            type: "object"
+          },
+          {
+            name: "allValues",
+            type: "object"
+          }
+        ]
       },
-      min: {
-        type: "number"
+      onFinish: {
+        type: "eventHandler",
+        displayName: "On submit",
+        argTypes: [
+          {
+            name: "values",
+            type: "object"
+          }
+        ]
       },
-      step: {
-        type: "number",
-        helpText: "Increment or decrement step"
+      onFinishFailed: {
+        // function({ values, errorFields, outOfDate })
+        type: "eventHandler",
+        displayName: "On invalid submit",
+        argTypes: [
+          {
+            name: "data",
+            type: "object"
+          }
+        ]
       },
-      controls: {
-        type: "boolean",
-        displayName: "Show add/minus controls?",
+      validateTrigger: {
+        type: "choice",
+        options: ["onSubmit", "onChange", "onBlur"],
+        multiSelect: true,
+        defaultValueHint: ["onChange"],
         advanced: true
       }
-    }, COMMON_DECORATOR_PROPS), COMMON_ADVANCED_PROPS), COMMON_EVENT_HANDLERS), {
-      // onChange directly called with the number
-      onChange: {
-        type: "eventHandler",
-        argTypes: [
-          {
-            name: "value",
-            type: "number"
-          }
-        ]
+    },
+    actions: COMMON_ACTIONS,
+    states: {
+      value: {
+        type: "readonly",
+        variableType: "object",
+        onChangeProp: "extendedOnValuesChange"
+      }
+    },
+    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__default.default.useContext(PathContext);
+  return typeof name === "object" ? [...pathCtx.relativePath, ...name] : typeof name === "string" ? [...pathCtx.relativePath, name] : void 0;
+};
+const useFormItemFullName = (name) => {
+  const pathCtx = React__default.default.useContext(PathContext);
+  return typeof name === "object" ? [...pathCtx.fullPath, ...name] : typeof name === "string" ? [...pathCtx.fullPath, name] : void 0;
+};
+function useFormInstanceMaybe() {
+  return antd.Form.useFormInstance();
+}
+function FormItemWrapper(props) {
+  var _b;
+  const _a = props, {
+    rules: plasmicRules,
+    description,
+    noLabel,
+    name,
+    hideValidationMessage,
+    customizeProps,
+    setControlContextData,
+    alignLabellessWithControls = true
+  } = _a, rest = __objRest$3(_a, [
+    "rules",
+    "description",
+    "noLabel",
+    "name",
+    "hideValidationMessage",
+    "customizeProps",
+    "setControlContextData",
+    "alignLabellessWithControls"
+  ]);
+  const relativeFormItemName = useFormItemRelativeName(name);
+  const fullFormItemName = useFormItemFullName(name);
+  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__default.default.useContext(FormLayoutContext);
+  const inCanvas = !!host.usePlasmicCanvasContext();
+  if (inCanvas) {
+    const form = useFormInstanceMaybe();
+    const prevPropValues = React__default.default.useRef({
+      initialValue: props.initialValue,
+      name: props.name
+    });
+    const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
+    const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
+    (_b = props.setControlContextData) == null ? void 0 : _b.call(props, {
+      internalFormCtx
+    });
+    React__default.default.useEffect(() => {
+      if (prevPropValues.current.name !== props.name) {
+        forceRemount == null ? void 0 : forceRemount();
+      }
+      if (!fullFormItemName || (form == null ? void 0 : form.getFieldValue(fullFormItemName)) !== prevPropValues.current.initialValue) {
+        return;
       }
+      form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
+      prevPropValues.current.initialValue = props.initialValue;
+      fireOnValuesChange == null ? void 0 : fireOnValuesChange();
+    }, [form, props.initialValue, fullFormItemName]);
+  }
+  return /* @__PURE__ */ React__default.default.createElement(
+    FormItem,
+    __spreadProps$2(__spreadValues$3({}, rest), {
+      label: noLabel ? void 0 : props.label,
+      name: relativeFormItemName,
+      rules,
+      extra: description,
+      help: hideValidationMessage ? "" : props.help,
+      colon: noLabel ? false : void 0,
+      valuePropName: deriveValuePropName(props),
+      wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
     }),
-    states: __spreadValues$5({}, COMMON_STATES)
-  }, { trapsSelection: true }), {
-    // don't need component helpers
-    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
-    importName: "AntdInputNumber"
-  }));
+    /* @__PURE__ */ React__default.default.createElement(FormItemForwarder, { formItemProps: props })
+  );
 }
-
-var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$4 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function AntdModal(props) {
-  const _a = props, { onOpenChange, onOk, onCancel, open, footer } = _a, rest = __objRest$4(_a, ["onOpenChange", "onOk", "onCancel", "open", "footer"]);
-  const memoOnOk = React__default.default.useMemo(() => {
-    if (onOpenChange || onOk) {
-      return (e) => {
-        onOpenChange == null ? void 0 : onOpenChange(false);
-        onOk == null ? void 0 : onOk(e);
-      };
-    } else {
-      return void 0;
+function deriveValuePropName(props) {
+  if (props.valuePropName) {
+    return props.valuePropName;
+  }
+  const valueProps = React__default.default.Children.map(props.children, (child) => {
+    var _a;
+    if (React__default.default.isValidElement(child)) {
+      const childType = child.type;
+      if (childType) {
+        const x = (_a = childType.__plasmicFormFieldMeta) == null ? void 0 : _a.valueProp;
+        if (x) {
+          return x;
+        }
+        const plumeType = childType.__plumeType;
+        if (plumeType && (plumeType === "checkbox" || plumeType === "switch")) {
+          return "isChecked";
+        }
+      }
     }
-  }, [onOpenChange, onOk]);
-  const memoOnCancel = React__default.default.useMemo(() => {
-    if (onOpenChange || onCancel) {
-      return (e) => {
-        onOpenChange == null ? void 0 : onOpenChange(false);
-        onCancel == null ? void 0 : onCancel(e);
-      };
-    } else {
-      return void 0;
+    return void 0;
+  }).filter((x) => !!x);
+  if (valueProps.length > 0) {
+    return valueProps[0];
+  }
+  return void 0;
+}
+function FormItemForwarder(_a) {
+  var _b = _a, { formItemProps } = _b, props = __objRest$3(_b, ["formItemProps"]);
+  var _a2;
+  const status = antd.Form.Item.useStatus();
+  const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
+  const data = {
+    status: status.status
+  };
+  (_a2 = props.setControlContextData) == null ? void 0 : _a2.call(props, {
+    internalFormCtx,
+    status
+  });
+  return React__default.default.Children.map(formItemProps.children, (child, i) => {
+    var _a3;
+    let newProps = __spreadProps$2(__spreadValues$3(__spreadValues$3({}, (_a3 = child.props) != null ? _a3 : {}), props), {
+      __plasmicFormField: true
+    });
+    if (formItemProps.customizeProps) {
+      newProps = mergeProps(
+        newProps,
+        formItemProps.customizeProps(data, newProps)
+      );
     }
-  }, [onOpenChange, onCancel]);
-  return /* @__PURE__ */ React__default.default.createElement(
-    antd.Modal,
-    __spreadProps$3(__spreadValues$4({}, rest), {
-      onOk: memoOnOk,
-      onCancel: memoOnCancel,
-      open,
-      footer: footer != null ? footer : void 0
-    })
-  );
+    return i === 0 && React.isValidElement(child) ? React.cloneElement(child, newProps) : child;
+  });
 }
-function registerModal(loader) {
-  registerComponentHelper(loader, AntdModal, {
-    name: "plasmic-antd5-modal",
-    displayName: "Modal",
-    props: {
-      open: {
-        type: "boolean"
-      },
-      children: {
-        type: "slot",
-        defaultValue: {
-          type: "vbox",
-          children: ["Modal content"]
+const commonFormItemProps = {
+  name: {
+    type: "string"
+  },
+  initialValue: {
+    type: "string"
+  },
+  rules: {
+    type: "formValidationRules"
+  },
+  valuePropName: {
+    type: "string",
+    advanced: true,
+    defaultValueHint: "value",
+    description: "The prop name for specifying the value of the form control component"
+  },
+  noLabel: {
+    type: "boolean",
+    advanced: true
+  },
+  alignLabellessWithControls: {
+    type: "boolean",
+    displayName: "Align with controls?",
+    description: "Aligns the content with form controls in the grid",
+    hidden: (ps, ctx) => {
+      var _a;
+      return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+    },
+    defaultValueHint: true
+  },
+  colon: {
+    type: "boolean",
+    defaultValueHint: true,
+    advanced: true,
+    hidden: () => true
+  },
+  labelAlign: {
+    type: "choice",
+    options: ["left", "right"],
+    advanced: true,
+    hidden: (ps, ctx) => {
+      var _a;
+      return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+    }
+  },
+  hidden: {
+    type: "boolean",
+    advanced: true
+  },
+  validateTrigger: {
+    type: "choice",
+    options: ["onSubmit", "onChange", "onBlur"],
+    multiSelect: true,
+    advanced: true
+  },
+  shouldUpdate: {
+    type: "boolean",
+    advanced: true,
+    displayName: "Always re-render",
+    description: "Form items normally only re-render when the corresponding form value changes, for performance. This forces it to always re-render."
+  },
+  dependencies: {
+    type: "array",
+    advanced: true,
+    displayName: "Dependencies",
+    description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
+  },
+  hideValidationMessage: {
+    type: "boolean",
+    displayName: "Hide validation message?",
+    description: "If true, will hide the validation error message",
+    defaultValueHint: false,
+    advanced: true
+  },
+  customizeProps: {
+    type: "function",
+    description: "Customize the props passed into the wrapped field component. Takes the current status ('success', 'warning', 'error', or 'validating').)",
+    argNames: ["fieldData"],
+    argValues: (_ps, ctx) => {
+      var _a;
+      return [
+        {
+          status: (_a = ctx == null ? void 0 : ctx.status) == null ? void 0 : _a.status
         }
-      },
-      title: {
-        type: "slot",
-        defaultValue: "Modal title"
-      },
-      footer: {
+      ];
+    },
+    advanced: true
+  },
+  noStyle: {
+    type: "boolean",
+    displayName: "Field control only",
+    description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
+    advanced: true
+  }
+};
+const formItemComponentName = "plasmic-antd5-form-item";
+function registerFormItem(loader) {
+  registerComponentHelper(loader, FormItemWrapper, __spreadValues$3({
+    name: formItemComponentName,
+    displayName: "Form Field",
+    parentComponentName: formComponentName,
+    defaultStyles: {
+      marginBottom: "24px",
+      width: "stretch"
+    },
+    props: __spreadValues$3({
+      label: __spreadValues$3({
         type: "slot",
-        hidePlaceholder: true
-      },
-      closeIcon: {
+        defaultValue: {
+          type: "text",
+          value: "Label"
+        },
+        hidden: (ps) => !!ps.noLabel
+      }, { mergeWithParent: true }),
+      children: __spreadValues$3({
         type: "slot",
-        hidePlaceholder: true
-      },
-      onOk: {
-        type: "eventHandler",
-        argTypes: []
+        defaultValue: {
+          type: "component",
+          name: inputComponentName
+        }
+      }, { mergeWithParent: true })
+    }, commonFormItemProps),
+    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
+    importName: "FormItemWrapper",
+    templates: {
+      Text: {
+        props: {
+          children: {
+            type: "component",
+            name: inputComponentName
+          }
+        }
       },
-      onCancel: {
-        type: "eventHandler",
-        argTypes: []
+      "Long Text": {
+        props: {
+          children: {
+            type: "component",
+            name: textAreaComponentName
+          }
+        }
       },
-      okText: {
-        type: "string",
-        hidden: (ps) => !!ps.footer,
-        advanced: true
+      "Select dropdown": {
+        props: {
+          children: {
+            type: "component",
+            name: selectComponentName
+          }
+        }
       },
-      cancelText: {
-        type: "string",
-        hidden: (ps) => !!ps.footer,
-        advanced: true
+      Number: {
+        props: {
+          children: {
+            type: "component",
+            name: inputNumberComponentName
+          }
+        }
       },
-      onOpenChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "open", type: "boolean" }]
+      Checkbox: {
+        props: {
+          children: {
+            type: "component",
+            name: checkboxComponentName
+          },
+          noLabel: true
+        }
       },
-      modalScopeClassName: {
-        type: "styleScopeClass",
-        scopeName: "modal"
+      Switch: {
+        props: {
+          children: {
+            type: "component",
+            name: switchComponentName
+          },
+          noLabel: true
+        }
       },
-      modalClassName: {
-        type: "class",
-        displayName: "Modal content styles",
-        noSelf: true,
-        selectors: [
-          {
-            selector: ":modal .ant-modal .ant-modal-content",
-            label: "Base"
+      Radios: {
+        props: {
+          children: {
+            type: "component",
+            name: radioGroupComponentName
           }
-        ],
-        advanced: true
+        }
       },
-      closeButtonClassName: {
-        type: "class",
-        displayName: "Close button styles",
-        noSelf: true,
-        selectors: [
-          {
-            selector: ":modal .ant-modal .ant-modal-close",
-            label: "Base"
+      Password: {
+        props: {
+          children: {
+            type: "component",
+            name: passwordComponentName
           }
-        ],
-        advanced: true
+        }
       },
-      defaultStylesClassName: {
-        type: "themeResetClass"
+      "Submit button": {
+        props: {
+          children: {
+            type: "component",
+            name: buttonComponentName,
+            props: {
+              type: "primary"
+            }
+          },
+          noLabel: true
+        }
+      }
+    }
+  }, { trapsSelection: true }));
+}
+function FormGroup(props) {
+  const pathCtx = React__default.default.useContext(PathContext);
+  return /* @__PURE__ */ React__default.default.createElement(
+    PathContext.Provider,
+    {
+      value: {
+        relativePath: [...pathCtx.relativePath, props.name],
+        fullPath: [...pathCtx.fullPath, props.name]
       }
     },
-    states: {
-      open: {
-        type: "writable",
-        valueProp: "open",
-        onChangeProp: "onOpenChange",
-        variableType: "boolean"
+    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"
+      },
+      children: {
+        type: "slot"
       }
     },
-    importPath: "@plasmicpkgs/antd5/skinny/registerModal",
-    importName: "AntdModal"
+    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
+    importName: "FormGroup"
   });
 }
-
-var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$3 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const RadioGroup = antd.Radio.Group;
-const AntdRadio = antd.Radio;
-antd.Radio.Button;
-function AntdRadioGroup(props) {
-  const _a = props, { onChange, useChildren } = _a, rest = __objRest$3(_a, ["onChange", "useChildren"]);
-  const wrappedOnChange = React__default.default.useMemo(() => {
-    if (onChange) {
-      return (event) => onChange(event.target.value);
-    } else {
-      return void 0;
-    }
-  }, [onChange]);
-  return /* @__PURE__ */ React__default.default.createElement(
-    RadioGroup,
-    __spreadProps$2(__spreadValues$3({}, rest), {
-      onChange: wrappedOnChange,
-      options: useChildren ? void 0 : rest.options
-    })
+const FormListWrapper = React__default.default.forwardRef(function FormListWrapper2(props, ref) {
+  var _a;
+  const relativeFormItemName = useFormItemRelativeName(props.name);
+  const fullFormItemName = useFormItemFullName(props.name);
+  const operationsRef = React__default.default.useRef(
+    void 0
   );
-}
-function registerRadio(loader) {
-  registerComponentHelper(loader, AntdRadio, {
-    name: "plasmic-antd5-radio",
-    displayName: "Radio",
-    props: {
-      value: {
-        type: "string",
-        description: "The radio option value"
+  React__default.default.useImperativeHandle(
+    ref,
+    () => ({
+      add(defaultValue, insertIndex) {
+        if (operationsRef.current) {
+          const { add } = operationsRef.current[1];
+          add(defaultValue, insertIndex);
+        }
       },
-      disabled: {
-        type: "boolean",
-        defaultValueHint: false
+      remove(index) {
+        if (operationsRef.current) {
+          const { remove } = operationsRef.current[1];
+          remove(index);
+        }
       },
-      autoFocus: {
-        type: "boolean",
-        description: "If focused when first shown",
-        defaultValueHint: false,
-        advanced: true
+      move(from, to) {
+        if (operationsRef.current) {
+          const { move } = operationsRef.current[1];
+          move(from, to);
+        }
+      }
+    }),
+    [operationsRef]
+  );
+  const inCanvas = !!host.usePlasmicCanvasContext();
+  if (inCanvas) {
+    const form = useFormInstanceMaybe();
+    const prevPropValues = React__default.default.useRef({
+      initialValue: props.initialValue,
+      name: props.name
+    });
+    const { fireOnValuesChange, forceRemount } = (_a = React__default.default.useContext(InternalFormInstanceContext)) != null ? _a : {};
+    React__default.default.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();
+      }
+    }, [props.initialValue, fullFormItemName]);
+  }
+  return /* @__PURE__ */ React__default.default.createElement(FormList, __spreadProps$2(__spreadValues$3({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
+    operationsRef.current = args;
+    return args[0].map((field, index) => /* @__PURE__ */ React__default.default.createElement(
+      PathContext.Provider,
+      {
+        value: {
+          relativePath: [field.name],
+          fullPath: [...fullFormItemName != null ? fullFormItemName : [], field.name]
+        }
       },
-      children: __spreadValues$3({
+      /* @__PURE__ */ React__default.default.createElement(host.DataProvider, { name: "currentField", data: field }, /* @__PURE__ */ React__default.default.createElement(host.DataProvider, { name: "currentFieldIndex", data: index }, host.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,
+    props: {
+      children: {
         type: "slot",
         defaultValue: [
           {
-            type: "text",
-            value: "Radio"
-          }
-        ]
-      }, { mergeWithParent: true })
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
-    importName: "AntdRadio",
-    parentComponentName: "plasmic-antd5-radio-group"
-  });
-  registerComponentHelper(loader, AntdRadio, {
-    name: "plasmic-antd5-radio-button",
-    displayName: "Radio Button",
-    props: {
-      value: {
-        type: "string",
-        description: "The radio option value"
-      },
-      disabled: {
-        type: "boolean",
-        defaultValueHint: false
+            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"
+                  }
+                }
+              }
+            ]
+          }
+        ]
       },
-      autoFocus: {
-        type: "boolean",
-        description: "If focused when first shown",
-        defaultValueHint: false,
-        advanced: true
+      name: {
+        type: "string",
+        defaultValue: "guests"
       },
-      children: __spreadValues$3({
-        type: "slot",
+      initialValue: {
+        type: "array",
         defaultValue: [
           {
-            type: "text",
-            value: "Radio"
+            firstName: "Jane",
+            lastName: "Doe"
+          },
+          {
+            firstName: "John",
+            lastName: "Smith"
           }
         ]
-      }, { mergeWithParent: true })
+      }
     },
-    importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
-    importName: "AntdRadioButton",
-    parentComponentName: "plasmic-antd5-radio-group"
-  });
-  registerComponentHelper(loader, AntdRadioGroup, __spreadValues$3({
-    name: "plasmic-antd5-radio-group",
-    displayName: "Radio Group",
-    props: {
-      options: {
-        type: "array",
-        hidden: (ps) => !!ps.useChildren,
-        itemType: {
-          type: "object",
-          nameFunc: (item) => item.label || item.value,
-          fields: {
-            value: "string",
-            label: "string"
-          }
-        },
-        defaultValue: [
+    refActions: {
+      add: {
+        displayName: "Add an item",
+        argTypes: [
           {
-            value: "option1",
-            label: "Option 1"
+            name: "defaultValue",
+            displayName: "Default value",
+            type: "object"
           },
           {
-            value: "option2",
-            label: "Option 2"
+            name: "insertIndex",
+            displayName: "Insert index",
+            type: "number"
           }
         ]
       },
-      optionType: {
-        type: "choice",
-        options: [
-          { value: "default", label: "Radio" },
-          { value: "button", label: "Button" }
-        ],
-        hidden: (ps) => !!ps.useChildren,
-        defaultValueHint: "default"
-      },
-      value: {
-        type: "choice",
-        editOnly: true,
-        uncontrolledProp: "defaultValue",
-        description: "Default selected value",
-        options: (ps) => {
-          var _a;
-          if (ps.useChildren) {
-            const options = /* @__PURE__ */ new Set();
-            traverseReactEltTree(ps.children, (elt) => {
-              var _a2;
-              if (typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
-                options.add(elt.props.value);
-              }
-            });
-            return Array.from(options.keys());
-          } else {
-            return (_a = ps.options) != null ? _a : [];
+      remove: {
+        displayName: "Remove an item",
+        argTypes: [
+          {
+            name: "index",
+            displayName: "Index",
+            type: "number"
           }
-        }
-      },
-      disabled: {
-        type: "boolean",
-        description: "Disables all radios",
-        defaultValueHint: false
-      },
-      useChildren: {
-        displayName: "Use slot",
-        type: "boolean",
-        defaultValueHint: false,
-        advanced: true,
-        description: "Instead of configuring a list of options, customize the contents of the RadioGroup by dragging and dropping Radio in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Radio and RadioButton."
+        ]
       },
-      children: {
-        type: "slot",
-        allowedComponents: [
-          "plasmic-antd5-radio",
-          "plasmic-antd5-radio-button"
-        ],
-        defaultValue: [
+      move: {
+        displayName: "Move field",
+        argTypes: [
           {
-            type: "component",
-            name: "plasmic-antd5-radio",
-            props: {
-              value: "op1",
-              children: {
-                type: "text",
-                value: "Option 1"
-              }
-            }
+            name: "from",
+            displayName: "From",
+            type: "number"
           },
           {
-            type: "component",
-            name: "plasmic-antd5-radio",
-            props: {
-              value: "op2",
-              children: {
-                type: "text",
-                value: "Option 2"
-              }
-            }
+            name: "to",
+            displayName: "To",
+            type: "number"
           }
         ]
-      },
-      onChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "value", type: "string" }]
-      }
-    },
-    states: {
-      value: {
-        type: "writable",
-        valueProp: "value",
-        onChangeProp: "onChange",
-        variableType: "text"
       }
     },
-    importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
-    importName: "AntdRadioGroup",
-    defaultStyles: {
-      layout: "hbox"
-    }
-  }, {
-    trapsSelection: true
-  }));
+    importPath: "@plasmicpkgs/antd5/skinny/registerForm",
+    importName: "FormListWrapper"
+  });
 }
 
 var __defProp$2 = Object.defineProperty;
@@ -3007,248 +3444,111 @@ var __objRest$2 = (source, exclude) => {
         target[prop] = source[prop];
     }
   return target;
-};
-const AntdOption = antd.Select.Option;
-const AntdOptionGroup = antd.Select.OptGroup;
-function AntdSelect(props) {
-  const _a = props, {
-    popupClassName,
-    popupScopeClassName,
-    defaultStylesClassName,
-    suffixIcon,
-    mode,
-    useChildren
-  } = _a, rest = __objRest$2(_a, [
-    "popupClassName",
-    "popupScopeClassName",
-    "defaultStylesClassName",
-    "suffixIcon",
-    "mode",
-    "useChildren"
-  ]);
-  const curated = __spreadValues$2({}, rest);
-  if (useChildren) {
-    curated.options = void 0;
-  }
-  return /* @__PURE__ */ React__default.default.createElement(
-    antd.Select,
-    __spreadValues$2(__spreadProps$1(__spreadValues$2({}, curated), {
-      mode: !mode || mode === "single" ? void 0 : mode,
-      popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`
-    }), suffixIcon && { suffixIcon })
-  );
-}
-function registerSelect(loader) {
-  registerComponentHelper(loader, AntdSelect, __spreadProps$1(__spreadValues$2({
-    name: "plasmic-antd5-select",
-    displayName: "Select",
-    props: {
-      options: {
-        type: "array",
-        hidden: (ps) => !!ps.useChildren,
-        itemType: {
-          type: "object",
-          nameFunc: (item) => item.label || item.value,
-          fields: {
-            type: {
-              type: "choice",
-              options: [
-                { value: "option", label: "Option" },
-                { value: "option-group", label: "Option Group" }
-              ],
-              defaultValue: "option"
-            },
-            value: {
-              type: "string",
-              hidden: (ps) => ps.type !== "option"
-            },
-            label: "string",
-            options: {
-              type: "array",
-              hidden: (ps) => {
-                return ps.type !== "option-group";
-              },
-              itemType: {
-                type: "object",
-                nameFunc: (item) => item.label || item.value,
-                fields: {
-                  value: "string",
-                  label: "string"
-                }
-              }
-            }
-          }
-        },
-        defaultValue: [
-          {
-            value: "option1",
-            label: "Option 1"
-          },
-          {
-            value: "option2",
-            label: "Option 2"
-          }
-        ]
-      },
-      useChildren: {
-        displayName: "Use slot",
-        type: "boolean",
-        defaultValueHint: false,
-        advanced: true,
-        description: "Instead of configuring a list of options, customize the contents of the Select by dragging and dropping options in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Options, and also use Option Groups."
+};
+function AntdModal(props) {
+  const _a = props, { onOpenChange, onOk, onCancel, open, footer } = _a, rest = __objRest$2(_a, ["onOpenChange", "onOk", "onCancel", "open", "footer"]);
+  const memoOnOk = React__default.default.useMemo(() => {
+    if (onOpenChange || onOk) {
+      return (e) => {
+        onOpenChange == null ? void 0 : onOpenChange(false);
+        onOk == null ? void 0 : onOk(e);
+      };
+    } else {
+      return void 0;
+    }
+  }, [onOpenChange, onOk]);
+  const memoOnCancel = React__default.default.useMemo(() => {
+    if (onOpenChange || onCancel) {
+      return (e) => {
+        onOpenChange == null ? void 0 : onOpenChange(false);
+        onCancel == null ? void 0 : onCancel(e);
+      };
+    } else {
+      return void 0;
+    }
+  }, [onOpenChange, onCancel]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    antd.Modal,
+    __spreadProps$1(__spreadValues$2({}, rest), {
+      onOk: memoOnOk,
+      onCancel: memoOnCancel,
+      open,
+      footer: footer != null ? footer : void 0
+    })
+  );
+}
+function registerModal(loader) {
+  registerComponentHelper(loader, AntdModal, {
+    name: "plasmic-antd5-modal",
+    displayName: "Modal",
+    props: {
+      open: {
+        type: "boolean"
       },
       children: {
         type: "slot",
-        allowedComponents: [
-          "plasmic-antd5-option",
-          "plasmic-antd5-option-group"
-        ],
-        hidden: (ps) => !ps.useChildren
+        defaultValue: {
+          type: "vbox",
+          children: ["Modal content"]
+        }
       },
-      placeholder: {
+      title: {
         type: "slot",
-        defaultValue: "Select..."
+        defaultValue: "Modal title"
       },
-      suffixIcon: {
+      footer: {
         type: "slot",
         hidePlaceholder: true
       },
-      open: {
-        type: "boolean",
-        editOnly: true,
-        uncontrolledProp: "defaultOpen"
-      },
-      value: {
-        type: "choice",
-        displayName: "Selected value",
-        editOnly: true,
-        uncontrolledProp: "defaultValue",
-        description: "Initial selected option",
-        multiSelect: (ps) => ps.mode === "multiple",
-        options: (ps) => {
-          var _a;
-          const options = /* @__PURE__ */ new Set();
-          if (!ps.useChildren) {
-            const rec = (op) => {
-              var _a2;
-              if (typeof op === "string") {
-                return [{ value: op, label: op }];
-              } else if ("options" in op) {
-                return ((_a2 = op.options) != null ? _a2 : []).flatMap((sub) => rec(sub));
-              } else {
-                return [{ value: op.value, label: op.label || op.value }];
-              }
-            };
-            return ((_a = ps.options) != null ? _a : []).flatMap((o) => rec(o));
-          } else {
-            traverseReactEltTree(ps.children, (elt) => {
-              var _a2;
-              if ((elt == null ? void 0 : elt.type) === antd.Select.Option && typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
-                options.add(elt.props.value);
-              }
-            });
-          }
-          return Array.from(options.keys());
-        }
-      },
-      mode: {
-        type: "choice",
-        options: ["single", "multiple"],
-        defaultValueHint: "single"
-      },
-      size: {
-        type: "choice",
-        options: ["small", "middle", "large"]
+      closeIcon: {
+        type: "slot",
+        hidePlaceholder: true
       },
-      disabled: {
-        type: "boolean",
-        defaultValueHint: false
+      onOk: {
+        type: "eventHandler",
+        argTypes: []
       },
-      showSearch: {
-        type: "boolean",
-        defaultValueHint: false,
-        advanced: true
+      onCancel: {
+        type: "eventHandler",
+        argTypes: []
       },
-      status: {
-        type: "choice",
-        options: ["error", "warning"],
+      okText: {
+        type: "string",
+        hidden: (ps) => !!ps.footer,
         advanced: true
       },
-      bordered: {
-        type: "boolean",
-        defaultValueHint: true
-      },
-      autoFocus: {
-        type: "boolean",
-        displayName: "Focus automatically",
-        defaultValueHint: false,
+      cancelText: {
+        type: "string",
+        hidden: (ps) => !!ps.footer,
         advanced: true
       },
-      onChange: {
+      onOpenChange: {
         type: "eventHandler",
-        argTypes: [
-          { name: "value", type: "string" },
-          { name: "option", type: "object" }
-        ]
-      },
-      dropdownMatchSelectWidth: {
-        type: "boolean",
-        displayName: "Should dropdown match trigger button width?",
-        defaultValueHint: true,
-        advanced: true
-      },
-      triggerClassName: {
-        type: "class",
-        displayName: "Trigger styles",
-        noSelf: true,
-        selectors: [
-          {
-            selector: ":component .ant-select-selector.ant-select-selector",
-            label: "Base"
-          },
-          {
-            selector: ":component .ant-select-selector:hover",
-            label: "Hovered"
-          }
-        ],
-        advanced: true
+        argTypes: [{ name: "open", type: "boolean" }]
       },
-      popupScopeClassName: {
+      modalScopeClassName: {
         type: "styleScopeClass",
-        scopeName: "popup"
-      },
-      popupClassName: {
-        type: "class",
-        displayName: "Popup styles",
-        selectors: [],
-        advanced: true
+        scopeName: "modal"
       },
-      optionClassName: {
+      modalClassName: {
         type: "class",
-        displayName: "Option styles",
+        displayName: "Modal content styles",
         noSelf: true,
         selectors: [
           {
-            selector: ":popup.ant-select-dropdown .ant-select-item-option",
+            selector: ":modal .ant-modal .ant-modal-content",
             label: "Base"
-          },
-          {
-            selector: ":popup.ant-select-dropdown .ant-select-item-option-active",
-            label: "Focused"
-          },
-          {
-            selector: ":popup.ant-select-dropdown .ant-select-item-option-selected",
-            label: "Selected"
           }
         ],
         advanced: true
       },
-      placeholderClassName: {
+      closeButtonClassName: {
         type: "class",
-        displayName: "Placeholder styles",
+        displayName: "Close button styles",
+        noSelf: true,
         selectors: [
           {
-            selector: ":component .ant-select-selector .ant-select-selection-placeholder",
+            selector: ":modal .ant-modal .ant-modal-close",
             label: "Base"
           }
         ],
@@ -3259,72 +3559,15 @@ function registerSelect(loader) {
       }
     },
     states: {
-      value: {
+      open: {
         type: "writable",
-        valueProp: "value",
-        onChangeProp: "onChange",
-        variableType: "text"
-      }
-    }
-  }, { trapsSelection: true }), {
-    importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
-    importName: "AntdSelect"
-  }));
-  registerComponentHelper(loader, AntdOption, {
-    name: "plasmic-antd5-option",
-    displayName: "Option",
-    parentComponentName: "plasmic-antd5-select",
-    props: {
-      children: __spreadValues$2({
-        type: "slot",
-        defaultValue: "Option"
-      }, { mergeWithParent: true }),
-      value: {
-        type: "string"
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
-    importName: "AntdOption"
-  });
-  registerComponentHelper(loader, AntdOptionGroup, {
-    name: "plasmic-antd5-option-group",
-    displayName: "Option Group",
-    parentComponentName: "plasmic-antd5-select",
-    props: {
-      children: {
-        type: "slot",
-        defaultValue: [
-          {
-            type: "component",
-            name: "plasmic-antd5-option",
-            props: {
-              value: "option1",
-              children: {
-                type: "text",
-                value: "Option 1"
-              }
-            }
-          },
-          {
-            type: "component",
-            name: "plasmic-antd5-option",
-            props: {
-              value: "option2",
-              children: {
-                type: "text",
-                value: "Option 1"
-              }
-            }
-          }
-        ]
-      },
-      label: {
-        type: "slot",
-        defaultValue: "Group label"
+        valueProp: "open",
+        onChangeProp: "onOpenChange",
+        variableType: "boolean"
       }
     },
-    importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
-    importName: "AntdOptionGroup"
+    importPath: "@plasmicpkgs/antd5/skinny/registerModal",
+    importName: "AntdModal"
   });
 }
 
@@ -3786,6 +4029,7 @@ function registerAll(loader) {
   registerSelect(loader);
   registerTable(loader);
   registerCheckbox(loader);
+  registerSwitch(loader);
   registerRadio(loader);
   registerModal(loader);
   registerButton(loader);
@@ -3801,6 +4045,29 @@ function registerAll(loader) {
   registerNumberInput(loader);
   registerUpload(loader);
 }
+const componentNameToInputType = {
+  [inputComponentName]: InputType.Text,
+  [textAreaComponentName]: InputType.TextArea,
+  [passwordComponentName]: InputType.Password,
+  [inputNumberComponentName]: InputType.Number,
+  [selectComponentName]: InputType.Select,
+  [optionComponentName]: InputType.Option,
+  [optionGroupComponentName]: InputType.OptionGroup,
+  [radioComponentName]: InputType.Radio,
+  [radioGroupComponentName]: InputType.RadioGroup,
+  [checkboxComponentName]: InputType.Checkbox
+};
+const inputTypeToComponentName = Object.fromEntries(
+  Object.entries(componentNameToInputType).reverse()
+);
 
+exports.InputType = InputType;
+exports.buttonComponentName = buttonComponentName;
+exports.componentNameToInputType = componentNameToInputType;
+exports.formComponentName = formComponentName;
+exports.formGroupComponentName = formGroupComponentName;
+exports.formItemComponentName = formItemComponentName;
+exports.formListComponentName = formListComponentName;
+exports.inputTypeToComponentName = inputTypeToComponentName;
 exports.registerAll = registerAll;
 //# sourceMappingURL=index.js.map