@plasmicpkgs/antd5 0.0.115 → 0.0.119

package/dist/antd.esm.js

@@ -1,5 +1,5 @@
 import React, { isValidElement, cloneElement, useState, useMemo } from 'react';
-import { Result, Button, Checkbox, ConfigProvider, theme, message, notification, Menu, Dropdown, Input, InputNumber, Radio, Select, Switch, Form, DatePicker, Modal, Table, Upload, Avatar, Tooltip, ColorPicker, Drawer, Steps, Tree, Collapse } from 'antd';
+import { Result, Button, Checkbox, ConfigProvider, theme, message, notification, Menu, Dropdown, Input, InputNumber, Radio, Select, Switch, Form, DatePicker, Modal, Table, Upload, Avatar, Tooltip, ColorPicker, Drawer, Steps, Tree, Collapse, Popover, Tabs, Rate } from 'antd';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import registerGlobalContext from '@plasmicapp/host/registerGlobalContext';
 import { GlobalActionsProvider, usePlasmicCanvasContext, DataProvider, repeatedElement, usePlasmicLink } from '@plasmicapp/host';
@@ -10,6 +10,7 @@ import equal from 'fast-deep-equal';
 import classNames from 'classnames';
 import { normalizeData, deriveFieldConfigs, usePlasmicDataOp } from '@plasmicapp/data-sources';
 import dayjs from 'dayjs';
