easy-email-extensions 4.4.4 → 4.6.0

package/lib/index2.js

@@ -56,7 +56,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, useImperativeHandle, PureComponent, useCallback, useReducer, createRef, Fragment, createElement, Suspense } from "react";
-import { IconFont, useEditorProps, useRefState, Stack as Stack$4, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, DATA_CONTENT_EDITABLE_IDX, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, DATA_CONTENT_EDITABLE_IDX, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -6669,7 +6669,7 @@ function isObject$e(obj) {
 function isString$1(obj) {
   return opt$1.call(obj) === "[object String]";
 }
-function isNumber$1(obj) {
+function isNumber$2(obj) {
   return opt$1.call(obj) === "[object Number]" && obj === obj;
 }
 function isUndefined(obj) {
@@ -7829,7 +7829,7 @@ var Notification = function(_super) {
     if (options2.prefixCls) {
       prefixCls = options2.prefixCls;
     }
-    if (isNumber$1(options2.duration)) {
+    if (isNumber$2(options2.duration)) {
       duration = options2.duration;
     }
     if (options2.getContainer && options2.getContainer() !== container$1) {
@@ -9621,7 +9621,7 @@ function autoSizeTextAreaHeight(autoSize, node) {
     if (minRows || maxRows) {
       mirrorTextArea.value = "";
       var singleRowHeight = mirrorTextArea.scrollHeight - paddingSize;
-      if (isNumber$1(minRows)) {
+      if (isNumber$2(minRows)) {
         minHeight = singleRowHeight * minRows;
         if (boxSizing === "border-box") {
           minHeight += paddingSize;
@@ -9629,7 +9629,7 @@ function autoSizeTextAreaHeight(autoSize, node) {
         }
         mirrorTextAreaHeight = Math.max(mirrorTextAreaHeight, minHeight);
       }
-      if (isNumber$1(maxRows)) {
+      if (isNumber$2(maxRows)) {
         maxHeight = singleRowHeight * maxRows;
         if (boxSizing === "border-box") {
           maxHeight += paddingSize;
@@ -13123,7 +13123,7 @@ var VirtualList = React__default.forwardRef(function(props, ref) {
   useComputeVirtualItemHeight(refItemHeightMap);
   var itemCount = data.length;
   var itemHeight = propItemHeight || refItemHeightMap.current[KEY_VIRTUAL_ITEM_HEIGHT] || DEFAULT_VIRTUAL_ITEM_HEIGHT;
-  var viewportHeight = isNumber$1(styleListMaxHeight) ? styleListMaxHeight : stateHeight;
+  var viewportHeight = isNumber$2(styleListMaxHeight) ? styleListMaxHeight : stateHeight;
   var itemCountVisible = Math.ceil(viewportHeight / itemHeight);
   var itemTotalHeight = itemHeight * itemCount;
   var isVirtual = threshold !== null && itemCount >= threshold && itemTotalHeight > viewportHeight;
@@ -13446,7 +13446,7 @@ var VirtualList = React__default.forwardRef(function(props, ref) {
     return null;
   };
   return React__default.createElement(ResizeObserver, { onResize: function() {
-    if (refList.current && !isNumber$1(styleListMaxHeight)) {
+    if (refList.current && !isNumber$2(styleListMaxHeight)) {
       var clientHeight = refList.current.clientHeight;
       setStateHeight(clientHeight);
     }
@@ -13956,7 +13956,7 @@ function flatChildren(_a, _b, _c) {
   var extendChildren = function(arr, origin) {
     if (origin && isArray$c(arr) && arr.length) {
       arr.forEach(function(option) {
-        option = isString$1(option) || isNumber$1(option) ? {
+        option = isString$1(option) || isNumber$2(option) ? {
           label: option,
           value: option
         } : option;
@@ -16636,7 +16636,7 @@ function SplitGroup(props, ref) {
   };
   function formatSize(size) {
     var totalPX = isHorizontal ? wrapperRef.current.offsetWidth : wrapperRef.current.offsetHeight;
-    if (!size || isNumber$1(size) && size < 0) {
+    if (!size || isNumber$2(size) && size < 0) {
       return 0;
     }
     var percent = isString$1(size) ? parseFloat(size) / totalPX : size;
@@ -16983,7 +16983,7 @@ function ResizeBox(baseProps, ref) {
       return __assign$X(__assign$X({}, pre), (_a2 = {}, _a2["padding" + styleDirection] = size, _a2));
     });
   }
-  var wrapperStyles = __assign$X(__assign$X(__assign$X(__assign$X({}, paddingStyles), style || {}), isNumber$1(width) ? { width } : {}), isNumber$1(height) ? { height } : {});
+  var wrapperStyles = __assign$X(__assign$X(__assign$X(__assign$X({}, paddingStyles), style || {}), isNumber$2(width) ? { width } : {}), isNumber$2(height) ? { height } : {});
   var Tag2 = component;
   return React__default.createElement(Tag2, { style: wrapperStyles, className: classNames, ref: wrapperRef }, children, directions.map(function(direction) {
     if (allDirections.indexOf(direction) !== -1) {
@@ -17144,7 +17144,7 @@ function Sider(props, ref) {
   var _g = __read$L(useMergeValue(false, {
     value: props.collapsed
   }), 2), collapsed = _g[0], setCollapsed = _g[1];
-  var propsWidth = isNumber$1(width) ? width + "px" : String(width);
+  var propsWidth = isNumber$2(width) ? width + "px" : String(width);
   var _h = __read$L(useState(propsWidth), 2), siderWidth = _h[0], setSiderWidth = _h[1];
   var refResponsiveHandlerToken = useRef(null);
   var refStateForResponsiveHandler = useRef(null);
@@ -17177,7 +17177,7 @@ function Sider(props, ref) {
     };
   }, []);
   useEffect(function() {
-    var _collapsedWidth = isNumber$1(collapsedWidth) ? collapsedWidth + "px" : String(collapsedWidth);
+    var _collapsedWidth = isNumber$2(collapsedWidth) ? collapsedWidth + "px" : String(collapsedWidth);
     setSiderWidth(collapsed ? _collapsedWidth : propsWidth);
   }, [collapsed, propsWidth, collapsedWidth]);
   var resizable = resizeDirections && isArray$c(resizeDirections) || ((_b = resizeBoxProps.directions) === null || _b === void 0 ? void 0 : _b.length);
@@ -18519,7 +18519,7 @@ function DotLoading(props) {
   var sizeNumber = props.size ? parseInt(String(props.size)) : 0;
   return React__default.createElement("div", { className: prefixCls2 + "-list", style: {
     height: props.size,
-    width: isNumber$1(sizeNumber) && sizeNumber > 0 ? sizeNumber * 7 : ""
+    width: isNumber$2(sizeNumber) && sizeNumber > 0 ? sizeNumber * 7 : ""
   } }, __spreadArray$h([], __read$G(new Array(5)), false).map(function(_, index2) {
     return React__default.createElement("div", { key: index2, className: prefixCls2, style: dotStyle });
   }));
@@ -20946,7 +20946,7 @@ function isObject(obj) {
 function isString(obj) {
   return opt.call(obj) === "[object String]";
 }
-function isNumber(obj) {
+function isNumber$1(obj) {
   return opt.call(obj) === "[object Number]" && obj === obj;
 }
 function isBoolean(obj) {
@@ -21163,7 +21163,7 @@ var StringValidator = /* @__PURE__ */ function(Base3) {
 var NumberValidator = /* @__PURE__ */ function(Base3) {
   function NumberValidator2(obj, options2) {
     Base3.call(this, obj, Object.assign(Object.assign({}, options2), { type: "number" }));
-    this.validate(options2 && options2.strict ? isNumber(this.obj) : true, this.getValidateMsg("type.number"));
+    this.validate(options2 && options2.strict ? isNumber$1(this.obj) : true, this.getValidateMsg("type.number"));
   }
   if (Base3)
     NumberValidator2.__proto__ = Base3;
@@ -22399,7 +22399,7 @@ function Col$1(baseProps, ref) {
     var screenList = { xs, sm, md, lg, xl, xxl };
     Object.keys(screenList).forEach(function(screen) {
       var screenValue = screenList[screen];
-      if (isNumber$1(screenValue)) {
+      if (isNumber$2(screenValue)) {
         if (screenValue >= 0) {
           mergeClassName2[prefixCls3 + "-" + screen + "-" + screenValue] = true;
         }
@@ -23663,7 +23663,7 @@ function InputNumber(baseProps, ref) {
   var prefixCls2 = getPrefixCls("input-number");
   var mergedSize = size || ctxSize;
   var mergedPrecision = function() {
-    if (isNumber$1(precision)) {
+    if (isNumber$2(precision)) {
       var decimal = ("" + step).split(".")[1];
       var stepPrecision = decimal && decimal.length || 0;
       return Math.max(stepPrecision, precision);
@@ -23687,7 +23687,7 @@ function InputNumber(baseProps, ref) {
   }, []);
   var setValue = function(newVal) {
     setInnerValue(newVal);
-    var newValue = isNumber$1(+newVal) ? +newVal : void 0;
+    var newValue = isNumber$2(+newVal) ? +newVal : void 0;
     if (newValue !== value) {
       onChange && onChange(newValue);
     }
@@ -23700,7 +23700,7 @@ function InputNumber(baseProps, ref) {
     var finalValue = Number(changedValue);
     if (!changedValue && changedValue !== 0) {
       finalValue = void 0;
-    } else if (!isNumber$1(finalValue)) {
+    } else if (!isNumber$2(finalValue)) {
       finalValue = changedValue === "-" ? changedValue : "";
     }
     if (finalValue < min) {
@@ -23709,7 +23709,7 @@ function InputNumber(baseProps, ref) {
     if (finalValue > max) {
       finalValue = max;
     }
-    return isNumber$1(finalValue) ? isNumber$1(mergedPrecision) ? Number(toFixed(finalValue, mergedPrecision)) : finalValue : void 0;
+    return isNumber$2(finalValue) ? isNumber$2(mergedPrecision) ? Number(toFixed(finalValue, mergedPrecision)) : finalValue : void 0;
   }, [min, max, mergedPrecision]);
   useEffect(function() {
     return function() {
@@ -23720,7 +23720,7 @@ function InputNumber(baseProps, ref) {
     refHasOperateSincePropValueChanged.current = false;
   }, [props.value]);
   useEffect(function() {
-    var _isOutOfRange = isNumber$1(min) && value < min || isNumber$1(max) && value > max;
+    var _isOutOfRange = isNumber$2(min) && value < min || isNumber$2(max) && value > max;
     if (_isOutOfRange && refHasOperateSincePropValueChanged.current) {
       setValue(getLegalValue(value));
     }
@@ -23753,7 +23753,7 @@ function InputNumber(baseProps, ref) {
     var _value;
     if (isUserInputting) {
       _value = inputValue;
-    } else if (isNumber$1(value) && isNumber$1(mergedPrecision)) {
+    } else if (isNumber$2(value) && isNumber$2(mergedPrecision)) {
       _value = toFixed(value, mergedPrecision);
     } else if (value == null) {
       _value = "";
@@ -23767,7 +23767,7 @@ function InputNumber(baseProps, ref) {
       setIsUserInputting(true);
       var targetValue = value2.trim().replace(/。/g, ".");
       targetValue = parser ? parser(targetValue) : targetValue;
-      if (isNumber$1(+targetValue) || targetValue === "-" || !targetValue || targetValue === ".") {
+      if (isNumber$2(+targetValue) || targetValue === "-" || !targetValue || targetValue === ".") {
         var formatValue2 = getLegalValue(targetValue);
         setInputValue(targetValue);
         setValue(formatValue2);
@@ -25204,7 +25204,7 @@ var SliderButton = function(props) {
     bottom: 12
   }, ref: tooltip, popup: function() {
     return renderTooltipContent(position);
-  }, popupVisible, disabled: tooltipVisible === false, getPopupContainer: getTooltipContainer, position, childrenPrefix: getPrefixCls("tooltip") }, React__default.createElement("div", { className: cs$1(prefixCls2 + "-button", (_a = {}, _a[prefixCls2 + "-button-active"] = isActive, _a)), onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style, role: "slider", "aria-valuemax": props.maxValue, "aria-valuemin": props.minValue, "aria-valuenow": value, "aria-disabled": !!disabled, tabIndex: 0, "aria-valuetext": isString$1(tooltipText) || isNumber$1(tooltipText) ? String(tooltipText) : void 0 }));
+  }, popupVisible, disabled: tooltipVisible === false, getPopupContainer: getTooltipContainer, position, childrenPrefix: getPrefixCls("tooltip") }, React__default.createElement("div", { className: cs$1(prefixCls2 + "-button", (_a = {}, _a[prefixCls2 + "-button-active"] = isActive, _a)), onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style, role: "slider", "aria-valuemax": props.maxValue, "aria-valuemin": props.minValue, "aria-valuenow": value, "aria-disabled": !!disabled, tabIndex: 0, "aria-valuetext": isString$1(tooltipText) || isNumber$2(tooltipText) ? String(tooltipText) : void 0 }));
 };
 var SliderButton$1 = memo(SliderButton);
 var __read$l = globalThis && globalThis.__read || function(o, n) {
@@ -25498,7 +25498,7 @@ function useLegalValue(props) {
       } else {
         console.error("value must be an array when range is true");
       }
-    } else if (isNumber$1(val)) {
+    } else if (isNumber$2(val)) {
       endVal = getLegalValue(val);
     } else {
       console.error("value must be a number when range is false");
@@ -25548,7 +25548,7 @@ function useInterval(props) {
   var _a = props.marks, marks = _a === void 0 ? {} : _a, getIntervalConfig = props.getIntervalConfig, max = props.max, min = props.min;
   var _b = useMemo(function() {
     var markKeys = Object.keys(marks).filter(function(key) {
-      return isNumber$1(+key) && +key >= min && +key <= max;
+      return isNumber$2(+key) && +key >= min && +key <= max;
     }).sort(function(a, b) {
       return +a > +b ? 1 : -1;
     });
@@ -25587,10 +25587,10 @@ function useInterval(props) {
     var customConfig = getIntervalConfig([begin, end], index2) || {};
     var step = customConfig.step;
     var width = rateToFloat(customConfig.width);
-    if (isNumber$1(step) && step) {
+    if (isNumber$2(step) && step) {
       config2.step = step;
     }
-    if (isNumber$1(width) && width) {
+    if (isNumber$2(width) && width) {
       config2.width = width;
     }
     return config2;
@@ -25936,7 +25936,7 @@ function Space(baseProps, ref) {
   var innerAlign = align || (direction === "horizontal" ? "center" : "");
   var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + "-" + direction] = direction, _a[prefixCls2 + "-align-" + innerAlign] = innerAlign, _a[prefixCls2 + "-wrap"] = wrap2, _a[prefixCls2 + "-rtl"] = rtl, _a), className);
   function getMargin(size2) {
-    if (isNumber$1(size2)) {
+    if (isNumber$2(size2)) {
       return size2;
     }
     switch (size2) {
@@ -26604,7 +26604,7 @@ var TabHeader = React__default.forwardRef(function(props, ref) {
           nextOffset_1 = bottomOffset;
         } else if (scrollAlign_1 === "center") {
           nextOffset_1 = topOffset - (diffStyle.top - diffStyle.bottom) / 2;
-        } else if (isNumber$1(scrollAlign_1)) {
+        } else if (isNumber$2(scrollAlign_1)) {
           nextOffset_1 = Math.max(topOffset - scrollAlign_1, bottomOffset);
         }
         return nextOffset_1;
@@ -26623,7 +26623,7 @@ var TabHeader = React__default.forwardRef(function(props, ref) {
           nextOffset_2 = endOffset_1;
         } else if (scrollAlign_2 === "center") {
           nextOffset_2 = startOffset_1 + (diffStyle.left - diffStyle.right) / 2;
-        } else if (isNumber$1(scrollAlign_2)) {
+        } else if (isNumber$2(scrollAlign_2)) {
           nextOffset_2 = Math.min(startOffset_1 + scrollAlign_2, endOffset_1);
         }
         return nextOffset_2;
@@ -26641,7 +26641,7 @@ var TabHeader = React__default.forwardRef(function(props, ref) {
         nextOffset = endOffset;
       } else if (scrollAlign === "center") {
         nextOffset = startOffset - (diffStyle.left - diffStyle.right) / 2;
-      } else if (isNumber$1(scrollAlign)) {
+      } else if (isNumber$2(scrollAlign)) {
         nextOffset = Math.max(startOffset - scrollAlign, endOffset);
       }
       return nextOffset;
@@ -27070,7 +27070,7 @@ var TreeAnimation = function(props) {
     return result;
   }, [childrenPropsList, props._key, expanded]);
   var realHeight = (_a = treeContext.virtualListProps) === null || _a === void 0 ? void 0 : _a.height;
-  realHeight = isNumber$1(realHeight) ? realHeight : 0;
+  realHeight = isNumber$2(realHeight) ? realHeight : 0;
   useEffect(function() {
     if (currentExpandKeys.indexOf(props._key) > -1 && filtedData.length === 0) {
       treeContext.onExpandEnd(props._key);
@@ -29513,7 +29513,7 @@ IconEdit.defaultProps = {
 IconEdit.displayName = "IconEdit";
 var IconEdit$1 = IconEdit;
 var isSingleNode = function(child) {
-  return isString$1(child) || isNumber$1(child);
+  return isString$1(child) || isNumber$2(child);
 };
 function mergedToString(children) {
   var mergedResult = [""];
@@ -29668,7 +29668,7 @@ function useEllipsis(props) {
     onEllipsis && onEllipsis(isEllipsis);
   }, [isEllipsis]);
   var isSimpleNode = function(node) {
-    return isString$1(node) || isNumber$1(node);
+    return isString$1(node) || isNumber$2(node);
   };
   var getTotalLen = function(list2) {
     var total = 0;
@@ -30970,125 +30970,255 @@ function UploadField$1(props) {
     onChange: inputDisabled ? void 0 : (value) => onChange(value)
   });
 }
-const defaultImagesMap$1 = {
-  IMAGE_59: "https://easy-email-m-ryan.vercel.app/images/06ca521d-9728-4de6-a709-1b75a828bfc3-2a9b1224-3d71-43b8-b52f-e7cdcdc9107b.png",
-  AttributePanel_01: "https://easy-email-m-ryan.vercel.app/images/e22f78f2-aa76-408d-ba94-c95c7abe1908-image.png",
-  AttributePanel_02: "https://easy-email-m-ryan.vercel.app/images/3e952a6e-2506-470e-b395-3e0d995157c5.png",
-  AttributePanel_03: "https://easy-email-m-ryan.vercel.app/images/Fi_vI4vyLhTM-Tp6ivq4dR_ieGHk.png"
-};
-ImageManager.add(defaultImagesMap$1);
-function getImg$1(name2) {
-  return ImageManager.get(name2);
+function Select(props) {
+  return /* @__PURE__ */ React__default.createElement(Select$2, __spreadProps(__spreadValues({}, props), {
+    dropdownMenuClassName: "easy-email-overlay",
+    style: lodash.exports.merge({ width: "100%" }, props.style),
+    value: props.value,
+    onChange: props.onChange
+  }), props.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Select$2.Option, {
+    key: index2,
+    value: item2.value
+  }, item2.label)));
 }
-var noop = function() {
-};
-var isBrowser = typeof window !== "undefined";
-var useLocalStorage = function(key, initialValue, options2) {
-  if (!isBrowser) {
-    return [initialValue, noop, noop];
-  }
-  if (!key) {
-    throw new Error("useLocalStorage key may not be falsy");
-  }
-  var deserializer = options2 ? options2.raw ? function(value) {
-    return value;
-  } : options2.deserializer : JSON.parse;
-  var initializer = useRef(function(key2) {
-    try {
-      var serializer = options2 ? options2.raw ? String : options2.serializer : JSON.stringify;
-      var localStorageValue = localStorage.getItem(key2);
-      if (localStorageValue !== null) {
-        return deserializer(localStorageValue);
-      } else {
-        initialValue && localStorage.setItem(key2, serializer(initialValue));
-        return initialValue;
+function RadioGroup(props) {
+  const _a = props, { type, vertical } = _a, rest = __objRest(_a, ["type", "vertical"]);
+  return /* @__PURE__ */ React__default.createElement(Radio.Group, __spreadProps(__spreadValues({}, rest), {
+    style: lodash.exports.merge({ width: "100%" }, rest.style),
+    value: rest.value,
+    onChange: rest.onChange
+  }), /* @__PURE__ */ React__default.createElement(Stack$4, {
+    vertical,
+    spacing: "extraTight"
+  }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Radio, {
+    key: index2,
+    value: item2.value
+  }, item2.label))));
+}
+const parse = (v) => v;
+function enhancer(Component2, changeAdapter, option) {
+  return (props) => {
+    const _a = props, {
+      name: name2,
+      validate: validate3,
+      onChangeAdapter,
+      changeOnBlur,
+      inline,
+      equalSpacing,
+      formItem,
+      label,
+      required,
+      style,
+      helpText,
+      autoComplete,
+      labelHidden: labelHidden2
+    } = _a, rest = __objRest(_a, [
+      "name",
+      "validate",
+      "onChangeAdapter",
+      "changeOnBlur",
+      "inline",
+      "equalSpacing",
+      "formItem",
+      "label",
+      "required",
+      "style",
+      "helpText",
+      "autoComplete",
+      "labelHidden"
+    ]);
+    const debounceTime = props.debounceTime || (option == null ? void 0 : option.debounceTime) || 300;
+    const config2 = useMemo(() => {
+      var _a2;
+      return __spreadProps(__spreadValues({}, props.config), {
+        validate: validate3,
+        parse: ((_a2 = props.config) == null ? void 0 : _a2.parse) || parse
+      });
+    }, [props.config, validate3]);
+    const [currentValue, setCurrentValue] = useState("");
+    const currentValueRef = useRefState(currentValue);
+    const layoutStyle = useMemo(() => {
+      if (equalSpacing) {
+        return {
+          labelCol: {
+            span: 11,
+            style: {
+              textAlign: "left",
+              paddingRight: 0
+            }
+          },
+          wrapperCol: {
+            span: 11,
+            offset: 1,
+            style: {
+              textAlign: "right"
+            }
+          }
+        };
       }
-    } catch (_a2) {
-      return initialValue;
-    }
-  });
-  var _a = useState(function() {
-    return initializer.current(key);
-  }), state = _a[0], setState = _a[1];
-  useLayoutEffect(function() {
-    return setState(initializer.current(key));
-  }, [key]);
-  var set2 = useCallback(function(valOrFunc) {
-    try {
-      var newState = typeof valOrFunc === "function" ? valOrFunc(state) : valOrFunc;
-      if (typeof newState === "undefined")
-        return;
-      var value = void 0;
-      if (options2)
-        if (options2.raw)
-          if (typeof newState === "string")
-            value = newState;
-          else
-            value = JSON.stringify(newState);
-        else if (options2.serializer)
-          value = options2.serializer(newState);
-        else
-          value = JSON.stringify(newState);
-      else
-        value = JSON.stringify(newState);
-      localStorage.setItem(key, value);
-      setState(deserializer(value));
-    } catch (_a2) {
-    }
-  }, [key, setState]);
-  var remove = useCallback(function() {
-    try {
-      localStorage.removeItem(key);
-      setState(void 0);
-    } catch (_a2) {
+      if (inline) {
+        return {
+          labelCol: {
+            span: 7,
+            style: {
+              textAlign: "right",
+              paddingRight: 0
+            }
+          },
+          wrapperCol: {
+            span: 16,
+            offset: 1,
+            style: {}
+          }
+        };
+      }
+      return {
+        labelCol: {
+          span: 24,
+          style: {
+            paddingRight: 0
+          }
+        },
+        wrapperCol: {
+          span: 24
+        }
+      };
+    }, [equalSpacing, inline]);
+    return useMemo(() => {
+      return /* @__PURE__ */ React__default.createElement(Field, __spreadValues({
+        name: name2
+      }, config2), ({ input: { onBlur: onBlur3, onChange, value }, meta }) => {
+        const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
+          onChange(val);
+          onBlur3();
+        }, debounceTime, {}), [onChange, onBlur3]);
+        const onFieldChange = useCallback((e) => {
+          const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
+          setCurrentValue(newVal);
+          if (!changeOnBlur) {
+            debounceCallbackChange(newVal);
+          }
+        }, [debounceCallbackChange]);
+        const onFieldBlur = useCallback(() => {
+          if (changeOnBlur) {
+            onChange(currentValueRef.current);
+            onBlur3();
+          }
+        }, [onBlur3, onChange]);
+        useEffect(() => {
+          setCurrentValue(value);
+        }, [value]);
+        return /* @__PURE__ */ React__default.createElement(Form.Item, __spreadProps(__spreadValues(__spreadValues({
+          style: __spreadProps(__spreadValues({}, style), {
+            margin: "0px"
+          }),
+          rules: required ? [{ required: true }] : void 0
+        }, layoutStyle), formItem), {
+          label: labelHidden2 ? void 0 : label || (formItem == null ? void 0 : formItem.label),
+          labelAlign: "left",
+          validateStatus: meta.touched && meta.error ? "error" : void 0,
+          help: meta.touched && meta.error ? meta.error : helpText
+        }), /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
+          autoComplete
+        }, rest), {
+          name: name2,
+          checked: currentValue,
+          value: currentValue,
+          onChange: onFieldChange,
+          onBlur: onFieldBlur
+        })));
+      });
+    }, [
+      autoComplete,
+      changeOnBlur,
+      config2,
+      currentValue,
+      currentValueRef,
+      debounceTime,
+      formItem,
+      helpText,
+      label,
+      labelHidden2,
+      layoutStyle,
+      name2,
+      onChangeAdapter,
+      required,
+      rest,
+      style
+    ]);
+  };
+}
+function Input(props) {
+  const {
+    quickchange,
+    value = "",
+    onKeyDown: onPropsKeyDown,
+    onChange: propsOnChange
+  } = props;
+  const onChange = useCallback((val) => {
+    propsOnChange(val);
+  }, [propsOnChange]);
+  const onKeyDown = useCallback((ev) => {
+    if (onPropsKeyDown) {
+      onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
     }
-  }, [key, setState]);
-  return [state, set2, remove];
-};
-var useLocalStorage$1 = useLocalStorage;
-const defaultPresetColor = [
-  "#000000",
-  "#FFFFFF",
-  "#9b9b9b",
-  "#d0021b",
-  "#4a90e2",
-  "#7ed321",
-  "#bd10e0",
-  "#f8e71c"
-];
-const CURRENT_COLORS_KEY = "CURRENT_COLORS_KEY";
-const MAX_RECORD_SIZE = 20;
-const PresetColorsContext = React__default.createContext({
-  colors: [],
-  addCurrentColor: () => {
-  }
-});
-const PresetColorsProvider = (props) => {
-  const [currentColors, setCurrentColors] = useLocalStorage$1(CURRENT_COLORS_KEY, defaultPresetColor);
-  const currentColorsRef = useRefState(currentColors);
-  const colorDivRef = useRef(document.createElement("div"));
-  const addCurrentColor = useCallback(lodash.exports.debounce((newColor) => {
-    colorDivRef.current.style.color = "";
-    colorDivRef.current.style.color = newColor;
-    if (colorDivRef.current.style.color) {
-      if (currentColorsRef.current.includes(newColor))
-        return;
-      const newColors = [...new Set([...currentColorsRef.current, newColor])].filter(Boolean).slice(-MAX_RECORD_SIZE);
-      setCurrentColors(newColors);
+    if (quickchange) {
+      let step = 0;
+      if (ev.key === "ArrowUp") {
+        step = 1;
+      }
+      if (ev.key === "ArrowDown") {
+        step = -1;
+      }
+      if (step) {
+        if (/^\d+/.test(value)) {
+          ev.preventDefault();
+          onChange(String(value).replace(/^(\d+)/, (_, match) => {
+            return (Number(match) + step).toString();
+          }));
+        }
+      }
     }
-  }, 500), [currentColorsRef, setCurrentColors]);
-  const value = useMemo(() => {
-    return {
-      colors: currentColors,
-      addCurrentColor
-    };
-  }, [addCurrentColor, currentColors]);
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(PresetColorsContext.Provider, {
-      value
-    }, props.children);
-  }, [props.children, value]);
-};
+  }, [onPropsKeyDown, quickchange, value, onChange]);
+  return /* @__PURE__ */ React__default.createElement(Input$4, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { quickchange: void 0 })), {
+    onChange: (value2) => onChange(value2),
+    onKeyDown
+  }));
+}
+function InputWithUnit(props) {
+  const _a = props, {
+    value = "",
+    onKeyDown: onPropsKeyDown,
+    unitOptions: propsUnitOptions
+  } = _a, restProps = __objRest(_a, [
+    "value",
+    "onKeyDown",
+    "unitOptions"
+  ]);
+  return /* @__PURE__ */ React__default.createElement(Input, __spreadProps(__spreadValues({
+    value
+  }, restProps), {
+    quickchange: true
+  }));
+}
+function CheckBoxGroup(props) {
+  const _a = props, { vertical = false } = _a, rest = __objRest(_a, ["vertical"]);
+  return /* @__PURE__ */ React__default.createElement(Checkbox$1.Group, {
+    style: lodash.exports.merge({ width: "100%" }, rest.style),
+    value: rest.value,
+    onChange: rest.onChange
+  }, /* @__PURE__ */ React__default.createElement(Stack$4, {
+    vertical,
+    spacing: "extraTight"
+  }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Checkbox$1, {
+    style: rest.checkboxStyle,
+    key: index2,
+    value: item2.value
+  }, item2.label))));
+}
+function classnames(...rest) {
+  return rest.filter((item2) => typeof item2 === "string").join(" ");
+}
 const helperText = "_helperText_1m9nq_1";
 const labelHidden = "_label-hidden_1m9nq_9";
 const editTab = "_editTab_1m9nq_20";
@@ -31104,6 +31234,145 @@ var styles$7 = {
   inputWithUnitSelectOption,
   colorPicker
 };
+const { TabPane: TabPane$1 } = Tabs$1;
+function EditTab(props) {
+  const { value, additionItem } = props;
+  const [activeTab, setActiveTab] = useState("0");
+  const onAddTab = () => {
+    setActiveTab(value.length.toString());
+    props.onChange([...value, additionItem]);
+  };
+  const onDeleteTab = (index2) => {
+    if (index2 < activeTab) {
+      setActiveTab((Number(activeTab) - 1).toString());
+    }
+    if (index2 === activeTab) {
+      setActiveTab(Number(index2) > 0 ? `${Number(index2) - 1}` : "0");
+    }
+    props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
+  };
+  return /* @__PURE__ */ React__default.createElement(Tabs$1, {
+    destroyOnHide: true,
+    className: classnames(styles$7.editTab),
+    style: { border: "none" },
+    type: "card",
+    activeTab,
+    tabPosition: props.tabPosition,
+    editable: true,
+    onAddTab,
+    onDeleteTab,
+    onChange: setActiveTab
+  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane$1, {
+    style: { paddingLeft: 12 },
+    title: `${props.label || "Tab"} ${index2 + 1}`,
+    key: index2
+  }, props.renderItem(item2, index2))));
+}
+function EditGridTab(props) {
+  const { value, additionItem } = props;
+  const onAdd = (index2) => {
+    let newItem = additionItem || lodash.exports.cloneDeep(value[index2]);
+    value.splice(index2 + 1, 0, newItem);
+    props.onChange([...value]);
+  };
+  const onDelete = (index2) => {
+    props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
+  };
+  return /* @__PURE__ */ React__default.createElement(Card$1, {
+    bordered: false
+  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
+    style: { width: "100%" },
+    key: index2
+  }, /* @__PURE__ */ React__default.createElement(Card$1, {
+    title: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, "Item ", index2 + 1)),
+    extra: /* @__PURE__ */ React__default.createElement(Space$1, {
+      size: "large"
+    }, /* @__PURE__ */ React__default.createElement(IconPlus$1, {
+      style: { color: "#000", cursor: "pointer" },
+      onClick: () => onAdd(index2)
+    }), /* @__PURE__ */ React__default.createElement(IconClose$1, {
+      style: { color: "#000", cursor: "pointer" },
+      onClick: () => onDelete(index2)
+    }))
+  }, props.renderItem(item2, index2)))));
+}
+function InlineText({ idx, onChange, children }) {
+  const {
+    mutators: { setFieldTouched }
+  } = useForm$1();
+  useField(idx);
+  useEffect(() => {
+    const shadowRoot = getShadowRoot();
+    const onPaste = (e) => {
+      var _a, _b;
+      if (!(e.target instanceof Element) || !e.target.getAttribute("contenteditable"))
+        return;
+      e.preventDefault();
+      const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
+      document.execCommand("insertHTML", false, text);
+      const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
+      if (contentEditableType === ContentEditableType.RichText) {
+        onChange(e.target.innerHTML || "");
+      } else if (contentEditableType === ContentEditableType.Text) {
+        onChange(((_b = e.target.textContent) == null ? void 0 : _b.trim()) || "");
+      }
+    };
+    const onInput = (e) => {
+      var _a;
+      if (e.target instanceof Element && e.target.getAttribute("contenteditable")) {
+        const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
+        if (contentEditableType === ContentEditableType.RichText) {
+          onChange(e.target.innerHTML || "");
+        } else if (contentEditableType === ContentEditableType.Text) {
+          onChange(((_a = e.target.textContent) == null ? void 0 : _a.trim()) || "");
+        }
+      }
+    };
+    shadowRoot.addEventListener("paste", onPaste, true);
+    shadowRoot.addEventListener("input", onInput);
+    return () => {
+      shadowRoot.removeEventListener("paste", onPaste, true);
+      shadowRoot.removeEventListener("input", onInput);
+    };
+  }, [onChange, setFieldTouched]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+}
+function AutoComplete(props) {
+  const options2 = useMemo(() => {
+    const selectedValue = (props.value || "").toLowerCase();
+    return props.options.filter((item2) => {
+      return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(selectedValue) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(selectedValue);
+    }).map((item2) => __spreadProps(__spreadValues({}, item2), { name: item2.label }));
+  }, [props.options, props.value]);
+  return /* @__PURE__ */ React__default.createElement(ArcoAutoComplete, __spreadProps(__spreadValues({}, props), {
+    data: options2
+  }));
+}
+function isNumber(num) {
+  if (typeof num !== "string" && typeof num !== "number")
+    return false;
+  return new RegExp("^(\\-|\\+)?\\d+(\\.\\d+)?$").test(num.toString());
+}
+const pixelAdapter = {
+  format(val) {
+    if (!lodash.exports.isString(val) && !val)
+      return "";
+    val = val.toString();
+    if (/^\d+px$/.test(val.trim()))
+      return val.trim().replace("px", "");
+    return val.trim();
+  },
+  parse(val) {
+    if (!lodash.exports.isString(val) && !isNumber(val))
+      return void 0;
+    val = val.toString().trim();
+    if (!val)
+      return void 0;
+    if (/^\d+$/.test(val))
+      return val + "px";
+    return val;
+  }
+};
 var colorString$1 = { exports: {} };
 var colorName = {
   "aliceblue": [240, 248, 255],
@@ -32615,6 +32884,171 @@ function zeroArray(array, length2) {
 }
 var color = Color$1;
 var Color$2 = color;
+const colorAdapter = {
+  format(val) {
+    if (!lodash.exports.isString(val) && !val)
+      return "";
+    val = val.toString();
+    if (val.length === 7 && val.startsWith("#"))
+      return val.replace("#", "");
+    return val;
+  },
+  parse(val) {
+    if (!lodash.exports.isString(val))
+      return void 0;
+    val = val.toString().trim();
+    if (!val)
+      return void 0;
+    try {
+      if (val.length === 6 && Color$2(`#${val}`).hex())
+        return `#${val}`;
+    } catch (error2) {
+      console.log("err", val);
+    }
+    return val;
+  }
+};
+const imageHeightAdapter = {
+  format(val) {
+    if (!lodash.exports.isString(val) && !val)
+      return "";
+    val = val.toString();
+    if (val === "auto")
+      return void 0;
+    if (/^\d+px$/.test(val.trim()))
+      return val.trim().replace("px", "");
+    return val.trim();
+  },
+  parse(val) {
+    if (!lodash.exports.isString(val) && !isNumber(val))
+      return void 0;
+    val = val.toString().trim();
+    if (!val)
+      return void 0;
+    if (/^\d+$/.test(val))
+      return val + "px";
+    return val;
+  }
+};
+const defaultImagesMap$1 = {
+  IMAGE_59: "https://easy-email-m-ryan.vercel.app/images/06ca521d-9728-4de6-a709-1b75a828bfc3-2a9b1224-3d71-43b8-b52f-e7cdcdc9107b.png",
+  AttributePanel_01: "https://easy-email-m-ryan.vercel.app/images/e22f78f2-aa76-408d-ba94-c95c7abe1908-image.png",
+  AttributePanel_02: "https://easy-email-m-ryan.vercel.app/images/3e952a6e-2506-470e-b395-3e0d995157c5.png",
+  AttributePanel_03: "https://easy-email-m-ryan.vercel.app/images/Fi_vI4vyLhTM-Tp6ivq4dR_ieGHk.png"
+};
+ImageManager.add(defaultImagesMap$1);
+function getImg$1(name2) {
+  return ImageManager.get(name2);
+}
+var noop = function() {
+};
+var isBrowser = typeof window !== "undefined";
+var useLocalStorage = function(key, initialValue, options2) {
+  if (!isBrowser) {
+    return [initialValue, noop, noop];
+  }
+  if (!key) {
+    throw new Error("useLocalStorage key may not be falsy");
+  }
+  var deserializer = options2 ? options2.raw ? function(value) {
+    return value;
+  } : options2.deserializer : JSON.parse;
+  var initializer = useRef(function(key2) {
+    try {
+      var serializer = options2 ? options2.raw ? String : options2.serializer : JSON.stringify;
+      var localStorageValue = localStorage.getItem(key2);
+      if (localStorageValue !== null) {
+        return deserializer(localStorageValue);
+      } else {
+        initialValue && localStorage.setItem(key2, serializer(initialValue));
+        return initialValue;
+      }
+    } catch (_a2) {
+      return initialValue;
+    }
+  });
+  var _a = useState(function() {
+    return initializer.current(key);
+  }), state = _a[0], setState = _a[1];
+  useLayoutEffect(function() {
+    return setState(initializer.current(key));
+  }, [key]);
+  var set2 = useCallback(function(valOrFunc) {
+    try {
+      var newState = typeof valOrFunc === "function" ? valOrFunc(state) : valOrFunc;
+      if (typeof newState === "undefined")
+        return;
+      var value = void 0;
+      if (options2)
+        if (options2.raw)
+          if (typeof newState === "string")
+            value = newState;
+          else
+            value = JSON.stringify(newState);
+        else if (options2.serializer)
+          value = options2.serializer(newState);
+        else
+          value = JSON.stringify(newState);
+      else
+        value = JSON.stringify(newState);
+      localStorage.setItem(key, value);
+      setState(deserializer(value));
+    } catch (_a2) {
+    }
+  }, [key, setState]);
+  var remove = useCallback(function() {
+    try {
+      localStorage.removeItem(key);
+      setState(void 0);
+    } catch (_a2) {
+    }
+  }, [key, setState]);
+  return [state, set2, remove];
+};
+var useLocalStorage$1 = useLocalStorage;
+const defaultPresetColor = [
+  "#000000",
+  "#FFFFFF",
+  "#9b9b9b",
+  "#d0021b",
+  "#4a90e2",
+  "#7ed321",
+  "#bd10e0",
+  "#f8e71c"
+];
+const CURRENT_COLORS_KEY = "CURRENT_COLORS_KEY";
+const MAX_RECORD_SIZE = 20;
+const PresetColorsContext = React__default.createContext({
+  colors: [],
+  addCurrentColor: () => {
+  }
+});
+const PresetColorsProvider = (props) => {
+  const [currentColors, setCurrentColors] = useLocalStorage$1(CURRENT_COLORS_KEY, defaultPresetColor);
+  const currentColorsRef = useRefState(currentColors);
+  const colorDivRef = useRef(document.createElement("div"));
+  const addCurrentColor = useCallback(lodash.exports.debounce((newColor) => {
+    colorDivRef.current.style.color = "";
+    colorDivRef.current.style.color = newColor;
+    if (colorDivRef.current.style.color) {
+      if (currentColorsRef.current.includes(newColor))
+        return;
+      const newColors = [...new Set([...currentColorsRef.current, newColor])].filter(Boolean).slice(-MAX_RECORD_SIZE);
+      setCurrentColors(newColors);
+    }
+  }, 500), [currentColorsRef, setCurrentColors]);
+  const value = useMemo(() => {
+    return {
+      colors: currentColors,
+      addCurrentColor
+    };
+  }, [addCurrentColor, currentColors]);
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(PresetColorsContext.Provider, {
+      value
+    }, props.children);
+  }, [props.children, value]);
+};
 const transparentColor$1 = "rgba(0,0,0,0)";
 function ColorPickerContent(props) {
   const { colors: presetColors } = useContext(PresetColorsContext);
@@ -32706,6 +33140,21 @@ function ColorPicker(props) {
   const getPopupContainer = useCallback(() => {
     return getCollapseItemEle(refEle);
   }, [refEle]);
+  const inputColor = useMemo(() => {
+    var _a, _b, _c;
+    if (((_a = props.value) == null ? void 0 : _a.startsWith("#")) && ((_b = props.value) == null ? void 0 : _b.length) === 7)
+      return (_c = props.value) == null ? void 0 : _c.replace("#", "");
+    return props.value;
+  }, [props.value]);
+  const adapterColor = useMemo(() => {
+    try {
+      if (value.length === 6 && Color$2(`#${value}`).hex())
+        return `#${value}`;
+    } catch (error2) {
+      console.log("err", value);
+    }
+    return value;
+  }, [value]);
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { flex: 1, display: "flex" }
   }, /* @__PURE__ */ React__default.createElement(Popover$1, __spreadValues({
@@ -32713,7 +33162,7 @@ function ColorPicker(props) {
     trigger: "click",
     className: "color-picker-popup",
     content: /* @__PURE__ */ React__default.createElement(ColorPickerContent, {
-      value,
+      value: adapterColor,
       onChange: onInputChange
     }),
     getPopupContainer
@@ -32741,7 +33190,7 @@ function ColorPicker(props) {
       width: "100%",
       height: "100%",
       textAlign: "center",
-      backgroundColor: value
+      backgroundColor: adapterColor
     }
   }) : /* @__PURE__ */ React__default.createElement("img", {
     style: {
@@ -32756,374 +33205,19 @@ function ColorPicker(props) {
                 }
 
                 `))), showInput && /* @__PURE__ */ React__default.createElement(Input$4, {
-    value: props.value,
+    value: inputColor,
     style: { outline: "none", flex: 1 },
     onChange: onInputChange
   }));
 }
-function Select(props) {
-  return /* @__PURE__ */ React__default.createElement(Select$2, __spreadProps(__spreadValues({}, props), {
-    dropdownMenuClassName: "easy-email-overlay",
-    style: lodash.exports.merge({ width: "100%" }, props.style),
-    value: props.value,
-    onChange: props.onChange
-  }), props.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Select$2.Option, {
-    key: index2,
-    value: item2.value
-  }, item2.label)));
-}
-function RadioGroup(props) {
-  const _a = props, { type, vertical } = _a, rest = __objRest(_a, ["type", "vertical"]);
-  return /* @__PURE__ */ React__default.createElement(Radio.Group, __spreadProps(__spreadValues({}, rest), {
-    style: lodash.exports.merge({ width: "100%" }, rest.style),
-    value: rest.value,
-    onChange: rest.onChange
-  }), /* @__PURE__ */ React__default.createElement(Stack$4, {
-    vertical,
-    spacing: "extraTight"
-  }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Radio, {
-    key: index2,
-    value: item2.value
-  }, item2.label))));
-}
-const parse = (v) => v;
-function enhancer(Component2, changeAdapter, option) {
-  return (props) => {
-    const _a = props, {
-      name: name2,
-      validate: validate3,
-      onChangeAdapter,
-      changeOnBlur,
-      inline,
-      equalSpacing,
-      formItem,
-      label,
-      required,
-      style,
-      helpText,
-      autoComplete,
-      labelHidden: labelHidden2
-    } = _a, rest = __objRest(_a, [
-      "name",
-      "validate",
-      "onChangeAdapter",
-      "changeOnBlur",
-      "inline",
-      "equalSpacing",
-      "formItem",
-      "label",
-      "required",
-      "style",
-      "helpText",
-      "autoComplete",
-      "labelHidden"
-    ]);
-    const debounceTime = props.debounceTime || (option == null ? void 0 : option.debounceTime) || 300;
-    const config2 = useMemo(() => {
-      var _a2;
-      return __spreadProps(__spreadValues({}, props.config), {
-        validate: validate3,
-        parse: ((_a2 = props.config) == null ? void 0 : _a2.parse) || parse
-      });
-    }, [props.config, validate3]);
-    const [currentValue, setCurrentValue] = useState("");
-    const currentValueRef = useRefState(currentValue);
-    const layoutStyle = useMemo(() => {
-      if (equalSpacing) {
-        return {
-          labelCol: {
-            span: 11,
-            style: {
-              textAlign: "left",
-              paddingRight: 0
-            }
-          },
-          wrapperCol: {
-            span: 11,
-            offset: 1,
-            style: {
-              textAlign: "right"
-            }
-          }
-        };
-      }
-      if (inline) {
-        return {
-          labelCol: {
-            span: 7,
-            style: {
-              textAlign: "right",
-              paddingRight: 0
-            }
-          },
-          wrapperCol: {
-            span: 16,
-            offset: 1,
-            style: {}
-          }
-        };
-      }
-      return {
-        labelCol: {
-          span: 24,
-          style: {
-            paddingRight: 0
-          }
-        },
-        wrapperCol: {
-          span: 24
-        }
-      };
-    }, [equalSpacing, inline]);
-    return useMemo(() => {
-      return /* @__PURE__ */ React__default.createElement(Field, __spreadValues({
-        name: name2
-      }, config2), ({ input: { onBlur: onBlur3, onChange, value }, meta }) => {
-        const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
-          onChange(val);
-          onBlur3();
-        }, debounceTime, {}), [onChange, onBlur3]);
-        const onFieldChange = useCallback((e) => {
-          const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
-          setCurrentValue(newVal);
-          if (!changeOnBlur) {
-            debounceCallbackChange(newVal);
-          }
-        }, [debounceCallbackChange]);
-        const onFieldBlur = useCallback(() => {
-          if (changeOnBlur) {
-            onChange(currentValueRef.current);
-            onBlur3();
-          }
-        }, [onBlur3, onChange]);
-        useEffect(() => {
-          setCurrentValue(value);
-        }, [value]);
-        return /* @__PURE__ */ React__default.createElement(Form.Item, __spreadProps(__spreadValues(__spreadValues({
-          style: __spreadProps(__spreadValues({}, style), {
-            margin: "0px"
-          }),
-          rules: required ? [{ required: true }] : void 0
-        }, layoutStyle), formItem), {
-          label: labelHidden2 ? void 0 : label || (formItem == null ? void 0 : formItem.label),
-          labelAlign: "left",
-          validateStatus: meta.touched && meta.error ? "error" : void 0,
-          help: meta.touched && meta.error ? meta.error : helpText
-        }), /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
-          autoComplete
-        }, rest), {
-          name: name2,
-          checked: currentValue,
-          value: currentValue,
-          onChange: onFieldChange,
-          onBlur: onFieldBlur
-        })));
-      });
-    }, [
-      autoComplete,
-      changeOnBlur,
-      config2,
-      currentValue,
-      currentValueRef,
-      debounceTime,
-      formItem,
-      helpText,
-      label,
-      labelHidden2,
-      layoutStyle,
-      name2,
-      onChangeAdapter,
-      required,
-      rest,
-      style
-    ]);
-  };
-}
-function Input(props) {
-  const {
-    quickchange,
-    value = "",
-    onKeyDown: onPropsKeyDown,
-    onChange: propsOnChange
-  } = props;
-  const onChange = useCallback((val) => {
-    propsOnChange(val);
-  }, [propsOnChange]);
-  const onKeyDown = useCallback((ev) => {
-    if (onPropsKeyDown) {
-      onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
-    }
-    if (quickchange) {
-      let step = 0;
-      if (ev.key === "ArrowUp") {
-        step = 1;
-      }
-      if (ev.key === "ArrowDown") {
-        step = -1;
-      }
-      if (step) {
-        if (/^\d+/.test(value)) {
-          ev.preventDefault();
-          onChange(String(value).replace(/^(\d+)/, (_, match) => {
-            return (Number(match) + step).toString();
-          }));
-        }
-      }
-    }
-  }, [onPropsKeyDown, quickchange, value, onChange]);
-  return /* @__PURE__ */ React__default.createElement(Input$4, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { quickchange: void 0 })), {
-    onChange: (value2) => onChange(value2),
-    onKeyDown
-  }));
-}
-function InputWithUnit(props) {
-  const _a = props, {
-    value = "",
-    onKeyDown: onPropsKeyDown,
-    unitOptions: propsUnitOptions
-  } = _a, restProps = __objRest(_a, [
-    "value",
-    "onKeyDown",
-    "unitOptions"
-  ]);
-  return /* @__PURE__ */ React__default.createElement(Input, __spreadProps(__spreadValues({
-    value
-  }, restProps), {
-    quickchange: true
-  }));
-}
-function CheckBoxGroup(props) {
-  const _a = props, { vertical = false } = _a, rest = __objRest(_a, ["vertical"]);
-  return /* @__PURE__ */ React__default.createElement(Checkbox$1.Group, {
-    style: lodash.exports.merge({ width: "100%" }, rest.style),
-    value: rest.value,
-    onChange: rest.onChange
-  }, /* @__PURE__ */ React__default.createElement(Stack$4, {
-    vertical,
-    spacing: "extraTight"
-  }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Checkbox$1, {
-    style: rest.checkboxStyle,
-    key: index2,
-    value: item2.value
-  }, item2.label))));
-}
-function classnames(...rest) {
-  return rest.filter((item2) => typeof item2 === "string").join(" ");
-}
-const { TabPane: TabPane$1 } = Tabs$1;
-function EditTab(props) {
-  const { value, additionItem } = props;
-  const [activeTab, setActiveTab] = useState("0");
-  const onAddTab = () => {
-    setActiveTab(value.length.toString());
-    props.onChange([...value, additionItem]);
-  };
-  const onDeleteTab = (index2) => {
-    if (index2 < activeTab) {
-      setActiveTab((Number(activeTab) - 1).toString());
-    }
-    if (index2 === activeTab) {
-      setActiveTab(Number(index2) > 0 ? `${Number(index2) - 1}` : "0");
-    }
-    props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
-  };
-  return /* @__PURE__ */ React__default.createElement(Tabs$1, {
-    destroyOnHide: true,
-    className: classnames(styles$7.editTab),
-    style: { border: "none" },
-    type: "card",
-    activeTab,
-    tabPosition: props.tabPosition,
-    editable: true,
-    onAddTab,
-    onDeleteTab,
-    onChange: setActiveTab
-  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane$1, {
-    style: { paddingLeft: 12 },
-    title: `${props.label || "Tab"} ${index2 + 1}`,
-    key: index2
-  }, props.renderItem(item2, index2))));
-}
-function EditGridTab(props) {
-  const { value, additionItem } = props;
-  const onAdd = (index2) => {
-    let newItem = additionItem || lodash.exports.cloneDeep(value[index2]);
-    value.splice(index2 + 1, 0, newItem);
-    props.onChange([...value]);
-  };
-  const onDelete = (index2) => {
-    props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
-  };
-  return /* @__PURE__ */ React__default.createElement(Card$1, {
-    bordered: false
-  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
-    style: { width: "100%" },
-    key: index2
-  }, /* @__PURE__ */ React__default.createElement(Card$1, {
-    title: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, "Item ", index2 + 1)),
-    extra: /* @__PURE__ */ React__default.createElement(Space$1, {
-      size: "large"
-    }, /* @__PURE__ */ React__default.createElement(IconPlus$1, {
-      style: { color: "#000", cursor: "pointer" },
-      onClick: () => onAdd(index2)
-    }), /* @__PURE__ */ React__default.createElement(IconClose$1, {
-      style: { color: "#000", cursor: "pointer" },
-      onClick: () => onDelete(index2)
-    }))
-  }, props.renderItem(item2, index2)))));
-}
-function InlineText({ idx, onChange, children }) {
-  const {
-    mutators: { setFieldTouched }
-  } = useForm$1();
-  useField(idx);
-  useEffect(() => {
-    const shadowRoot = getShadowRoot();
-    const onPaste = (e) => {
-      var _a, _b;
-      if (!(e.target instanceof Element) || !e.target.getAttribute("contenteditable"))
-        return;
-      e.preventDefault();
-      const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
-      document.execCommand("insertHTML", false, text);
-      const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
-      if (contentEditableType === ContentEditableType.RichText) {
-        onChange(e.target.innerHTML || "");
-      } else if (contentEditableType === ContentEditableType.Text) {
-        onChange(((_b = e.target.textContent) == null ? void 0 : _b.trim()) || "");
-      }
-    };
-    const onInput = (e) => {
-      var _a;
-      if (e.target instanceof Element && e.target.getAttribute("contenteditable")) {
-        const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
-        if (contentEditableType === ContentEditableType.RichText) {
-          onChange(e.target.innerHTML || "");
-        } else if (contentEditableType === ContentEditableType.Text) {
-          onChange(((_a = e.target.textContent) == null ? void 0 : _a.trim()) || "");
-        }
-      }
-    };
-    shadowRoot.addEventListener("paste", onPaste, true);
-    shadowRoot.addEventListener("input", onInput);
-    return () => {
-      shadowRoot.removeEventListener("paste", onPaste, true);
-      shadowRoot.removeEventListener("input", onInput);
-    };
-  }, [onChange, setFieldTouched]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
-}
-function AutoComplete(props) {
-  const options2 = useMemo(() => {
-    const selectedValue = (props.value || "").toLowerCase();
-    return props.options.filter((item2) => {
-      return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(selectedValue) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(selectedValue);
-    }).map((item2) => __spreadProps(__spreadValues({}, item2), { name: item2.label }));
-  }, [props.options, props.value]);
-  return /* @__PURE__ */ React__default.createElement(ArcoAutoComplete, __spreadProps(__spreadValues({}, props), {
-    data: options2
-  }));
-}
+const ColorPickerFieldSource = enhancer(ColorPicker, (e) => e, {
+  debounceTime: 1
+});
+const ColorPickerField = (props) => {
+  return /* @__PURE__ */ React__default.createElement(ColorPickerFieldSource, __spreadValues({
+    config: colorAdapter
+  }, props));
+};
 const ToolItem$1 = (props) => {
   if (!props.title) {
     return /* @__PURE__ */ React__default.createElement("button", {
@@ -33617,9 +33711,11 @@ function Page() {
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: t("Font size"),
-    name: `${focusIdx2}.data.value.font-size`
+  }, /* @__PURE__ */ React__default.createElement(NumberField, {
+    label: "Font size (px)",
+    name: `${focusIdx2}.data.value.font-size`,
+    config: pixelAdapter,
+    autoComplete: "off"
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
@@ -33654,7 +33750,7 @@ function Page() {
   }), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null), /* @__PURE__ */ React__default.createElement(AddFont, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null))))));
 }
 function Padding(props = {}) {
-  const { title: title2 = "Padding", attributeName = "padding", name: name2 } = props;
+  const { title: title2 = t("Padding"), attributeName = "padding", name: name2, showResetAll } = props;
   const { focusBlock: focusBlock2, change, values: values2 } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const type = focusBlock2 && focusBlock2.type;
@@ -33692,6 +33788,13 @@ function Padding(props = {}) {
       change(focusIdx2 + `.attributes[${attributeName}]`, val);
     }
   }, [name2, change, focusIdx2, attributeName]);
+  const onResetPadding = useCallback(() => {
+    if (name2) {
+      change(name2, "0px 0px 0px 0px");
+    } else {
+      change(focusIdx2 + `.attributes[${attributeName}]`, "0px 0px 0px 0px");
+    }
+  }, [name2, change, focusIdx2, attributeName]);
   return /* @__PURE__ */ React__default.createElement(Form$3, {
     initialValues: paddingFormValues,
     subscription: { submitting: true, pristine: true },
@@ -33702,30 +33805,49 @@ function Padding(props = {}) {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Stack$4, {
       vertical: true,
       spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(Space$1, {
+      align: "center"
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       variation: "strong"
-    }, title2), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+    }, title2), showResetAll && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
+      content: "Remove all padding"
+    }, /* @__PURE__ */ React__default.createElement(Button$4, {
+      onClick: onResetPadding,
+      size: "mini",
+      icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+        iconName: "icon-remove",
+        size: 12
+      })
+    }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-      label: "Top",
-      name: "top"
+    }, /* @__PURE__ */ React__default.createElement(NumberField, {
+      label: "Top (px)",
+      name: "top",
+      autoComplete: "off",
+      config: pixelAdapter
     })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
       offset: 1,
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-      label: "Left",
-      name: "left"
+    }, /* @__PURE__ */ React__default.createElement(NumberField, {
+      label: "Left (px)",
+      name: "left",
+      autoComplete: "off",
+      config: pixelAdapter
     }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-      label: "Bottom",
-      name: "bottom"
+    }, /* @__PURE__ */ React__default.createElement(NumberField, {
+      label: "Bottom (px)",
+      name: "bottom",
+      config: pixelAdapter,
+      autoComplete: "off"
     })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
       offset: 1,
       span: 11
-    }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-      label: "Right",
-      name: "right"
+    }, /* @__PURE__ */ React__default.createElement(NumberField, {
+      label: "Right (px)",
+      name: "right",
+      autoComplete: "off",
+      config: pixelAdapter
     })))), /* @__PURE__ */ React__default.createElement(PaddingChangeWrapper, {
       onChange: onChancePadding
     }));
@@ -34179,7 +34301,8 @@ function Section() {
 }
 function Width({
   inline = false,
-  unitOptions
+  unitOptions,
+  config: config2
 }) {
   var _a;
   const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -34196,7 +34319,8 @@ function Width({
     label: "Width",
     inline,
     name: `${focusIdx2}.attributes.width`,
-    unitOptions
+    unitOptions,
+    config: config2
   });
 }
 const options$a = [
@@ -34362,7 +34486,10 @@ function FontStyle({ name: name2 }) {
     options: options$7
   });
 }
-function Height({ inline }) {
+function Height({
+  inline,
+  config: config2
+}) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(Stack$4, {
@@ -34373,7 +34500,8 @@ function Height({ inline }) {
       label: "Height",
       name: `${focusIdx2}.attributes.height`,
       quickchange: true,
-      inline
+      inline,
+      config: config2
     })));
   }, [focusIdx2, inline]);
 }
@@ -34390,9 +34518,11 @@ function ContainerBackgroundColor({
 }
 function FontSize$1() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
-    label: "Font size",
-    name: `${focusIdx2}.attributes.font-size`
+  return /* @__PURE__ */ React__default.createElement(NumberField, {
+    label: "Font size (px)",
+    name: `${focusIdx2}.attributes.font-size`,
+    config: pixelAdapter,
+    autoComplete: "off"
   });
 }
 function Color({ title: title2 = "Color" }) {
@@ -34405,21 +34535,27 @@ function Color({ title: title2 = "Color" }) {
 const options$6 = [
   {
     value: "left",
-    label: "left"
+    get label() {
+      return t("left");
+    }
   },
   {
     value: "center",
-    label: "center"
+    get label() {
+      return t("center");
+    }
   },
   {
     value: "right",
-    label: "right"
+    get label() {
+      return t("right");
+    }
   }
 ];
 function Align({ inline }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-    label: "Align",
+    label: t("Align"),
     name: `${focusIdx2}.attributes.align`,
     options: options$6
   });
@@ -34556,7 +34692,9 @@ function Text() {
     header: "Dimension"
   }, /* @__PURE__ */ React__default.createElement(Space$1, {
     direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+  }, /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, {
+    showResetAll: true
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "1",
     header: "Color"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -34659,10 +34797,16 @@ function Image$1() {
     direction: "vertical"
   }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+  }, /* @__PURE__ */ React__default.createElement(Width, {
+    config: pixelAdapter
+  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(Height, null))), /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+  }, /* @__PURE__ */ React__default.createElement(Height, {
+    config: imageHeightAdapter
+  }))), /* @__PURE__ */ React__default.createElement(Padding, {
+    showResetAll: true
+  }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 24
   }, /* @__PURE__ */ React__default.createElement(Align, null))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "2",
@@ -34738,7 +34882,7 @@ function TextAlign({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: "Text align",
+      label: t("Text align"),
       name: name2 || `${focusIdx2}.attributes.text-align`,
       options: options$5
     }));
@@ -35086,7 +35230,8 @@ function Button() {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(FontWeight, null))), /* @__PURE__ */ React__default.createElement(Padding, {
     title: "Padding",
-    attributeName: "padding"
+    attributeName: "padding",
+    showResetAll: true
   }), /* @__PURE__ */ React__default.createElement(Padding, {
     title: "Inner padding",
     attributeName: "inner-padding"
@@ -35715,10 +35860,11 @@ function NavbarLink({
   })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
     offset: 1,
     span: 11
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Font size",
-    quickchange: true,
-    name: `${focusIdx2}.data.value.links.[${index2}].font-size`
+  }, /* @__PURE__ */ React__default.createElement(NumberField, {
+    label: "Font size (px)",
+    name: `${focusIdx2}.data.value.links.[${index2}].font-size`,
+    config: pixelAdapter,
+    autoComplete: "off"
   }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
     span: 11
   }, /* @__PURE__ */ React__default.createElement(LineHeight, {
@@ -36786,7 +36932,6 @@ const SearchField = enhancer(Input$4.Search, (val) => val);
 const TextAreaField = enhancer(Input$4.TextArea, (val) => val);
 const NumberField = enhancer(InputNumber$1, (e) => e);
 const SliderField = enhancer(Slider$1, (e) => e);
-const ColorPickerField = enhancer(ColorPicker, (e) => e);
 const UploadField = enhancer(UploadField$1, (val) => val);
 const ImageUploaderField = enhancer(ImageUploader, (url) => url);
 const SelectField = enhancer(Select, (e) => e);
@@ -37300,9 +37445,6 @@ function BlockLayer(props) {
     }
     return keys2;
   }, [focusIdx2]);
-  const hasFocus = Boolean(focusIdx2);
-  if (!hasFocus)
-    return null;
   return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
     ref: setBlockLayerRef,
     id: "BlockLayerManager"
@@ -40003,11 +40145,11 @@ function TipNode(props) {
   const { direction, title: title2, lineWidth, type } = props;
   const dragTitle = useMemo(() => {
     if (direction === "top" || direction === "noEnoughTop") {
-      return `Insert before ${title2}`;
+      return t(`Insert before`, title2);
     } else if (direction === "bottom") {
-      return `Insert after ${title2}`;
+      return t(`Insert after`, title2);
     } else if (direction === "right" || direction === "left") {
-      return "Drag here";
+      return t("Drag here");
     }
     return `Drag to ${title2}`;
   }, [direction, title2]);
@@ -45716,7 +45858,7 @@ function EditPanel({ showSourceCode }) {
     }, /* @__PURE__ */ React__default.createElement(DefaultHeader, null))
   }, /* @__PURE__ */ React__default.createElement(TabPane, {
     key: "2",
-    title: "Block"
+    title: t("Block")
   }, /* @__PURE__ */ React__default.createElement(FullHeightOverlayScrollbars, {
     height: `calc(${height} - 60px)`
   }, /* @__PURE__ */ React__default.createElement(Blocks, null))), /* @__PURE__ */ React__default.createElement(TabPane, {
@@ -45842,5 +45984,5 @@ const StandardLayout = (props) => {
     style: { width: 0, overflow: "hidden" }
   }))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-export { TextAreaField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BlockMaskWrapper as E, FontFamily as F, SourceCodePanel as G, Height as H, InteractivePrompt as I, SimpleLayout as J, StandardLayout as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, MergeTagBadgePrompt as O, Padding as P, ExtensionContext as Q, ExtensionProvider as R, ShortcutToolbar as S, TextAlign as T, useExtensionProps as U, VerticalAlign as V, Width as W, RICH_TEXT_TOOL_BAR as X, TextField as Y, InputWithUnitField as Z, SearchField as _, getIconNameByBlockType as a, NumberField as a0, SliderField as a1, ColorPickerField as a2, UploadField as a3, ImageUploaderField as a4, SelectField as a5, TreeSelectField as a6, AutoCompleteField as a7, RadioGroupField as a8, SwitchField as a9, CheckboxField as aa, EditTabField as ab, EditGridTabField as ac, InlineTextField as ad, enhancer as ae, RichTextField as af, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, ContainerBackgroundColor as i, TextDecoration as j, Background as k, LineHeight as l, TextTransform as m, BackgroundColor as n, Direction as o, Link as p, Border as q, BorderColor as r, FontSize$1 as s, MergeTags$1 as t, BorderStyle as u, FontStyle as v, BorderWidth as w, FontWeight as x, ClassName as y, BlockMarketManager as z };
+export { TextAreaField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BlockMaskWrapper as E, FontFamily as F, SourceCodePanel as G, Height as H, InteractivePrompt as I, SimpleLayout as J, StandardLayout as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, MergeTagBadgePrompt as O, Padding as P, ExtensionContext as Q, ExtensionProvider as R, ShortcutToolbar as S, TextAlign as T, useExtensionProps as U, VerticalAlign as V, Width as W, RICH_TEXT_TOOL_BAR as X, TextField as Y, InputWithUnitField as Z, SearchField as _, getIconNameByBlockType as a, NumberField as a0, SliderField as a1, UploadField as a2, ImageUploaderField as a3, SelectField as a4, TreeSelectField as a5, AutoCompleteField as a6, RadioGroupField as a7, SwitchField as a8, CheckboxField as a9, EditTabField as aa, EditGridTabField as ab, InlineTextField as ac, ColorPickerField as ad, enhancer as ae, RichTextField as af, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, ContainerBackgroundColor as i, TextDecoration as j, Background as k, LineHeight as l, TextTransform as m, BackgroundColor as n, Direction as o, Link as p, Border as q, BorderColor as r, FontSize$1 as s, MergeTags$1 as t, BorderStyle as u, FontStyle as v, BorderWidth as w, FontWeight as x, ClassName as y, BlockMarketManager as z };
 //# sourceMappingURL=index2.js.map