+import uniqueId from 'lodash/uniqueId';
 
 function makeRegisterGlobalContext(component, meta) {
   return function(loader) {
@@ -111,43 +112,43 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-var __defProp$l = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$o = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$e = (source, exclude) => {
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function AntdButton(props) {
-  const _a = props, { submitsForm = false } = _a, rest = __objRest$e(_a, ["submitsForm"]);
+  const _a = props, { submitsForm = false } = _a, rest = __objRest$h(_a, ["submitsForm"]);
   const target = props.target === true ? "_blank" : props.target === false ? void 0 : props.target;
   return /* @__PURE__ */ React.createElement(
     Button,
-    __spreadProps$h(__spreadValues$l(__spreadProps$h(__spreadValues$l({}, rest), {
+    __spreadProps$i(__spreadValues$o(__spreadProps$i(__spreadValues$o({}, rest), {
       htmlType: submitsForm ? "submit" : "button"
     }), rest), {
       target
@@ -220,7 +221,7 @@ function registerButton(loader) {
         hidden: (props) => !props.href,
         defaultValueHint: false
       },
-      children: __spreadValues$l({
+      children: __spreadValues$o({
         type: "slot",
         defaultValue: [
           {
@@ -244,39 +245,39 @@ function registerButton(loader) {
   });
 }
 
-var __defProp$k = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$d = (source, exclude) => {
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
+  if (source != null && __getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function AntdCheckbox(props) {
-  const _a = props, { onChange } = _a, rest = __objRest$d(_a, ["onChange"]);
+  const _a = props, { onChange } = _a, rest = __objRest$g(_a, ["onChange"]);
   const wrappedOnChange = React.useMemo(() => {
     if (onChange) {
       return (event) => onChange(event.target.checked);
@@ -284,7 +285,7 @@ function AntdCheckbox(props) {
       return void 0;
     }
   }, [onChange]);
-  return /* @__PURE__ */ React.createElement(Checkbox, __spreadProps$g(__spreadValues$k({}, rest), { onChange: wrappedOnChange }));
+  return /* @__PURE__ */ React.createElement(Checkbox, __spreadProps$h(__spreadValues$n({}, rest), { onChange: wrappedOnChange }));
 }
 AntdCheckbox.__plasmicFormFieldMeta = { valueProp: "checked" };
 const AntdCheckboxGroup = Checkbox.Group;
@@ -319,7 +320,7 @@ function registerCheckbox(loader) {
         defaultValueHint: false,
         advanced: true
       },
-      children: __spreadValues$k({
+      children: __spreadValues$n({
         type: "slot",
         defaultValue: [
           {
@@ -400,33 +401,33 @@ function registerCheckbox(loader) {
   });
 }
 
-var __defProp$j = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$c = (source, exclude) => {
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+  if (source != null && __getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -476,12 +477,12 @@ function themeToAntdConfig(opts) {
   };
 }
 function AntdConfigProvider(props) {
-  const _a = props, { children, themeStyles, loadingText, removeLoading } = _a, rest = __objRest$c(_a, ["children", "themeStyles", "loadingText", "removeLoading"]);
+  const _a = props, { children, themeStyles, loadingText, removeLoading } = _a, rest = __objRest$f(_a, ["children", "themeStyles", "loadingText", "removeLoading"]);
   return /* @__PURE__ */ React.createElement(
     ConfigProvider,
-    __spreadValues$j({
+    __spreadValues$m({
       locale: defaultLocale
-    }, themeToAntdConfig(__spreadProps$f(__spreadValues$j({}, rest), {
+    }, themeToAntdConfig(__spreadProps$g(__spreadValues$m({}, rest), {
       fontFamily: themeStyles.fontFamily,
       fontSize: themeStyles.fontSize ? parseInt(themeStyles.fontSize) : void 0,
       lineHeight: themeStyles.lineHeight ? parseInt(themeStyles.lineHeight) : void 0,
@@ -523,8 +524,8 @@ function InnerConfigProvider(props) {
     () => ({
       showNotification: (opts) => {
         var _b;
-        const _a = opts, rest = __objRest$c(_a, ["type"]);
-        app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$j({}, rest));
+        const _a = opts, rest = __objRest$f(_a, ["type"]);
+        app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$m({}, rest));
       },
       hideNotifications: () => {
         app.notification.destroy();
@@ -824,7 +825,7 @@ function registerTokens(loader) {
 }
 const registerConfigProvider = makeRegisterGlobalContext(
   AntdConfigProvider,
-  __spreadProps$f(__spreadValues$j({
+  __spreadProps$g(__spreadValues$m({
     name: "plasmic-antd5-config-provider",
     displayName: "Ant Design System Settings",
     props: {
@@ -944,25 +945,25 @@ const registerConfigProvider = makeRegisterGlobalContext(
   })
 );
 
-var __defProp$i = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 const AntdMenuDivider = Menu.Divider;
 const AntdMenuItem = Menu.Item;
 const AntdMenuItemGroup = Menu.ItemGroup;
@@ -1017,7 +1018,7 @@ const MENU_ITEM_TYPE = {
     }
   }
 };
-const UNKEYED_MENU_ITEM_TYPE = __spreadProps$e(__spreadValues$i({}, MENU_ITEM_TYPE), {
+const UNKEYED_MENU_ITEM_TYPE = __spreadProps$f(__spreadValues$l({}, MENU_ITEM_TYPE), {
   fields: Object.fromEntries(
     Object.entries(MENU_ITEM_TYPE.fields).filter(([k]) => k !== "key")
   )
@@ -1051,6 +1052,25 @@ function registerMenu(loader) {
         defaultValueHint: "hover",
         advanced: true
       },
+      //   menuScopeClassName: {
+      //     type: "styleScopeClass",
+      //     scopeName: "menu",
+      //   } as any,
+      //   menuItemClassName: {
+      //     type: "class",
+      //     displayName: "Menu items",
+      //     noSelf: true,
+      //     selectors: [
+      //         {
+      //             selector: ":menu .ant-menu-item",
+      //             label: "Base",
+      //         },
+      //         {
+      //             selector: ":menu .ant-menu-item-selected",
+      //             label: "Selected",
+      //         },
+      //     ],
+      //   } as any,
       children: {
         type: "slot",
         allowedComponents: allowedMenuComponents,
@@ -1103,7 +1123,7 @@ function registerMenu(loader) {
         type: "string",
         description: "Set display title for collapsed item"
       },
-      children: __spreadValues$i({
+      children: __spreadValues$l({
         type: "slot",
         defaultValue: [
           {
@@ -1187,6 +1207,10 @@ function registerMenu(loader) {
           }
         ]
       },
+      popupClassName: {
+        type: "class",
+        displayName: "Sidemenu Popup"
+      },
       children: {
         type: "slot",
         allowedComponents: allowedMenuComponents,
@@ -1211,33 +1235,33 @@ function registerMenu(loader) {
   });
 }
 
-var __defProp$h = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$b = (source, exclude) => {
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+  if (source != null && __getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1249,24 +1273,34 @@ function AntdDropdown(props) {
     menuItems,
     useMenuItemsSlot = false,
     menuItemsJson,
-    trigger = "click"
-  } = _a, rest = __objRest$b(_a, [
+    trigger = "click",
+    dropdownMenuScopeClassName
+  } = _a, rest = __objRest$e(_a, [
     "children",
     "onAction",
     "menuItems",
     "useMenuItemsSlot",
     "menuItemsJson",
-    "trigger"
+    "trigger",
+    "dropdownMenuScopeClassName"
   ]);
   return /* @__PURE__ */ React.createElement(
     Dropdown,
-    __spreadProps$d(__spreadValues$h({}, rest), {
+    __spreadProps$e(__spreadValues$k({}, rest), {
       trigger: [trigger],
       overlay: () => {
         var _a2;
         const itemsChildren = useMenuItemsSlot ? (_a2 = menuItems == null ? void 0 : menuItems()) != null ? _a2 : [] : void 0;
         const items = useMenuItemsSlot ? void 0 : menuItemsJson;
-        return /* @__PURE__ */ React.createElement(Menu, { onClick: (event) => onAction == null ? void 0 : onAction(event.key), items }, itemsChildren);
+        return /* @__PURE__ */ React.createElement(
+          Menu,
+          {
+            className: `${dropdownMenuScopeClassName}`,
+            onClick: (event) => onAction == null ? void 0 : onAction(event.key),
+            items
+          },
+          itemsChildren
+        );
       }
     }),
     typeof children === "string" ? /* @__PURE__ */ React.createElement("div", null, children) : children
@@ -1323,6 +1357,34 @@ function registerDropdown(loader) {
           }
         ]
       },
+      dropdownMenuScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "dropdownMenu"
+      },
+      menuClassName: {
+        type: "class",
+        displayName: "Menu",
+        selectors: [
+          {
+            selector: ":dropdownMenu.ant-dropdown-menu",
+            label: "Base"
+          }
+        ]
+      },
+      menuItemClassName: {
+        type: "class",
+        displayName: "Menu item",
+        selectors: [
+          {
+            selector: ":dropdownMenu.ant-dropdown-menu .ant-dropdown-menu-item",
+            label: "Base"
+          },
+          {
+            selector: ":dropdownMenu.ant-dropdown-menu .ant-dropdown-menu-item-active",
+            label: "Focused"
+          }
+        ]
+      },
       open: {
         type: "boolean",
         description: "Toggle visibility of dropdown menu in Plasmic Editor",
@@ -1365,7 +1427,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$h({
+      children: __spreadValues$k({
         type: "slot",
         defaultValue: [
           {
@@ -1390,19 +1452,19 @@ function registerDropdown(loader) {
   });
 }
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$j = Object.defineProperty;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
@@ -1413,7 +1475,7 @@ function mergeProps(props, ...restProps) {
   if (restProps.every((rest) => Object.keys(rest).length === 0)) {
     return props;
   }
-  const result = __spreadValues$g({}, props);
+  const result = __spreadValues$j({}, props);
   for (const rest of restProps) {
     for (const key of Object.keys(rest)) {
       result[key] = mergePropVals(key, result[key], rest[key]);
@@ -1450,7 +1512,7 @@ function mergePropVals(name, val1, val2) {
   } else if (name === "className") {
     return classNames(val1, val2);
   } else if (name === "style") {
-    return __spreadValues$g(__spreadValues$g({}, val1), val2);
+    return __spreadValues$j(__spreadValues$j({}, val1), val2);
   } else if (name === "ref") {
     return mergeRefs(val1, val2);
   } else if (typeof val1 !== typeof val2) {
@@ -1486,25 +1548,25 @@ function reactNodeToString(reactNode) {
   return string;
 }
 
-var __defProp$f = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 const AntdInput = Input;
 const AntdTextArea = Input.TextArea;
 const AntdPassword = Input.Password;
@@ -1594,10 +1656,10 @@ const COMMON_EVENT_HANDLERS = {
 };
 const inputComponentName = "plasmic-antd5-input";
 function registerInput(loader) {
-  registerComponentHelper(loader, AntdInput, __spreadProps$c(__spreadValues$f({
+  registerComponentHelper(loader, AntdInput, __spreadProps$d(__spreadValues$i({
     name: inputComponentName,
     displayName: "Input",
-    props: __spreadValues$f(__spreadValues$f(__spreadValues$f({
+    props: __spreadValues$i(__spreadValues$i(__spreadValues$i({
       value: {
         type: "string",
         hidden: (ps) => !!ps.__plasmicFormField
@@ -1628,7 +1690,7 @@ function registerInput(loader) {
         defaultValueHint: "text"
       }
     }, COMMON_ADVANCED_PROPS), COMMON_DECORATOR_PROPS), COMMON_EVENT_HANDLERS),
-    states: __spreadValues$f({}, COMMON_STATES)
+    states: __spreadValues$i({}, COMMON_STATES)
   }, { trapsSelection: true }), {
     componentHelpers: COMMON_HELPERS_CONFIG,
     importPath: "@plasmicpkgs/antd5/skinny/registerInput",
@@ -1641,7 +1703,7 @@ function registerTextArea(loader) {
     name: textAreaComponentName,
     parentComponentName: inputComponentName,
     displayName: "Text Area",
-    props: __spreadValues$f({
+    props: __spreadValues$i({
       value: {
         type: "string",
         hidden: (ps) => !!ps.__plasmicFormField
@@ -1662,7 +1724,7 @@ function registerTextArea(loader) {
         defaultValueHint: true
       }
     }, COMMON_EVENT_HANDLERS),
-    states: __spreadValues$f({}, COMMON_STATES),
+    states: __spreadValues$i({}, COMMON_STATES),
     componentHelpers: COMMON_HELPERS_CONFIG,
     importPath: "@plasmicpkgs/antd5/skinny/registerInput",
     importName: "AntdTextArea"
@@ -1674,7 +1736,7 @@ function registerPasswordInput(loader) {
     name: passwordComponentName,
     parentComponentName: inputComponentName,
     displayName: "Password Input",
-    props: __spreadValues$f({
+    props: __spreadValues$i({
       value: {
         type: "string",
         hidden: (ps) => !!ps.__plasmicFormField
@@ -1695,7 +1757,7 @@ function registerPasswordInput(loader) {
         defaultValueHint: true
       }
     }, COMMON_EVENT_HANDLERS),
-    states: __spreadValues$f({}, COMMON_STATES),
+    states: __spreadValues$i({}, COMMON_STATES),
     componentHelpers: COMMON_HELPERS_CONFIG,
     importPath: "@plasmicpkgs/antd5/skinny/registerInput",
     importName: "AntdPassword"
@@ -1703,11 +1765,11 @@ function registerPasswordInput(loader) {
 }
 const inputNumberComponentName = "plasmic-antd5-input-number";
 function registerNumberInput(loader) {
-  registerComponentHelper(loader, AntdInputNumber, __spreadProps$c(__spreadValues$f({
+  registerComponentHelper(loader, AntdInputNumber, __spreadProps$d(__spreadValues$i({
     name: inputNumberComponentName,
     parentComponentName: inputComponentName,
     displayName: "Number Input",
-    props: __spreadProps$c(__spreadValues$f(__spreadValues$f(__spreadValues$f({
+    props: __spreadProps$d(__spreadValues$i(__spreadValues$i(__spreadValues$i({
       value: {
         type: "number",
         hidden: (ps) => !!ps.__plasmicFormField
@@ -1745,7 +1807,7 @@ function registerNumberInput(loader) {
         ]
       }
     }),
-    states: __spreadValues$f({}, COMMON_STATES)
+    states: __spreadValues$i({}, COMMON_STATES)
   }, { trapsSelection: true }), {
     // don't need component helpers
     importPath: "@plasmicpkgs/antd5/skinny/registerInput",
@@ -1753,33 +1815,33 @@ function registerNumberInput(loader) {
   }));
 }
 
-var __defProp$e = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$h = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1788,7 +1850,7 @@ const RadioGroup = Radio.Group;
 const AntdRadio = Radio;
 const AntdRadioButton = Radio.Button;
 function AntdRadioGroup(props) {
-  const _a = props, { onChange, useChildren } = _a, rest = __objRest$a(_a, ["onChange", "useChildren"]);
+  const _a = props, { onChange, useChildren } = _a, rest = __objRest$d(_a, ["onChange", "useChildren"]);
   const wrappedOnChange = React.useMemo(() => {
     if (onChange) {
       return (event) => onChange(event.target.value);
@@ -1798,7 +1860,7 @@ function AntdRadioGroup(props) {
   }, [onChange]);
   return /* @__PURE__ */ React.createElement(
     RadioGroup,
-    __spreadProps$b(__spreadValues$e({}, rest), {
+    __spreadProps$c(__spreadValues$h({}, rest), {
       onChange: wrappedOnChange,
       options: useChildren ? void 0 : rest.options
     })
@@ -1826,7 +1888,7 @@ function registerRadio(loader) {
         defaultValueHint: false,
         advanced: true
       },
-      children: __spreadValues$e({
+      children: __spreadValues$h({
         type: "slot",
         defaultValue: [
           {
@@ -1858,7 +1920,7 @@ function registerRadio(loader) {
         defaultValueHint: false,
         advanced: true
       },
-      children: __spreadValues$e({
+      children: __spreadValues$h({
         type: "slot",
         defaultValue: [
           {
@@ -1872,7 +1934,7 @@ function registerRadio(loader) {
     importName: "AntdRadioButton",
     parentComponentName: radioGroupComponentName
   });
-  registerComponentHelper(loader, AntdRadioGroup, __spreadValues$e({
+  registerComponentHelper(loader, AntdRadioGroup, __spreadValues$h({
     name: radioGroupComponentName,
     displayName: "Radio Group",
     props: {
@@ -1995,33 +2057,33 @@ function registerRadio(loader) {
   }));
 }
 
-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) => {
+var __defProp$g = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
   for (var prop in b || (b = {}))
-    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]);
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+  if (source != null && __getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2036,7 +2098,7 @@ function AntdSelect(props) {
     suffixIcon,
     mode,
     useChildren
-  } = _a, rest = __objRest$9(_a, [
+  } = _a, rest = __objRest$c(_a, [
     "popupClassName",
     "popupScopeClassName",
     "defaultStylesClassName",
@@ -2044,13 +2106,13 @@ function AntdSelect(props) {
     "mode",
     "useChildren"
   ]);
-  const curated = __spreadValues$d({}, rest);
+  const curated = __spreadValues$g({}, rest);
   if (useChildren) {
     curated.options = void 0;
   }
   return /* @__PURE__ */ React.createElement(
     Select,
-    __spreadValues$d(__spreadProps$a(__spreadValues$d({}, curated), {
+    __spreadValues$g(__spreadProps$b(__spreadValues$g({}, curated), {
       mode: !mode || mode === "single" ? void 0 : mode,
       popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`,
       optionFilterProp: curated.options ? "label" : void 0,
@@ -2065,7 +2127,7 @@ const selectComponentName = "plasmic-antd5-select";
 const optionComponentName = "plasmic-antd5-option";
 const optionGroupComponentName = "plasmic-antd5-option-group";
 function registerSelect(loader) {
-  registerComponentHelper(loader, AntdSelect, __spreadProps$a(__spreadValues$d({
+  registerComponentHelper(loader, AntdSelect, __spreadProps$b(__spreadValues$g({
     name: selectComponentName,
     displayName: "Select",
     props: {
@@ -2301,7 +2363,7 @@ function registerSelect(loader) {
     displayName: "Option",
     parentComponentName: selectComponentName,
     props: {
-      children: __spreadValues$d({
+      children: __spreadValues$g({
         type: "slot",
         defaultValue: "Option"
       }, { mergeWithParent: true }),
@@ -2354,24 +2416,24 @@ function registerSelect(loader) {
   });
 }
 
-var __defProp$c = Object.defineProperty;
-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$f = Object.defineProperty;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (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$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
     }
   return a;
 };
 function AntdSwitch(props) {
-  return /* @__PURE__ */ React.createElement(Switch, __spreadValues$c({}, props));
+  return /* @__PURE__ */ React.createElement(Switch, __spreadValues$f({}, props));
 }
 AntdSwitch.__plasmicFormFieldMeta = { valueProp: "checked" };
 const switchComponentName = "plasmic-antd5-switch";
@@ -2417,33 +2479,33 @@ function registerSwitch(loader) {
   });
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = 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$e = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (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$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$e.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$e)
+    for (var prop of __getOwnPropSymbols$e(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2478,7 +2540,7 @@ const Internal = React.forwardRef(
     const [form] = Form.useForm();
     const values = form.getFieldsValue(true);
     const lastValue = React.useRef(values);
-    const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$8(_a, ["extendedOnValuesChange", "setRemountKey"]);
+    const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$b(_a, ["extendedOnValuesChange", "setRemountKey"]);
     let childrenNode;
     if (props.mode !== "simplified") {
       childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
@@ -2493,7 +2555,7 @@ const Internal = React.forwardRef(
           },
           /* @__PURE__ */ React.createElement(
             FormItemWrapper,
-            __spreadProps$9(__spreadValues$b({}, formItem), {
+            __spreadProps$a(__spreadValues$e({}, formItem), {
               noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
               style: { width: "100%" }
             }),
@@ -2561,7 +2623,7 @@ const Internal = React.forwardRef(
       },
       /* @__PURE__ */ React.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React.createElement(
         Form,
-        __spreadProps$9(__spreadValues$b({}, rest), {
+        __spreadProps$a(__spreadValues$e({}, rest), {
           key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
           onValuesChange: (...args) => {
             var _a2;
@@ -2597,7 +2659,7 @@ function useFormItemDefinitions(rawData, props, formRef) {
     const { mergedFields, minimalFullLengthFields } = deriveFieldConfigs(
       formItems != null ? formItems : [],
       schema,
-      (field) => __spreadValues$b({
+      (field) => __spreadValues$e({
         inputType: "Text" /* Text */
       }, field && {
         key: field.id,
@@ -2635,7 +2697,7 @@ const FormWrapper = React.forwardRef(
     }, [previousInitialValues, props.initialValues]);
     React.useImperativeHandle(
       ref,
-      () => wrapperRef.current ? __spreadValues$b({}, wrapperRef.current) : {}
+      () => wrapperRef.current ? __spreadValues$e({}, wrapperRef.current) : {}
     );
     const rawData = useRawData(props);
     const formItemDefinitions = useFormItemDefinitions(
@@ -2648,7 +2710,7 @@ const FormWrapper = React.forwardRef(
         setRemountKey((k) => k + 1);
       }
     }, [rawData]);
-    const _a = props, { formItems } = _a, rest = __objRest$8(_a, ["formItems"]);
+    const _a = props, { formItems } = _a, rest = __objRest$b(_a, ["formItems"]);
     const actualFormItems = props.mode === "simplified" && formItemDefinitions ? formItemDefinitions : formItems;
     const previousFormItems = React.useRef([]);
     React.useEffect(() => {
@@ -2663,7 +2725,7 @@ const FormWrapper = React.forwardRef(
     const isLoadingData = rawData == null ? void 0 : rawData.isLoading;
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Internal,
-      __spreadProps$9(__spreadValues$b({
+      __spreadProps$a(__spreadValues$e({
         key: remountKey
       }, rest), {
         setRemountKey,
@@ -2806,7 +2868,7 @@ function registerForm(loader) {
         type: "array",
         itemType: {
           type: "object",
-          fields: __spreadValues$b({
+          fields: __spreadValues$e({
             label: {
               type: "string",
               defaultValueHint: getDefaultValueHint("label")
@@ -2933,7 +2995,7 @@ function registerForm(loader) {
           return true;
         }
       },
-      submitSlot: __spreadValues$b({
+      submitSlot: __spreadValues$e({
         type: "slot",
         hidden: () => true,
         defaultValue: {
@@ -3210,7 +3272,7 @@ function FormItemWrapper(props) {
     customizeProps,
     setControlContextData,
     alignLabellessWithControls = true
-  } = _a, rest = __objRest$8(_a, [
+  } = _a, rest = __objRest$b(_a, [
     "rules",
     "description",
     "noLabel",
@@ -3257,7 +3319,7 @@ function FormItemWrapper(props) {
   }
   return /* @__PURE__ */ React.createElement(
     FormItem,
-    __spreadProps$9(__spreadValues$b({}, rest), {
+    __spreadProps$a(__spreadValues$e({}, rest), {
       label: noLabel ? void 0 : props.label,
       name: relativeFormItemName,
       rules,
@@ -3322,7 +3384,7 @@ function deriveOnChangePropName(props) {
   return void 0;
 }
 function FormItemForwarder(_a) {
-  var _b = _a, { formItemProps } = _b, props = __objRest$8(_b, ["formItemProps"]);
+  var _b = _a, { formItemProps } = _b, props = __objRest$b(_b, ["formItemProps"]);
   var _a2;
   const status = Form.Item.useStatus();
   const internalFormCtx = React.useContext(InternalFormInstanceContext);
@@ -3335,7 +3397,7 @@ function FormItemForwarder(_a) {
   });
   return React.Children.map(formItemProps.children, (child, i) => {
     var _a3;
-    let newProps = __spreadProps$9(__spreadValues$b(__spreadValues$b({}, (_a3 = child.props) != null ? _a3 : {}), props), {
+    let newProps = __spreadProps$a(__spreadValues$e(__spreadValues$e({}, (_a3 = child.props) != null ? _a3 : {}), props), {
       __plasmicFormField: true
     });
     if (formItemProps.customizeProps) {
@@ -3470,7 +3532,7 @@ const commonFormItemProps = {
 };
 const formItemComponentName = "plasmic-antd5-form-item";
 function registerFormItem(loader) {
-  registerComponentHelper(loader, FormItemWrapper, __spreadValues$b({
+  registerComponentHelper(loader, FormItemWrapper, __spreadValues$e({
     name: formItemComponentName,
     displayName: "Form Field",
     parentComponentName: formComponentName,
@@ -3478,8 +3540,8 @@ function registerFormItem(loader) {
       marginBottom: "24px",
       width: "stretch"
     },
-    props: __spreadValues$b({
-      label: __spreadValues$b({
+    props: __spreadValues$e({
+      label: __spreadValues$e({
         type: "slot",
         defaultValue: {
           type: "text",
@@ -3487,7 +3549,7 @@ function registerFormItem(loader) {
         },
         hidden: (ps) => !!ps.noLabel
       }, { mergeWithParent: true }),
-      children: __spreadValues$b({
+      children: __spreadValues$e({
         type: "slot",
         defaultValue: {
           type: "component",
@@ -3662,7 +3724,7 @@ const FormListWrapper = React.forwardRef(function FormListWrapper2(props, ref) {
       }
     }, [props.initialValue, fullFormItemName]);
   }
-  return /* @__PURE__ */ React.createElement(FormList, __spreadProps$9(__spreadValues$b({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
+  return /* @__PURE__ */ React.createElement(FormList, __spreadProps$a(__spreadValues$e({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
     operationsRef.current = args;
     return args[0].map((field, index) => /* @__PURE__ */ React.createElement(
       PathContext.Provider,
@@ -3789,39 +3851,55 @@ function registerFormList(loader) {
   });
 }
 
-var __defProp$a = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = 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$d = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = 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$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$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$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$7 = (source, exclude) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.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$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.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;
 };
 function AntdModal(props) {
-  const _a = props, { onOpenChange, onOk, onCancel, open, footer } = _a, rest = __objRest$7(_a, ["onOpenChange", "onOk", "onCancel", "open", "footer"]);
+  const _a = props, {
+    onOpenChange,
+    onOk,
+    onCancel,
+    open,
+    footer,
+    modalScopeClassName,
+    wrapClassName
+  } = _a, rest = __objRest$a(_a, [
+    "onOpenChange",
+    "onOk",
+    "onCancel",
+    "open",
+    "footer",
+    "modalScopeClassName",
+    "wrapClassName"
+  ]);
   const memoOnOk = React.useMemo(() => {
     if (onOpenChange || onOk) {
       return (e) => {
@@ -3844,12 +3922,13 @@ function AntdModal(props) {
   }, [onOpenChange, onCancel]);
   return /* @__PURE__ */ React.createElement(
     Modal,
-    __spreadProps$8(__spreadValues$a({}, rest), {
+    __spreadProps$9(__spreadValues$d({}, rest), {
       onOk: memoOnOk,
       onCancel: memoOnCancel,
       open,
       footer: footer != null ? footer : void 0,
-      className: `${props.className} ${props.defaultStylesClassName}`
+      wrapClassName,
+      className: `${props.className} ${props.defaultStylesClassName} ${modalScopeClassName}`
     })
   );
 }
@@ -3903,29 +3982,33 @@ function registerModal(loader) {
         type: "eventHandler",
         argTypes: [{ name: "open", type: "boolean" }]
       },
+      wrapClassName: {
+        type: "class",
+        displayName: "Modal container",
+        styleSections: ["background"]
+      },
       modalScopeClassName: {
         type: "styleScopeClass",
         scopeName: "modal"
       },
-      modalClassName: {
+      modalContentClassName: {
         type: "class",
-        displayName: "Modal content styles",
+        displayName: "Modal content",
         noSelf: true,
         selectors: [
           {
-            selector: ":modal .ant-modal .ant-modal-content",
+            selector: ":modal .ant-modal-content",
             label: "Base"
           }
-        ],
-        advanced: true
+        ]
       },
       closeButtonClassName: {
         type: "class",
-        displayName: "Close button styles",
+        displayName: "Close button",
         noSelf: true,
         selectors: [
           {
-            selector: ":modal .ant-modal .ant-modal-close",
+            selector: ":modal .ant-modal-close",
             label: "Base"
           }
         ],
@@ -3948,30 +4031,30 @@ function registerModal(loader) {
   });
 }
 
-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$c = Object.defineProperty;
+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$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$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 __objRest$6 = (source, exclude) => {
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$9.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$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.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;
@@ -3986,7 +4069,7 @@ const AntdTable = React.forwardRef(function AntdTable2(props, ref) {
     setControlContextData,
     selectedRowKeys,
     defaultSelectedRowKeys
-  } = _a, rest = __objRest$6(_a, [
+  } = _a, rest = __objRest$9(_a, [
     "data",
     "onSelectedRowKeysChange",
     "onSelectedRowsChange",
@@ -4052,7 +4135,7 @@ const AntdTable = React.forwardRef(function AntdTable2(props, ref) {
   );
   return /* @__PURE__ */ React.createElement(
     Table,
-    __spreadValues$9({
+    __spreadValues$c({
       loading: data == null ? void 0 : data.isLoading,
       dataSource: data == null ? void 0 : data.data,
       rowSelection: selection,
@@ -4161,7 +4244,7 @@ function registerTable(loader) {
       }
     }
   });
-  registerComponentHelper(loader, AntdColumn, __spreadValues$9({
+  registerComponentHelper(loader, AntdColumn, __spreadValues$c({
     name: "plasmic-antd5-table-column",
     displayName: "Column",
     parentComponentName: "plasmic-antd5-table",
@@ -4198,7 +4281,7 @@ function registerTable(loader) {
     importPath: "@plasmicpkgs/antd5/skinny/registerTable",
     importName: "AntdColumn"
   }, { isRenderless: true }));
-  registerComponentHelper(loader, AntdColumnGroup, __spreadValues$9({
+  registerComponentHelper(loader, AntdColumnGroup, __spreadValues$c({
     name: "plasmic-antd5-table-column-group",
     displayName: "Column Group",
     parentComponentName: "plasmic-antd5-table",
@@ -4217,39 +4300,39 @@ function registerTable(loader) {
   }, { isRenderless: true }));
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = 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 __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$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$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 __objRest$5 = (source, exclude) => {
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$8.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$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.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;
 };
 function UploadWrapper(props) {
-  const _a = props, { files, onFilesChange } = _a, rest = __objRest$5(_a, ["files", "onFilesChange"]);
+  const _a = props, { files, onFilesChange } = _a, rest = __objRest$8(_a, ["files", "onFilesChange"]);
   const handleChange = (info) => {
     const { file } = info;
     if (file.status === "removed") {
@@ -4264,7 +4347,7 @@ function UploadWrapper(props) {
     };
     onFilesChange == null ? void 0 : onFilesChange([
       ...files,
-      __spreadProps$7(__spreadValues$8({}, metadata), {
+      __spreadProps$8(__spreadValues$b({}, metadata), {
         status: "uploading"
       })
     ]);
@@ -4272,19 +4355,19 @@ function UploadWrapper(props) {
     reader.onload = () => {
       onFilesChange == null ? void 0 : onFilesChange([
         ...files.filter((f) => f.uid !== file.uid),
-        __spreadProps$7(__spreadValues$8({}, metadata), {
+        __spreadProps$8(__spreadValues$b({}, metadata), {
           contents: reader.result.replace(
             /^data:[^;]+;base64,/,
             ""
           ),
-          status: "success"
+          status: "done"
         })
       ]);
     };
     reader.onerror = (error) => {
       onFilesChange == null ? void 0 : onFilesChange([
         ...files.filter((f) => f.uid !== file.uid),
-        __spreadProps$7(__spreadValues$8({}, metadata), {
+        __spreadProps$8(__spreadValues$b({}, metadata), {
           status: "error"
         })
       ]);
@@ -4296,7 +4379,7 @@ function UploadWrapper(props) {
   };
   return /* @__PURE__ */ React.createElement(
     Upload,
-    __spreadProps$7(__spreadValues$8({}, rest), {
+    __spreadProps$8(__spreadValues$b({}, rest), {
       fileList: files,
       beforeUpload: () => {
         return false;
@@ -4315,7 +4398,7 @@ UploadWrapper.__plasmicFormFieldMeta = {
   onChangePropName: "onFilesChange"
 };
 function registerUpload(loader) {
-  registerComponentHelper(loader, UploadWrapper, __spreadProps$7(__spreadValues$8({
+  registerComponentHelper(loader, UploadWrapper, __spreadProps$8(__spreadValues$b({
     name: "plasmic-antd5-upload",
     displayName: "Upload",
     props: {
@@ -4402,33 +4485,33 @@ function registerUpload(loader) {
   }));
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-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$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$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$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$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$4 = (source, exclude) => {
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4437,13 +4520,14 @@ function AntdDatePicker(props) {
   const nativeInput = React.useRef(null);
   const [open, setOpen] = useState(false);
   const strValue = props.value && !(typeof props.value === "string") && "toISOString" in props.value ? props.value.toISOString() : props.value === null ? void 0 : props.value;
-  const _a = props, rest = __objRest$4(_a, ["picker"]);
+  const _a = props, { picker, popupScopeClassName } = _a, rest = __objRest$7(_a, ["picker", "popupScopeClassName"]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     DatePicker,
-    __spreadProps$6(__spreadValues$7({}, rest), {
-      picker: props.picker,
+    __spreadProps$7(__spreadValues$a({}, rest), {
+      picker,
       value: props.value === void 0 ? void 0 : !props.value ? null : dayjs(props.value),
       defaultValue: props.defaultValue === void 0 ? void 0 : dayjs(props.defaultValue),
+      popupClassName: popupScopeClassName,
       onChange: (value, _dateString) => {
         var _a2;
         (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value !== null ? value.toISOString() : null);
@@ -4505,6 +4589,50 @@ function registerDatePicker(loader) {
         })),
         defaultValueHint: "date"
       },
+      popupScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "datePickerPopup"
+      },
+      popupClassName: {
+        type: "class",
+        displayName: "Popup container",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-panel-container",
+            label: "Base"
+          }
+        ]
+      },
+      popupHeaderClassName: {
+        type: "class",
+        displayName: "Popup header",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-header",
+            label: "Base"
+          }
+        ]
+      },
+      popupBodyClassName: {
+        type: "class",
+        displayName: "Popup body",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-body",
+            label: "Base"
+          }
+        ]
+      },
+      popupFooterClassName: {
+        type: "class",
+        displayName: "Popup footer",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-footer",
+            label: "Base"
+          }
+        ]
+      },
       showTime: {
         type: "boolean",
         description: "Enable time selection"
@@ -4560,33 +4688,33 @@ function registerDatePicker(loader) {
   });
 }
 
-var __defProp$6 = 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 __defProp$9 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+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$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$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;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$3 = (source, exclude) => {
+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$6.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$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.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;
@@ -4596,17 +4724,17 @@ function AntdAvatar(_a) {
     letters,
     href,
     target
-  } = _b, props = __objRest$3(_b, [
+  } = _b, props = __objRest$6(_b, [
     "letters",
     "href",
     "target"
   ]);
-  const avatar = /* @__PURE__ */ React.createElement(Avatar, __spreadProps$5(__spreadValues$6({}, props), { children: props.children || letters }));
+  const avatar = /* @__PURE__ */ React.createElement(Avatar, __spreadProps$6(__spreadValues$9({}, props), { children: props.children || letters }));
   const PlasmicLink = usePlasmicLink();
   return href ? /* @__PURE__ */ React.createElement(PlasmicLink, { href, target: target ? "_blank" : void 0 }, avatar) : avatar;
 }
 function AntdAvatarGroup(props) {
-  return /* @__PURE__ */ React.createElement(Avatar.Group, __spreadValues$6({}, props));
+  return /* @__PURE__ */ React.createElement(Avatar.Group, __spreadValues$9({}, props));
 }
 function registerAvatar(loader) {
   registerComponentHelper(loader, AntdAvatar, {
@@ -4694,27 +4822,27 @@ function registerAvatarGroup(loader) {
   });
 }
 
-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) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = 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) => {
   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]);
+    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;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 function AntdTooltip(props) {
-  return /* @__PURE__ */ React.createElement(Tooltip, __spreadProps$4(__spreadValues$5({}, props), { title: props.title || props.titleText }));
+  return /* @__PURE__ */ React.createElement(Tooltip, __spreadProps$5(__spreadValues$8({}, props), { title: props.title || props.titleText }));
 }
 function registerTooltip(loader) {
   registerComponentHelper(loader, AntdTooltip, {
@@ -4730,6 +4858,10 @@ function registerTooltip(loader) {
         },
         mergeWithParent: true
       },
+      overlayClassName: {
+        type: "class",
+        displayName: "Overlay"
+      },
       titleText: {
         type: "string",
         displayName: "Tooltip contents",
@@ -4770,33 +4902,33 @@ function registerTooltip(loader) {
   });
 }
 
-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) => {
+var __defProp$7 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+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$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]);
+    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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$2 = (source, exclude) => {
+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$4.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$7.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))
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4805,13 +4937,13 @@ function AntdColorPicker(_a) {
   var _b = _a, {
     showTextSwitch,
     onChange
-  } = _b, props = __objRest$2(_b, [
+  } = _b, props = __objRest$5(_b, [
     "showTextSwitch",
     "onChange"
   ]);
   return /* @__PURE__ */ React.createElement(
     ColorPicker,
-    __spreadProps$3(__spreadValues$4({}, props), {
+    __spreadProps$4(__spreadValues$7({}, props), {
       showText: props.showText || showTextSwitch,
       onChangeComplete: (value) => {
         onChange == null ? void 0 : onChange(typeof value === "string" ? value : value.toHexString());
@@ -4884,39 +5016,39 @@ function registerColorPicker(loader) {
   });
 }
 
-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) => {
+var __defProp$6 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = 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$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]);
+    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]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$1 = (source, exclude) => {
+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$3.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$6.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))
+  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];
     }
   return target;
 };
 function AntdDrawer(props) {
-  const _a = props, { onOpenChange, onClose, open, footer } = _a, rest = __objRest$1(_a, ["onOpenChange", "onClose", "open", "footer"]);
+  const _a = props, { onOpenChange, onClose, open, footer, drawerScopeClassName } = _a, rest = __objRest$4(_a, ["onOpenChange", "onClose", "open", "footer", "drawerScopeClassName"]);
   const memoOnClose = React.useMemo(() => {
     if (onOpenChange || onClose) {
       return (e) => {
@@ -4929,8 +5061,9 @@ function AntdDrawer(props) {
   }, [onOpenChange, onClose]);
   return /* @__PURE__ */ React.createElement(
     Drawer,
-    __spreadProps$2(__spreadValues$3({}, rest), {
+    __spreadProps$3(__spreadValues$6({}, rest), {
       onClose: memoOnClose,
+      rootClassName: drawerScopeClassName,
       open,
       footer: footer != null ? footer : void 0,
       className: `${props.className} ${props.defaultStylesClassName}`
@@ -4977,13 +5110,69 @@ function registerDrawer(loader) {
         type: "styleScopeClass",
         scopeName: "drawer"
       },
-      drawerClassName: {
+      drawerHeaderClassName: {
+        type: "class",
+        displayName: "Drawer header",
+        noSelf: true,
+        selectors: [
+          {
+            selector: ":drawer .ant-drawer-header",
+            label: "Base"
+          }
+        ]
+      },
+      drawerBodyClassName: {
         type: "class",
-        displayName: "Drawer content styles",
+        displayName: "Drawer body",
         noSelf: true,
         selectors: [
           {
-            selector: ":drawer .ant-drawer .ant-drawer-content",
+            selector: ":drawer .ant-drawer-body",
+            label: "Base"
+          }
+        ]
+      },
+      drawerFooterClassName: {
+        type: "class",
+        displayName: "Drawer footer",
+        noSelf: true,
+        selectors: [
+          {
+            selector: ":drawer .ant-drawer-footer",
+            label: "Base"
+          }
+        ]
+      },
+      drawerTitleClassName: {
+        type: "class",
+        displayName: "Drawer title",
+        noSelf: true,
+        selectors: [
+          {
+            selector: ":drawer .ant-drawer-title",
+            label: "Base"
+          }
+        ]
+      },
+      drawerMaskClassName: {
+        type: "class",
+        displayName: "Drawer mask",
+        styleSections: ["background"],
+        noSelf: true,
+        selectors: [
+          {
+            selector: ":drawer .ant-drawer-mask",
+            label: "Base"
+          }
+        ]
+      },
+      drawerContentWrapperClassName: {
+        type: "class",
+        displayName: "Drawer content wrapper",
+        noSelf: true,
+        selectors: [
+          {
+            selector: ":drawer .ant-drawer-content-wrapper",
             label: "Base"
           }
         ],
@@ -4991,11 +5180,11 @@ function registerDrawer(loader) {
       },
       closeButtonClassName: {
         type: "class",
-        displayName: "Close button styles",
+        displayName: "Close button",
         noSelf: true,
         selectors: [
           {
-            selector: ":drawer .ant-drawer .ant-drawer-close",
+            selector: ":drawer .ant-drawer-close",
             label: "Base"
           }
         ],
@@ -5022,24 +5211,24 @@ function registerDrawer(loader) {
   });
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+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$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    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;
 };
 function AntdSteps(props) {
-  return /* @__PURE__ */ React.createElement(Steps, __spreadValues$2({}, props));
+  return /* @__PURE__ */ React.createElement(Steps, __spreadValues$5({}, props));
 }
 function registerSteps(loader) {
   const statusOptions = ["wait", "process", "finish", "error"];
@@ -5146,30 +5335,30 @@ function registerSteps(loader) {
   });
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = 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$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    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$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 function useMunged(props) {
   const [autoExpandParent, setAutoExpandParent] = useState(
     props.autoExpandParent
   );
-  const munged = __spreadProps$1(__spreadValues$1({}, props), { autoExpandParent });
+  const munged = __spreadProps$2(__spreadValues$4({}, props), { autoExpandParent });
   if (!props.expandedKeys) {
     delete munged["expandedKeys"];
   }
@@ -5182,11 +5371,11 @@ function useMunged(props) {
 }
 function AntdTree(props) {
   const munged = useMunged(props);
-  return /* @__PURE__ */ React.createElement(Tree, __spreadValues$1({}, munged));
+  return /* @__PURE__ */ React.createElement(Tree, __spreadValues$4({}, munged));
 }
 function AntdDirectoryTree(props) {
   const munged = useMunged(props);
-  return /* @__PURE__ */ React.createElement(Tree.DirectoryTree, __spreadValues$1({}, munged));
+  return /* @__PURE__ */ React.createElement(Tree.DirectoryTree, __spreadValues$4({}, munged));
 }
 const treeHelpers_ = {
   states: {
@@ -5416,20 +5605,20 @@ function registerTreeHelper({
       }
     },
     states: {
-      checkedKeys: __spreadValues$1({
+      checkedKeys: __spreadValues$4({
         type: "writable",
         valueProp: "checkedKeys",
         onChangeProp: "onCheck",
         variableType: "array",
         initVal: []
       }, treeHelpers_.states.checkedKeys),
-      checkedNodes: __spreadValues$1({
+      checkedNodes: __spreadValues$4({
         type: "readonly",
         onChangeProp: "onCheck",
         variableType: "array",
         initVal: []
       }, treeHelpers_.states.checkedNodes),
-      checkedDetails: __spreadValues$1({
+      checkedDetails: __spreadValues$4({
         type: "readonly",
         onChangeProp: "onCheck",
         variableType: "object",
@@ -5438,20 +5627,20 @@ function registerTreeHelper({
           halfCheckedKeys: []
         }
       }, treeHelpers_.states.checkedDetails),
-      selectedKeys: __spreadValues$1({
+      selectedKeys: __spreadValues$4({
         type: "writable",
         valueProp: "selectedKeys",
         onChangeProp: "onSelect",
         variableType: "array",
         initVal: []
       }, treeHelpers_.states.selectedKeys),
-      selectedNodes: __spreadValues$1({
+      selectedNodes: __spreadValues$4({
         type: "readonly",
         onChangeProp: "onSelect",
         variableType: "array",
         initVal: []
       }, treeHelpers_.states.selectedNodes),
-      expandedKeys: __spreadValues$1({
+      expandedKeys: __spreadValues$4({
         type: "writable",
         valueProp: "expandedKeys",
         onChangeProp: "onExpand",
@@ -5491,68 +5680,61 @@ function registerDirectoryTree(loader) {
   });
 }
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = 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.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$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 = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+  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 collapseComponentName = "plasmic-antd5-collapse";
-const collapseItemComponentName = "plasmic-antd5-collapse-item";
-const AntdCollapseItem = ({ children }) => {
+const singleCollapseComponentName = "plasmic-antd5-single-collapse";
+const accordionComponentName = "plasmic-antd5-collapse";
+const accordionItemComponentName = "plasmic-antd5-collapse-item";
+function AntdAccordionItem({ children }) {
   return /* @__PURE__ */ React.createElement("div", null, children);
-};
-function AntdCollapse(props) {
+}
+function AntdAccordion(props) {
   const _a = props, {
     items: itemsRaw,
-    activeKeys,
-    defaultActiveKeys,
+    activeKey,
+    defaultActiveKey,
     expandIcon,
     collapsible,
     disabled,
     rotateCustomExpandIcon
-  } = _a, rest = __objRest(_a, [
+  } = _a, rest = __objRest$3(_a, [
     "items",
-    "activeKeys",
-    "defaultActiveKeys",
+    "activeKey",
+    "defaultActiveKey",
     "expandIcon",
     "collapsible",
     "disabled",
     "rotateCustomExpandIcon"
   ]);
-  const activeKeyProp = useMemo(() => {
-    const res = (activeKeys == null ? void 0 : activeKeys.map((k) => k.key).filter((k) => k)) || [];
-    return res.length ? res : void 0;
-  }, [activeKeys]);
-  const defaultActiveKeysProp = useMemo(() => {
-    const res = (defaultActiveKeys == null ? void 0 : defaultActiveKeys.map((k) => k.key).filter((k) => k)) || [];
-    return res.length ? res : void 0;
-  }, [defaultActiveKeys]);
   const items = useMemo(() => {
     if (!React.isValidElement(itemsRaw))
       return [];
@@ -5560,7 +5742,7 @@ function AntdCollapse(props) {
       if (!React.isValidElement(currentItem) || !React.isValidElement(currentItem.props.children)) {
         return null;
       }
-      return __spreadProps(__spreadValues({}, currentItem.props), {
+      return __spreadProps$1(__spreadValues$3({}, currentItem.props), {
         id: currentItem.props.id,
         key: currentItem.props.id,
         children: React.cloneElement(currentItem.props.children)
@@ -5569,10 +5751,69 @@ function AntdCollapse(props) {
   }, [itemsRaw]);
   return /* @__PURE__ */ React.createElement(
     Collapse,
-    __spreadValues({
+    __spreadValues$3({
+      accordion: true,
       items,
-      defaultActiveKey: defaultActiveKeysProp,
-      activeKey: activeKeyProp,
+      defaultActiveKey,
+      activeKey,
+      collapsible: disabled ? "disabled" : collapsible,
+      expandIcon: (expandIcon == null ? void 0 : expandIcon.key) ? ({ isActive }) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: isActive && rotateCustomExpandIcon ? { transform: "rotate(90deg)" } : void 0
+        },
+        expandIcon
+      ) : void 0
+    }, rest)
+  );
+}
+function AntdSingleCollapse(props) {
+  const _a = props, {
+    open,
+    defaultOpen,
+    expandIcon,
+    collapsible,
+    disabled,
+    rotateCustomExpandIcon,
+    label,
+    showArrow,
+    extra,
+    forceRender,
+    children,
+    headerClass
+  } = _a, rest = __objRest$3(_a, [
+    "open",
+    "defaultOpen",
+    "expandIcon",
+    "collapsible",
+    "disabled",
+    "rotateCustomExpandIcon",
+    "label",
+    "showArrow",
+    "extra",
+    "forceRender",
+    "children",
+    "headerClass"
+  ]);
+  const defaultItemKey = useMemo(() => uniqueId(), []);
+  const item = useMemo(
+    () => ({
+      key: defaultItemKey,
+      label,
+      showArrow,
+      extra: /* @__PURE__ */ React.createElement(React.Fragment, null, extra),
+      headerClass,
+      children
+    }),
+    [label, showArrow, extra, children, defaultItemKey, headerClass]
+  );
+  return /* @__PURE__ */ React.createElement(
+    Collapse,
+    __spreadValues$3({
+      accordion: false,
+      items: [item],
+      defaultActiveKey: defaultOpen ? item.key : void 0,
+      activeKey: open ? item.key : void 0,
       collapsible: disabled ? "disabled" : collapsible,
       expandIcon: (expandIcon == null ? void 0 : expandIcon.key) ? ({ isActive }) => /* @__PURE__ */ React.createElement(
         "div",
@@ -5584,105 +5825,176 @@ function AntdCollapse(props) {
     }, rest)
   );
 }
-const collapseHelpers = {
+const accordionHelpers = {
+  states: {
+    activeKey: {
+      onChangeArgsToValue: (activeKeys) => activeKeys[0]
+    }
+  }
+};
+const singleCollapseHelpers = {
   states: {
-    activeKeys: {
-      onChangeArgsToValue: (activeKeys) => activeKeys.map((key) => ({ key }))
+    open: {
+      onChangeArgsToValue: (activeKeys) => activeKeys.length > 0
     }
   }
 };
+const commonAccordionProps = {
+  bordered: {
+    type: "boolean",
+    defaultValue: true,
+    description: `Display border around accordion `
+  },
+  disabled: {
+    type: "boolean",
+    description: "Disable the toggle behaviour of panels"
+  },
+  expandIcon: {
+    type: "slot",
+    hidePlaceholder: true
+  },
+  rotateCustomExpandIcon: {
+    type: "boolean",
+    description: "Enable rotation of custom expand icon when panel is expanded",
+    advanced: true,
+    hidden: (ps) => {
+      var _a;
+      return !((_a = ps.expandIcon) == null ? void 0 : _a.key);
+    }
+  },
+  expandIconPosition: {
+    type: "choice",
+    defaultValueHint: "start",
+    description: `Set expand icon position`,
+    options: ["start", "end"]
+  },
+  ghost: {
+    type: "boolean",
+    description: `Make the accordion borderless and its background transparent`
+  },
+  size: {
+    type: "choice",
+    defaultValueHint: "middle",
+    description: `Set the size of accordion`,
+    options: ["large", "middle", "small"]
+  },
+  onChange: {
+    type: "eventHandler",
+    argTypes: [{ name: "activeIds", type: "object" }]
+  }
+};
+const commonAccordionItemProps = {
+  label: {
+    type: "slot",
+    displayName: "Header Content",
+    defaultValue: "Collapse Header",
+    hidePlaceholder: true
+  },
+  extra: {
+    type: "slot",
+    hidePlaceholder: true
+  },
+  showArrow: {
+    type: "boolean",
+    defaultValue: true,
+    description: `Whether to show animating arrow alongside header text`,
+    advanced: true
+  },
+  headerClass: {
+    type: "class",
+    displayName: "Header"
+  },
+  children: __spreadProps$1(__spreadValues$3({
+    type: "slot",
+    hidePlaceholder: true
+  }, { mergeWithParent: true }), {
+    defaultValue: "Collapsible text..."
+  })
+};
+const commonProps = {
+  collapsible: {
+    displayName: "Toggle Area",
+    type: "choice",
+    defaultValueHint: "header",
+    description: `Specify the element that can be clicked to toggle a panel`,
+    options: ["header", "icon"],
+    advanced: true,
+    hidden: (ps) => Boolean(ps.disabled)
+  },
+  destroyInactivePanel: {
+    type: "boolean",
+    description: `Destroy/Unmount panel if inactive`,
+    advanced: true
+  },
+  forceRender: {
+    type: "boolean",
+    description: `Force rendering of content in the panel, instead of lazy rendering it.`,
+    advanced: true
+  }
+};
 function registerCollapse(loader) {
-  registerComponentHelper(loader, AntdCollapse, {
-    name: collapseComponentName,
+  registerComponentHelper(loader, AntdSingleCollapse, {
+    name: singleCollapseComponentName,
     displayName: "Collapse",
+    description: "Accordion, but with a single collapsible block.",
     defaultStyles: {
       width: "stretch"
     },
-    props: {
-      accordion: {
-        type: "boolean",
-        description: `Allow only one panel to be expanded at a time`
-      },
-      activeKeys: {
+    props: __spreadValues$3(__spreadValues$3(__spreadValues$3({
+      open: {
         editOnly: true,
-        displayName: "Active Panel IDs",
-        uncontrolledProp: "defaultActiveKeys",
-        type: "array",
-        description: `A list of panel IDs that are expanded by default.`,
-        advanced: true,
-        itemType: {
-          type: "object",
-          nameFunc: (_item) => `ID: ${_item.key}`,
-          fields: {
-            key: {
-              type: "number",
-              displayName: "Panel ID"
-            }
-          }
-        }
-      },
-      bordered: {
-        type: "boolean",
-        defaultValue: true,
-        description: `Display border around collapse `
-      },
-      disabled: {
-        type: "boolean",
-        description: "Disable the toggle behaviour of panels"
-      },
-      collapsible: {
-        type: "choice",
-        defaultValueHint: "header",
-        description: `Specify the element that can be clicked to toggle a panel`,
-        options: ["header", "icon"],
-        hidden: (ps) => Boolean(ps.disabled)
-      },
-      destroyInactivePanel: {
-        type: "boolean",
-        advanced: true,
-        description: `Destroy/Unmount inactive panels`
-      },
-      expandIcon: {
-        type: "slot",
-        hidePlaceholder: true
-      },
-      rotateCustomExpandIcon: {
-        type: "boolean",
-        description: "Enable rotation of custom expand icon when panel is expanded",
-        advanced: true,
-        hidden: (ps) => {
-          var _a;
-          return !((_a = ps.expandIcon) == null ? void 0 : _a.key);
-        }
-      },
-      expandIconPosition: {
-        type: "choice",
-        defaultValueHint: "start",
-        description: `Set expand icon position`,
-        options: ["start", "end"]
-      },
-      ghost: {
+        displayName: "Open",
+        uncontrolledProp: "defaultOpen",
         type: "boolean",
-        description: `Make the collapse borderless and its background transparent`
-      },
-      size: {
-        type: "choice",
-        defaultValueHint: "middle",
-        description: `Set the size of collapse`,
-        options: ["large", "middle", "small"]
+        description: `Default open state of the collapse block`
+      }
+    }, commonProps), commonAccordionItemProps), commonAccordionProps),
+    states: {
+      open: __spreadValues$3({
+        type: "writable",
+        valueProp: "open",
+        onChangeProp: "onChange",
+        variableType: "boolean"
+      }, singleCollapseHelpers.states.open)
+    },
+    componentHelpers: {
+      helpers: accordionHelpers,
+      importName: "accordionHelpers",
+      importPath: "@plasmicpkgs/antd5/skinny/registerCollapse"
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerCollapse",
+    importName: "AntdSingleCollapse"
+  });
+  registerComponentHelper(loader, AntdAccordion, {
+    name: accordionComponentName,
+    displayName: "Accordion",
+    defaultStyles: {
+      width: "stretch"
+    },
+    props: __spreadValues$3(__spreadValues$3({
+      activeKey: {
+        editOnly: true,
+        displayName: "Active panel ID",
+        uncontrolledProp: "defaultActiveKey",
+        type: "string",
+        description: `ID of Accordion item that is expanded by default.`,
+        advanced: true
       },
-      items: __spreadProps(__spreadValues({
+      items: __spreadProps$1(__spreadValues$3({
         type: "slot",
         hidePlaceholder: true,
-        allowedComponents: [collapseItemComponentName]
+        allowedComponents: [accordionItemComponentName]
       }, { mergeWithParent: true }), {
         defaultValue: [
           {
             type: "component",
-            name: collapseItemComponentName,
+            name: accordionItemComponentName,
             props: {
               id: 1,
-              label: "First Item",
+              label: {
+                type: "text",
+                value: "First Item"
+              },
               children: {
                 type: "text",
                 value: "First Children"
@@ -5691,10 +6003,13 @@ function registerCollapse(loader) {
           },
           {
             type: "component",
-            name: collapseItemComponentName,
+            name: accordionItemComponentName,
             props: {
               id: 2,
-              label: "Second Item",
+              label: {
+                type: "text",
+                value: "Second Item"
+              },
               children: {
                 type: "text",
                 value: "Second Children"
@@ -5702,73 +6017,823 @@ function registerCollapse(loader) {
             }
           }
         ]
-      }),
-      onChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "activeIds", type: "object" }]
-      }
-    },
+      })
+    }, commonProps), commonAccordionProps),
     states: {
-      activePanelIds: __spreadValues({
+      activePanelId: __spreadValues$3({
         type: "writable",
-        valueProp: "activeKeys",
+        valueProp: "activeKey",
         onChangeProp: "onChange",
         variableType: "array"
-      }, collapseHelpers.states.activeKeys)
+      }, accordionHelpers.states.activeKey)
     },
     componentHelpers: {
-      helpers: collapseHelpers,
-      importName: "collapseHelpers",
+      helpers: accordionHelpers,
+      importName: "accordionHelpers",
       importPath: "@plasmicpkgs/antd5/skinny/registerCollapse"
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerCollapse",
-    importName: "AntdCollapse"
+    importName: "AntdAccordion"
   });
-  registerComponentHelper(loader, AntdCollapseItem, {
-    name: collapseItemComponentName,
-    displayName: "Collapse Item",
-    props: {
+  registerComponentHelper(loader, AntdAccordionItem, {
+    name: accordionItemComponentName,
+    displayName: "Accordion Item",
+    props: __spreadValues$3(__spreadValues$3({
       id: {
         type: "string",
-        description: `Unique identifier for this time`
-      },
-      label: {
-        type: "string",
-        description: `Text inside the header`,
-        displayName: "Header Content"
+        description: `Unique identifier for this item`
+      }
+    }, commonProps), commonAccordionItemProps),
+    importPath: "@plasmicpkgs/antd5/skinny/registerCollapse",
+    importName: "AntdAccordionItem",
+    parentComponentName: accordionComponentName
+  });
+}
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function AntdPopover(props) {
+  const _a = props, { overlayClassName, popoverScopeClassName, contentText, content } = _a, rest = __objRest$2(_a, ["overlayClassName", "popoverScopeClassName", "contentText", "content"]);
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    __spreadValues$2({
+      content: content || contentText,
+      overlayClassName: `${overlayClassName} ${popoverScopeClassName}`
+    }, rest)
+  );
+}
+function registerPopover(loader) {
+  registerComponentHelper(loader, AntdPopover, {
+    name: "plasmic-antd5-popover",
+    displayName: "Popover",
+    isAttachment: true,
+    props: {
+      open: {
+        type: "boolean",
+        editOnly: true,
+        uncontrolledProp: "defaultOpen",
+        description: "Default open state of the popover"
       },
-      showArrow: {
+      arrow: {
         type: "boolean",
         defaultValue: true,
-        description: `Whether to show animating arrow alongside header text`,
         advanced: true
       },
-      destroyInactivePanel: {
+      children: {
+        type: "slot",
+        defaultValue: "This text element is wrapped in a Popover component",
+        mergeWithParent: true
+      },
+      popoverScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "popover"
+      },
+      popoverContentClassName: {
+        type: "class",
+        displayName: "Popover content",
+        selectors: [
+          {
+            selector: ":popover.ant-popover .ant-popover-inner",
+            label: "Base"
+          }
+        ]
+      },
+      overlayClassName: {
+        type: "class",
+        displayName: "Overlay"
+      },
+      content: {
+        type: "slot",
+        displayName: "Popover contents",
+        defaultValue: "Popover contents",
+        hidePlaceholder: true
+      },
+      /**
+       *  NOTE: contentText ensures that the popover shows as a custom behaviour without modifications 
+       * (when a random element is given a custom behaviour of Popover, the props of type "slot" do not receive any default value.
+       * Therefore we use the contentText which has a string default value, so that the popover shows with at least something)
+       *  */
+      contentText: {
+        type: "string",
+        displayName: "Popover contents",
+        description: "What gets shown inside the popover on hover",
+        defaultValue: "Popover contents"
+      },
+      title: {
+        type: "slot",
+        displayName: "Popover title",
+        hidePlaceholder: true,
+        defaultValue: "Popover title"
+      },
+      color: {
+        type: "color",
+        description: "Popover fill color"
+      },
+      trigger: {
+        type: "choice",
+        options: ["hover", "focus", "click"],
+        defaultValueHint: "hover",
+        advanced: true
+      },
+      placement: {
+        type: "choice",
+        options: [
+          "topLeft",
+          "top",
+          "topRight",
+          "leftTop",
+          "left",
+          "leftBottom",
+          "rightTop",
+          "right",
+          "rightBottom",
+          "bottomLeft",
+          "bottom",
+          "bottomRight"
+        ],
+        description: "Default placement of popover",
+        defaultValueHint: "top"
+      },
+      mouseEnterDelay: {
+        type: "number",
+        description: "Delay in seconds, before popover is shown on mouse enter",
+        defaultValue: 0,
+        advanced: true
+      },
+      mouseLeaveDelay: {
+        type: "number",
+        description: "Delay in seconds, before popover is hidden on mouse leave",
+        defaultValue: 0,
+        advanced: true
+      },
+      onOpenChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "open", type: "boolean" }],
+        advanced: true
+      }
+    },
+    states: {
+      open: {
+        type: "writable",
+        valueProp: "open",
+        onChangeProp: "onOpenChange",
+        variableType: "boolean"
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerPopover",
+    importName: "AntdPopover"
+  });
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const tabsComponentName = "plasmic-antd5-tabs";
+const tabItemComponentName = "plasmic-antd5-tab-item";
+const AntdTabItem = ({ children }) => {
+  return /* @__PURE__ */ React.createElement("div", null, children);
+};
+function getTabItems(items) {
+  var _a;
+  if ((items == null ? void 0 : items.type) === AntdTabItem) {
+    return [items];
+  }
+  if (Array.isArray((_a = items == null ? void 0 : items.props) == null ? void 0 : _a.children)) {
+    return items.props.children.filter((item) => item.type === AntdTabItem);
+  }
+  return [];
+}
+function AntdTabs(props) {
+  const _a = props, {
+    items: itemsRaw,
+    animated,
+    animateTabBar,
+    animateTabContent,
+    tabBarExtraContentLeft,
+    tabBarExtraContentRight,
+    sticky,
+    stickyOffset,
+    tabBarBackground,
+    className,
+    tabPosition,
+    tabsScopeClassName,
+    tabsDropdownScopeClassName
+  } = _a, rest = __objRest$1(_a, [
+    "items",
+    "animated",
+    "animateTabBar",
+    "animateTabContent",
+    "tabBarExtraContentLeft",
+    "tabBarExtraContentRight",
+    "sticky",
+    "stickyOffset",
+    "tabBarBackground",
+    "className",
+    "tabPosition",
+    "tabsScopeClassName",
+    "tabsDropdownScopeClassName"
+  ]);
+  const animationProp = useMemo(
+    () => animated ? {
+      inkBar: animateTabBar,
+      tabPane: animateTabContent
+    } : false,
+    [animateTabBar, animateTabContent, animated]
+  );
+  const items = useMemo(() => {
+    if (!React.isValidElement(itemsRaw))
+      return [];
+    const tabItems = getTabItems(itemsRaw);
+    return tabItems.map((currentItem) => {
+      if (!React.isValidElement(currentItem) || !React.isValidElement(currentItem.props.children)) {
+        return null;
+      }
+      return __spreadProps(__spreadValues$1({}, currentItem.props), {
+        key: currentItem.key,
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, currentItem.props.children)
+      });
+    }).filter((i) => i != null);
+  }, [itemsRaw]);
+  return /* @__PURE__ */ React.createElement(
+    Tabs,
+    __spreadValues$1({
+      className: `${className} ${tabsScopeClassName}`,
+      popupClassName: tabsDropdownScopeClassName,
+      tabBarExtraContent: {
+        left: /* @__PURE__ */ React.createElement(React.Fragment, null, tabBarExtraContentLeft),
+        right: /* @__PURE__ */ React.createElement(React.Fragment, null, tabBarExtraContentRight)
+      },
+      tabPosition,
+      renderTabBar: sticky && tabPosition === "top" ? (props2, DefaultTabBar) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            zIndex: 1,
+            position: "sticky",
+            top: stickyOffset || 0
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          DefaultTabBar,
+          __spreadProps(__spreadValues$1({}, props2), {
+            style: { backgroundColor: tabBarBackground }
+          })
+        )
+      ) : void 0,
+      animated: animationProp,
+      items
+    }, rest)
+  );
+}
+function OutlineMessage() {
+  return /* @__PURE__ */ React.createElement("div", null, "* To re-arrange tab panes, use the Outline panel");
+}
+function getActiveKeyOptions(props) {
+  const options = /* @__PURE__ */ new Set();
+  traverseReactEltTree(getTabItems(props.items), (elt) => {
+    if ((elt == null ? void 0 : elt.type) === AntdTabItem && typeof (elt == null ? void 0 : elt.key) === "string") {
+      options.add(elt.key);
+    }
+  });
+  return Array.from(options.keys());
+}
+function registerTabs(loader) {
+  registerComponentHelper(loader, AntdTabs, {
+    name: tabsComponentName,
+    displayName: "Tabs",
+    defaultStyles: {
+      width: "stretch",
+      overflow: "scroll"
+    },
+    props: {
+      activeKey: {
+        editOnly: true,
+        displayName: "Active tab key",
+        uncontrolledProp: "defaultActiveKey",
+        type: "choice",
+        description: `Initial active tab's key`,
+        options: getActiveKeyOptions
+      },
+      animated: {
+        type: "boolean",
+        defaultValue: true,
+        description: "Change tabs with animation"
+      },
+      animateTabBar: {
+        type: "boolean",
+        defaultValue: true,
+        description: "Animate the tab bar when switching tabs",
+        hidden: (ps) => !ps.animated
+      },
+      animateTabContent: {
+        type: "boolean",
+        defaultValue: false,
+        description: "Fade-in tab content when switching tabs",
+        hidden: (ps) => !ps.animated
+      },
+      centered: {
+        type: "boolean",
+        description: "Center-align the tab bar"
+      },
+      type: {
+        type: "choice",
+        defaultValueHint: "line",
+        options: ["line", "card"],
+        description: "Basic style of tabs"
+      },
+      items: __spreadProps(__spreadValues$1({
+        type: "slot",
+        hidePlaceholder: true,
+        allowedComponents: [tabItemComponentName]
+      }, { mergeWithParent: true }), {
+        // to make the tab items selectable from the components outline pane in Plasmic Studio.
+        defaultValue: [
+          {
+            type: "component",
+            name: tabItemComponentName,
+            props: {
+              key: "1",
+              label: {
+                type: "text",
+                value: "First Item"
+              },
+              children: {
+                type: "text",
+                value: "First Children"
+              }
+            }
+          },
+          {
+            type: "component",
+            name: tabItemComponentName,
+            props: {
+              key: "2",
+              label: {
+                type: "text",
+                value: "Second Item"
+              },
+              children: {
+                type: "text",
+                value: "Second Children"
+              }
+            }
+          }
+        ]
+      }),
+      size: {
+        type: "choice",
+        defaultValueHint: "middle",
+        options: ["large", "middle", "small"],
+        description: "Preset tab bar size"
+      },
+      tabBarExtraContentLeft: {
+        type: "slot",
+        displayName: "Extra content on left side",
+        hidePlaceholder: true
+      },
+      tabBarExtraContentRight: {
+        type: "slot",
+        displayName: "Extra content on right side",
+        hidePlaceholder: true
+      },
+      tabBarGutter: {
+        type: "number",
+        displayName: "Tab gap",
+        description: "Gap (in pixels) between tabs",
+        advanced: true
+      },
+      tabPosition: {
+        type: "choice",
+        defaultValueHint: "top",
+        options: ["top", "right", "bottom", "left"],
+        description: "Position of tabs"
+      },
+      destroyInactiveTabPane: {
         type: "boolean",
-        description: `Destroy/Unmount panel if inactive`,
+        description: `Destroy/Unmount inactive tab pane when changing tab`,
         advanced: true
       },
+      sticky: {
+        type: "boolean",
+        advanced: true,
+        description: "Stick tab bar to the top of the page when scrolling.",
+        defaultValue: false,
+        hidden: (ps) => ps.tabPosition !== "top"
+      },
+      stickyOffset: {
+        type: "number",
+        advanced: true,
+        description: "Distance (in pixels) between the sticky tab bar and the top of the page as you scroll.",
+        hidden: (ps) => ps.tabPosition !== "top" || !ps.sticky
+      },
+      tabBarBackground: {
+        type: "color",
+        advanced: true,
+        defaultValue: "#FFF",
+        hidden: (ps) => ps.tabPosition !== "top" || !ps.sticky
+      },
+      tabsScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "tabs"
+      },
+      tabBarClassName: {
+        type: "class",
+        displayName: "Tab bar",
+        selectors: [
+          {
+            selector: ":tabs.ant-tabs .ant-tabs-nav",
+            label: "Base"
+          }
+        ]
+      },
+      tabsDropdownScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "tabsDropdown"
+      },
+      tabsDropdownClassName: {
+        type: "class",
+        displayName: "Overflow tabs menu",
+        selectors: [
+          {
+            selector: ":tabsDropdown.ant-tabs-dropdown .ant-tabs-dropdown-menu",
+            label: "Base"
+          }
+        ]
+      },
+      onChange: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [{ name: "activeKey", type: "string" }]
+      },
+      onTabClick: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [
+          { name: "tabKey", type: "string" },
+          { name: "mouseEvent", type: "object" }
+        ]
+      },
+      onTabScroll: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [{ name: "scrollInfo", type: "object" }]
+      }
+    },
+    states: {
+      activeKey: {
+        type: "writable",
+        valueProp: "activeKey",
+        onChangeProp: "onChange",
+        variableType: "text"
+      }
+    },
+    actions: [
+      // {
+      //   type: "custom-action",
+      //   control: NavigateTabs,
+      // },
+      {
+        type: "button-action",
+        label: "Add new tab",
+        onClick: ({ componentProps, studioOps }) => {
+          const generateNewKey = () => {
+            const keysSet = /* @__PURE__ */ new Set();
+            traverseReactEltTree(getTabItems(componentProps.items), (elt) => {
+              if ((elt == null ? void 0 : elt.type) === AntdTabItem && typeof (elt == null ? void 0 : elt.key) === "string") {
+                keysSet.add(elt.key);
+              }
+            });
+            for (let keyCandidate = 1; keyCandidate <= keysSet.size + 1; keyCandidate++) {
+              const strKey = keyCandidate.toString();
+              if (!keysSet.has(strKey)) {
+                return strKey;
+              }
+            }
+            return void 0;
+          };
+          const tabKey = generateNewKey();
+          studioOps.appendToSlot(
+            {
+              type: "component",
+              name: tabItemComponentName,
+              props: {
+                key: tabKey,
+                label: {
+                  type: "text",
+                  value: `Tab Label ${tabKey}`
+                },
+                children: {
+                  type: "text",
+                  value: `Tab Children ${tabKey}`
+                }
+              }
+            },
+            "items"
+          );
+          studioOps.updateProps({ activeKey: tabKey });
+        }
+      },
+      {
+        type: "button-action",
+        label: "Delete current tab",
+        onClick: ({ componentProps, studioOps }) => {
+          if (componentProps.activeKey) {
+            const tabPanes = [];
+            traverseReactEltTree(getTabItems(componentProps.items), (elt) => {
+              if ((elt == null ? void 0 : elt.type) === AntdTabItem && typeof (elt == null ? void 0 : elt.key) === "string") {
+                tabPanes.push(elt.key);
+              }
+            });
+            const activeKey = componentProps.activeKey;
+            const currTabPos = tabPanes.findIndex((tabKey) => {
+              return tabKey === activeKey;
+            });
+            if (currTabPos !== -1) {
+              studioOps.removeFromSlotAt(currTabPos, "items");
+              if (tabPanes.length - 1 > 0) {
+                const prevTabPos = (currTabPos - 1 + tabPanes.length) % tabPanes.length;
+                studioOps.updateProps({ activeKey: tabPanes[prevTabPos] });
+              }
+            }
+          }
+        }
+      },
+      {
+        type: "custom-action",
+        control: OutlineMessage
+      }
+    ],
+    importPath: "@plasmicpkgs/antd5/skinny/registerTabs",
+    importName: "AntdTabs"
+  });
+  registerComponentHelper(loader, AntdTabItem, {
+    name: tabItemComponentName,
+    displayName: "Tab Item",
+    props: {
+      disabled: {
+        type: "boolean",
+        description: "Disable this tab"
+      },
       forceRender: {
         type: "boolean",
-        description: `Force rendering of content in the panel, instead of lazy rendering it.`,
+        description: `Force render of content in the tab, not lazy render after clicking on the tab`,
         advanced: true
       },
-      extra: {
+      key: {
+        type: "string",
+        description: `Unique identifier for this tab`,
+        displayName: "Tab key"
+      },
+      label: {
+        type: "slot",
+        displayName: "Tab title",
+        defaultValue: "Tab"
+      },
+      children: {
         type: "slot",
         hidePlaceholder: true
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerTabs",
+    importName: "AntdTabItem",
+    parentComponentName: tabsComponentName
+  });
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function AntdRate(props) {
+  const _a = props, { character, count, tooltips, multiCharacter, symbols } = _a, rest = __objRest(_a, ["character", "count", "tooltips", "multiCharacter", "symbols"]);
+  const symbolsProp = useMemo(
+    () => {
+      var _a2, _b, _c;
+      return ((_c = Array.isArray((_a2 = symbols == null ? void 0 : symbols.props) == null ? void 0 : _a2.children) ? (_b = symbols == null ? void 0 : symbols.props) == null ? void 0 : _b.children : [symbols]) == null ? void 0 : _c.filter((c) => React.isValidElement(c)).map((c) => /* @__PURE__ */ React.createElement(React.Fragment, null, c))) || [];
+    },
+    [symbols]
+  );
+  const countProp = useMemo(() => {
+    if (!multiCharacter)
+      return count;
+    return symbolsProp == null ? void 0 : symbolsProp.length;
+  }, [count, multiCharacter, symbolsProp == null ? void 0 : symbolsProp.length]);
+  const characterProp = useMemo(() => {
+    if (!multiCharacter)
+      return character || void 0;
+    return (symbolsProp == null ? void 0 : symbolsProp.length) ? ({ index }) => symbolsProp[index] : character || void 0;
+  }, [character, multiCharacter, symbolsProp]);
+  return /* @__PURE__ */ React.createElement(
+    Rate,
+    __spreadValues({
+      tooltips: tooltips == null ? void 0 : tooltips.map((t) => t == null ? void 0 : t.label),
+      count: countProp,
+      character: characterProp
+    }, rest)
+  );
+}
+const rateComponentName = "plasmic-antd5-rate";
+function registerRate(loader) {
+  registerComponentHelper(loader, AntdRate, {
+    name: rateComponentName,
+    displayName: "Rate",
+    props: {
+      allowClear: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: true,
+        description: "Clear the rating when the user clicks again"
+      },
+      allowHalf: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: false,
+        description: "Allow fractional rating."
       },
-      collapsible: {
+      autoFocus: {
         type: "boolean",
+        description: "Focus when component is rendered",
+        defaultValueHint: false,
         advanced: true
       },
-      children: {
+      character: {
         type: "slot",
-        hidePlaceholder: true
+        displayName: "Symbol",
+        hidePlaceholder: true,
+        hidden: (ps) => Boolean(ps.multiCharacter)
+      },
+      multiCharacter: {
+        type: "boolean",
+        displayName: "Multi Symbol",
+        description: "Allow different symbols for rating. (You can add these symbols in the component slots if this is enabled)",
+        advanced: true
+      },
+      symbols: {
+        type: "slot",
+        displayName: "Symbols",
+        hidePlaceholder: true,
+        defaultValue: ["1", "2", "3", "4", "5"],
+        hidden: (ps) => !ps.multiCharacter
+      },
+      count: {
+        type: "number",
+        description: "Rating count",
+        defaultValueHint: 5,
+        advanced: true,
+        hidden: (ps) => Boolean(ps.multiCharacter)
+      },
+      value: {
+        type: "number",
+        editOnly: true,
+        uncontrolledProp: "defaultValue",
+        description: "Default rating",
+        defaultValueHint: 0
+      },
+      disabled: {
+        type: "boolean",
+        description: "Read-only rating",
+        defaultValueHint: false
+      },
+      tooltips: {
+        type: "array",
+        description: "Rating labels",
+        displayName: "Labels",
+        advanced: true,
+        hidden: (ps) => !ps.count,
+        itemType: {
+          type: "object",
+          fields: {
+            label: "string"
+          },
+          nameFunc: (value) => value.label
+        },
+        validator: (value, ps) => {
+          if (!ps.count)
+            return true;
+          if (!Array.isArray(value) || value.length === 0)
+            return true;
+          if (value.length < ps.count)
+            return `You need ${ps.count - value.length} more labels`;
+          if (value.length > ps.count)
+            return "You have too many labels. Some labels will not be used";
+          return true;
+        }
+      },
+      onChange: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [{ name: "value", type: "number" }]
+      },
+      onBlur: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: []
+      },
+      onFocus: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: []
+      },
+      onHoverChange: {
+        type: "eventHandler",
+        advanced: true,
+        description: "Callback when an item is hovered",
+        argTypes: []
+      },
+      onKeyDown: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [{ name: "event", type: "object" }]
       }
     },
-    importPath: "@plasmicpkgs/antd5/skinny/registerCollapse",
-    importName: "AntdCollapseItem",
-    parentComponentName: collapseComponentName
+    states: {
+      value: {
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "number"
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerRate",
+    importName: "AntdRate"
   });
 }
 
@@ -5803,6 +6868,9 @@ function registerAll(loader) {
   registerTree(loader);
   registerDirectoryTree(loader);
   registerCollapse(loader);
+  registerPopover(loader);
+  registerTabs(loader);
+  registerRate(loader);
 }
 const componentNameToInputType = {
   [inputComponentName]: InputType.Text,