@easy-editor/setters 0.1.2 → 0.1.4

package/dist/index.esm.js

@@ -1,3321 +0,0 @@
-import React$1, { useRef, useState, useEffect, forwardRef, createElement, useCallback, useMemo, Fragment } from 'react';
-import { createPortal } from 'react-dom';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-/**
- * Popover - 共享弹窗组件
- * - 使用 Portal 渲染到 document.body，避免被父容器遮挡
- * - 自动匹配触发器宽度
- */
-const Popover = props => {
-  const {
-    open,
-    onClose,
-    trigger,
-    children,
-    width = 'trigger'
-  } = props;
-  const triggerRef = useRef(null);
-  const [position, setPosition] = useState({
-    top: 0,
-    left: 0
-  });
-  const [popoverWidth, setPopoverWidth] = useState(0);
-
-  // 计算弹窗位置
-  useEffect(() => {
-    if (open && triggerRef.current) {
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const triggerWidth = triggerRect.width;
-
-      // 设置弹窗宽度
-      if (width === 'trigger') {
-        setPopoverWidth(triggerWidth);
-      }
-      setPosition({
-        top: triggerRect.bottom + 4,
-        left: triggerRect.left
-      });
-    }
-  }, [open, width]);
-
-  // 点击外部关闭
-  useEffect(() => {
-    const handleClickOutside = event => {
-      const target = event.target;
-      const popoverEl = document.querySelector('.es-popover-portal');
-      if (popoverEl && !popoverEl.contains(target) && triggerRef.current && !triggerRef.current.contains(target)) {
-        onClose();
-      }
-    };
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [open, onClose]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: triggerRef
-  }, trigger), open ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
-    className: "es-popover-portal",
-    style: {
-      position: 'fixed',
-      top: position.top,
-      left: position.left,
-      width: popoverWidth || 'auto',
-      zIndex: 1000
-    }
-  }, children), document.body) : '');
-};
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-function cn(...inputs) {
-  return clsx(inputs);
-}
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const toCamelCase = string => string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase());
-const toPascalCase = string => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-const hasA11yProp = props => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-};
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Icon = /*#__PURE__*/forwardRef(({
-  color = "currentColor",
-  size = 24,
-  strokeWidth = 2,
-  absoluteStrokeWidth,
-  className = "",
-  children,
-  iconNode,
-  ...rest
-}, ref) => /*#__PURE__*/createElement("svg", {
-  ref,
-  ...defaultAttributes,
-  width: size,
-  height: size,
-  stroke: color,
-  strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-  className: mergeClasses("lucide", className),
-  ...(!children && !hasA11yProp(rest) && {
-    "aria-hidden": "true"
-  }),
-  ...rest
-}, [...iconNode.map(([tag, attrs]) => /*#__PURE__*/createElement(tag, attrs)), ...(Array.isArray(children) ? children : [children])]));
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const createLucideIcon = (iconName, iconNode) => {
-  const Component = /*#__PURE__*/forwardRef(({
-    className,
-    ...props
-  }, ref) => /*#__PURE__*/createElement(Icon, {
-    ref,
-    iconNode,
-    className: mergeClasses(`lucide-${toKebabCase(toPascalCase(iconName))}`, `lucide-${iconName}`, className),
-    ...props
-  }));
-  Component.displayName = toPascalCase(iconName);
-  return Component;
-};
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$m = [["rect", {
-  width: "6",
-  height: "16",
-  x: "4",
-  y: "2",
-  rx: "2",
-  key: "z5wdxg"
-}], ["rect", {
-  width: "6",
-  height: "9",
-  x: "14",
-  y: "9",
-  rx: "2",
-  key: "um7a8w"
-}], ["path", {
-  d: "M22 22H2",
-  key: "19qnx5"
-}]];
-const AlignEndHorizontal = createLucideIcon("align-end-horizontal", __iconNode$m);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$l = [["rect", {
-  width: "16",
-  height: "6",
-  x: "2",
-  y: "4",
-  rx: "2",
-  key: "10wcwx"
-}], ["rect", {
-  width: "9",
-  height: "6",
-  x: "9",
-  y: "14",
-  rx: "2",
-  key: "4p5bwg"
-}], ["path", {
-  d: "M22 22V2",
-  key: "12ipfv"
-}]];
-const AlignEndVertical = createLucideIcon("align-end-vertical", __iconNode$l);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$k = [["rect", {
-  width: "6",
-  height: "14",
-  x: "4",
-  y: "5",
-  rx: "2",
-  key: "1wwnby"
-}], ["rect", {
-  width: "6",
-  height: "10",
-  x: "14",
-  y: "7",
-  rx: "2",
-  key: "1fe6j6"
-}], ["path", {
-  d: "M17 22v-5",
-  key: "4b6g73"
-}], ["path", {
-  d: "M17 7V2",
-  key: "hnrr36"
-}], ["path", {
-  d: "M7 22v-3",
-  key: "1r4jpn"
-}], ["path", {
-  d: "M7 5V2",
-  key: "liy1u9"
-}]];
-const AlignHorizontalDistributeCenter = createLucideIcon("align-horizontal-distribute-center", __iconNode$k);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$j = [["rect", {
-  width: "6",
-  height: "16",
-  x: "4",
-  y: "6",
-  rx: "2",
-  key: "1n4dg1"
-}], ["rect", {
-  width: "6",
-  height: "9",
-  x: "14",
-  y: "6",
-  rx: "2",
-  key: "17khns"
-}], ["path", {
-  d: "M22 2H2",
-  key: "fhrpnj"
-}]];
-const AlignStartHorizontal = createLucideIcon("align-start-horizontal", __iconNode$j);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$i = [["rect", {
-  width: "9",
-  height: "6",
-  x: "6",
-  y: "14",
-  rx: "2",
-  key: "lpm2y7"
-}], ["rect", {
-  width: "16",
-  height: "6",
-  x: "6",
-  y: "4",
-  rx: "2",
-  key: "rdj6ps"
-}], ["path", {
-  d: "M2 2v20",
-  key: "1ivd8o"
-}]];
-const AlignStartVertical = createLucideIcon("align-start-vertical", __iconNode$i);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$h = [["path", {
-  d: "M22 17h-3",
-  key: "1lwga1"
-}], ["path", {
-  d: "M22 7h-5",
-  key: "o2endc"
-}], ["path", {
-  d: "M5 17H2",
-  key: "1gx9xc"
-}], ["path", {
-  d: "M7 7H2",
-  key: "6bq26l"
-}], ["rect", {
-  x: "5",
-  y: "14",
-  width: "14",
-  height: "6",
-  rx: "2",
-  key: "1qrzuf"
-}], ["rect", {
-  x: "7",
-  y: "4",
-  width: "10",
-  height: "6",
-  rx: "2",
-  key: "we8e9z"
-}]];
-const AlignVerticalDistributeCenter = createLucideIcon("align-vertical-distribute-center", __iconNode$h);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$g = [["path", {
-  d: "M5 12h14",
-  key: "1ays0h"
-}], ["path", {
-  d: "m12 5 7 7-7 7",
-  key: "xquz4c"
-}]];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$g);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$f = [["path", {
-  d: "M20 6 9 17l-5-5",
-  key: "1gmf2c"
-}]];
-const Check = createLucideIcon("check", __iconNode$f);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$e = [["path", {
-  d: "m6 9 6 6 6-6",
-  key: "qrunsl"
-}]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$d = [["path", {
-  d: "m7 15 5 5 5-5",
-  key: "1hf1tw"
-}], ["path", {
-  d: "m7 9 5-5 5 5",
-  key: "sgt6xg"
-}]];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$d);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$c = [["path", {
-  d: "m16 18 6-6-6-6",
-  key: "eg8j8"
-}], ["path", {
-  d: "m8 6-6 6 6 6",
-  key: "ppft3o"
-}]];
-const Code = createLucideIcon("code", __iconNode$c);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$b = [["ellipse", {
-  cx: "12",
-  cy: "5",
-  rx: "9",
-  ry: "3",
-  key: "msslwz"
-}], ["path", {
-  d: "M3 5V19A9 3 0 0 0 21 19V5",
-  key: "1wlel7"
-}], ["path", {
-  d: "M3 12A9 3 0 0 0 21 12",
-  key: "mv7ke4"
-}]];
-const Database = createLucideIcon("database", __iconNode$b);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$a = [["path", {
-  d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
-  key: "1oefj6"
-}], ["path", {
-  d: "M14 2v5a1 1 0 0 0 1 1h5",
-  key: "wfsgrz"
-}], ["path", {
-  d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1",
-  key: "1oajmo"
-}], ["path", {
-  d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1",
-  key: "mpwhp6"
-}]];
-const FileBraces = createLucideIcon("file-braces", __iconNode$a);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$9 = [["circle", {
-  cx: "9",
-  cy: "12",
-  r: "1",
-  key: "1vctgf"
-}], ["circle", {
-  cx: "9",
-  cy: "5",
-  r: "1",
-  key: "hp0tcf"
-}], ["circle", {
-  cx: "9",
-  cy: "19",
-  r: "1",
-  key: "fkjjf6"
-}], ["circle", {
-  cx: "15",
-  cy: "12",
-  r: "1",
-  key: "1tmaij"
-}], ["circle", {
-  cx: "15",
-  cy: "5",
-  r: "1",
-  key: "19l28e"
-}], ["circle", {
-  cx: "15",
-  cy: "19",
-  r: "1",
-  key: "f4zoj3"
-}]];
-const GripVertical = createLucideIcon("grip-vertical", __iconNode$9);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$8 = [["path", {
-  d: "M9 17H7A5 5 0 0 1 7 7h2",
-  key: "8i5ue5"
-}], ["path", {
-  d: "M15 7h2a5 5 0 1 1 0 10h-2",
-  key: "1b9ql8"
-}], ["line", {
-  x1: "8",
-  x2: "16",
-  y1: "12",
-  y2: "12",
-  key: "1jonct"
-}]];
-const Link2 = createLucideIcon("link-2", __iconNode$8);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$7 = [["path", {
-  d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
-  key: "1cjeqo"
-}], ["path", {
-  d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
-  key: "19qd67"
-}]];
-const Link = createLucideIcon("link", __iconNode$7);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$6 = [["path", {
-  d: "M15 3h6v6",
-  key: "1q9fwt"
-}], ["path", {
-  d: "m21 3-7 7",
-  key: "1l2asr"
-}], ["path", {
-  d: "m3 21 7-7",
-  key: "tjx5ai"
-}], ["path", {
-  d: "M9 21H3v-6",
-  key: "wtvkvv"
-}]];
-const Maximize2 = createLucideIcon("maximize-2", __iconNode$6);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$5 = [["path", {
-  d: "M5 12h14",
-  key: "1ays0h"
-}], ["path", {
-  d: "M12 5v14",
-  key: "s699le"
-}]];
-const Plus = createLucideIcon("plus", __iconNode$5);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$4 = [["path", {
-  d: "M14 17H5",
-  key: "gfn3mx"
-}], ["path", {
-  d: "M19 7h-9",
-  key: "6i9tg"
-}], ["circle", {
-  cx: "17",
-  cy: "17",
-  r: "3",
-  key: "18b49y"
-}], ["circle", {
-  cx: "7",
-  cy: "7",
-  r: "3",
-  key: "dfmy0x"
-}]];
-const Settings2 = createLucideIcon("settings-2", __iconNode$4);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$3 = [["path", {
-  d: "M10 11v6",
-  key: "nco0om"
-}], ["path", {
-  d: "M14 11v6",
-  key: "outv1u"
-}], ["path", {
-  d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
-  key: "miytrc"
-}], ["path", {
-  d: "M3 6h18",
-  key: "d0wm0j"
-}], ["path", {
-  d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
-  key: "e791ji"
-}]];
-const Trash2 = createLucideIcon("trash-2", __iconNode$3);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$2 = [["path", {
-  d: "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71",
-  key: "yqzxt4"
-}], ["path", {
-  d: "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71",
-  key: "4qinb0"
-}], ["line", {
-  x1: "8",
-  x2: "8",
-  y1: "2",
-  y2: "5",
-  key: "1041cp"
-}], ["line", {
-  x1: "2",
-  x2: "5",
-  y1: "8",
-  y2: "8",
-  key: "14m1p5"
-}], ["line", {
-  x1: "16",
-  x2: "16",
-  y1: "19",
-  y2: "22",
-  key: "rzdirn"
-}], ["line", {
-  x1: "19",
-  x2: "22",
-  y1: "16",
-  y2: "16",
-  key: "ox905f"
-}]];
-const Unlink = createLucideIcon("unlink", __iconNode$2);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$1 = [["path", {
-  d: "M12 3v12",
-  key: "1x0j5s"
-}], ["path", {
-  d: "m17 8-5-5-5 5",
-  key: "7q97r8"
-}], ["path", {
-  d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
-  key: "ih7n3h"
-}]];
-const Upload = createLucideIcon("upload", __iconNode$1);
-
-/**
- * @license lucide-react v0.561.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode = [["path", {
-  d: "M18 6 6 18",
-  key: "1bl5f8"
-}], ["path", {
-  d: "m6 6 12 12",
-  key: "d8bk6v"
-}]];
-const X = createLucideIcon("x", __iconNode);
-
-var styles$j = {"container":"es-container-K2hFq","visualWrapper":"es-visualWrapper-4dHVX","previewBox":"es-previewBox-LDujZ","previewElement":"es-previewElement-Bu8GM","grid":"es-grid-BmRRU","gridButton":"es-gridButton-6Vtr7","gridButtonSelected":"es-gridButtonSelected-fOpOm","section":"es-section-SaHDo","sectionLabel":"es-sectionLabel-hDWO0","buttonGroup":"es-buttonGroup-Nj258","alignButton":"es-alignButton-zAvz2","alignButtonSelected":"es-alignButtonSelected-kGGHJ","alignIcon":"es-alignIcon-mFjSX","alignIconRotated":"es-alignIconRotated-z4AwW"};
-
-const defaultValue$3 = {
-  horizontal: 'left',
-  vertical: 'top'
-};
-const horizontalOptions = [{
-  value: 'left',
-  icon: AlignStartVertical,
-  label: '左对齐'
-}, {
-  value: 'center',
-  icon: AlignVerticalDistributeCenter,
-  label: '水平居中'
-}, {
-  value: 'right',
-  icon: AlignEndVertical,
-  label: '右对齐'
-}, {
-  value: 'stretch',
-  icon: Maximize2,
-  label: '水平拉伸'
-}];
-const verticalOptions = [{
-  value: 'top',
-  icon: AlignStartHorizontal,
-  label: '顶部对齐'
-}, {
-  value: 'center',
-  icon: AlignHorizontalDistributeCenter,
-  label: '垂直居中'
-}, {
-  value: 'bottom',
-  icon: AlignEndHorizontal,
-  label: '底部对齐'
-}, {
-  value: 'stretch',
-  icon: Maximize2,
-  label: '垂直拉伸'
-}];
-
-// 9宫格位置映射
-const gridPositions = [{
-  h: 'left',
-  v: 'top'
-}, {
-  h: 'center',
-  v: 'top'
-}, {
-  h: 'right',
-  v: 'top'
-}, {
-  h: 'left',
-  v: 'center'
-}, {
-  h: 'center',
-  v: 'center'
-}, {
-  h: 'right',
-  v: 'center'
-}, {
-  h: 'left',
-  v: 'bottom'
-}, {
-  h: 'center',
-  v: 'bottom'
-}, {
-  h: 'right',
-  v: 'bottom'
-}];
-
-// 获取元素在容器中的位置样式
-const getElementPosition = (h, v) => {
-  const style = {
-    position: 'absolute'
-  };
-
-  // 水平位置
-  if (h === 'left') {
-    style.left = '4px';
-    style.width = '30%';
-  } else if (h === 'center') {
-    style.left = '50%';
-    style.transform = 'translateX(-50%)';
-    style.width = '30%';
-  } else if (h === 'right') {
-    style.right = '4px';
-    style.width = '30%';
-  } else {
-    style.left = '4px';
-    style.right = '4px';
-    style.width = 'auto';
-  }
-
-  // 垂直位置
-  if (v === 'top') {
-    style.top = '4px';
-    style.height = '30%';
-  } else if (v === 'center') {
-    style.top = '50%';
-    style.transform = h === 'center' ? 'translate(-50%, -50%)' : 'translateY(-50%)';
-    style.height = '30%';
-  } else if (v === 'bottom') {
-    style.bottom = '4px';
-    style.height = '30%';
-  } else {
-    style.top = '4px';
-    style.bottom = '4px';
-    style.height = 'auto';
-  }
-  return style;
-};
-const AlignSetter = props => {
-  const {
-    value,
-    initialValue,
-    onChange,
-    showHorizontal = true,
-    showVertical = true
-  } = props;
-  const currentValue = value ?? initialValue ?? defaultValue$3;
-  const updateAlign = useCallback(updates => {
-    onChange({
-      ...currentValue,
-      ...updates
-    });
-  }, [currentValue, onChange]);
-  const handleGridClick = useCallback((h, v) => {
-    onChange({
-      horizontal: h,
-      vertical: v
-    });
-  }, [onChange]);
-  const isGridSelected = (h, v) => currentValue.horizontal === h && currentValue.vertical === v;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$j.container
-  }, showHorizontal === true && showVertical === true ? /*#__PURE__*/React.createElement("div", {
-    className: styles$j.visualWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$j.previewBox
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$j.previewElement,
-    style: getElementPosition(currentValue.horizontal, currentValue.vertical)
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$j.grid
-  }, gridPositions.map(pos => /*#__PURE__*/React.createElement("button", {
-    "aria-label": `Align ${pos.h} ${pos.v}`,
-    className: cn(styles$j.gridButton, isGridSelected(pos.h, pos.v) ? styles$j.gridButtonSelected : ''),
-    key: `${pos.h}-${pos.v}`,
-    onClick: () => handleGridClick(pos.h, pos.v),
-    type: "button"
-  })))) : null, showHorizontal === true ? /*#__PURE__*/React.createElement("div", {
-    className: styles$j.section
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$j.sectionLabel
-  }, "\u6C34\u5E73\u5BF9\u9F50"), /*#__PURE__*/React.createElement("div", {
-    className: styles$j.buttonGroup
-  }, horizontalOptions.map(option => {
-    const Icon = option.icon;
-    const isRotated = option.value === 'stretch';
-    return /*#__PURE__*/React.createElement("button", {
-      "aria-label": option.label,
-      className: cn(styles$j.alignButton, currentValue.horizontal === option.value ? styles$j.alignButtonSelected : ''),
-      key: option.value,
-      onClick: () => updateAlign({
-        horizontal: option.value
-      }),
-      title: option.label,
-      type: "button"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      className: cn(styles$j.alignIcon, isRotated ? styles$j.alignIconRotated : '')
-    }));
-  }))) : null, showVertical === true ? /*#__PURE__*/React.createElement("div", {
-    className: styles$j.section
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$j.sectionLabel
-  }, "\u5782\u76F4\u5BF9\u9F50"), /*#__PURE__*/React.createElement("div", {
-    className: styles$j.buttonGroup
-  }, verticalOptions.map(option => {
-    const Icon = option.icon;
-    return /*#__PURE__*/React.createElement("button", {
-      "aria-label": option.label,
-      className: cn(styles$j.alignButton, currentValue.vertical === option.value ? styles$j.alignButtonSelected : ''),
-      key: option.value,
-      onClick: () => updateAlign({
-        vertical: option.value
-      }),
-      title: option.label,
-      type: "button"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      className: styles$j.alignIcon
-    }));
-  }))) : null);
-};
-
-var styles$i = {"container":"es-container-KSlB-","item":"es-item-xDCpZ","dragHandle":"es-dragHandle-lOaFv","input":"es-input-ItzPT","removeButton":"es-removeButton-ymAlo","removeIcon":"es-removeIcon-ld51f","addButton":"es-addButton-U1VQX","addIcon":"es-addIcon-6qJub"};
-
-const ArraySetter = props => {
-  const {
-    value,
-    initialValue,
-    itemSetter = 'string',
-    maxItems,
-    minItems = 0,
-    placeholder,
-    addButtonText = '添加项',
-    onChange
-  } = props;
-  const items = value ?? initialValue ?? [];
-  const handleAdd = useCallback(() => {
-    if (maxItems && items.length >= maxItems) {
-      return;
-    }
-    const newItem = itemSetter === 'number' ? 0 : '';
-    onChange([...items, newItem]);
-  }, [items, maxItems, itemSetter, onChange]);
-  const handleRemove = useCallback(index => {
-    if (items.length <= minItems) {
-      return;
-    }
-    const newItems = items.filter((_, i) => i !== index);
-    onChange(newItems);
-  }, [items, minItems, onChange]);
-  const handleChange = useCallback((index, newValue) => {
-    const newItems = [...items];
-    newItems[index] = newValue;
-    onChange(newItems);
-  }, [items, onChange]);
-  const canAdd = !maxItems || items.length < maxItems;
-  const canRemove = items.length > minItems;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$i.container
-  }, items.map((item, index) => /*#__PURE__*/React.createElement("div", {
-    className: styles$i.item,
-    key: `item-${String(item)}-${index}`
-  }, /*#__PURE__*/React.createElement(GripVertical, {
-    className: styles$i.dragHandle
-  }), /*#__PURE__*/React.createElement("input", {
-    className: styles$i.input,
-    onChange: e => {
-      const val = itemSetter === 'number' ? +e.target.value : e.target.value;
-      handleChange(index, val);
-    },
-    placeholder: placeholder,
-    type: itemSetter === 'number' ? 'number' : 'text',
-    value: item
-  }), /*#__PURE__*/React.createElement("button", {
-    className: styles$i.removeButton,
-    disabled: !canRemove,
-    onClick: () => handleRemove(index),
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Trash2, {
-    className: styles$i.removeIcon
-  })))), /*#__PURE__*/React.createElement("button", {
-    className: styles$i.addButton,
-    disabled: !canAdd,
-    onClick: handleAdd,
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Plus, {
-    className: styles$i.addIcon
-  }), addButtonText));
-};
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-var RGB_MAX = 255;
-var SV_MAX = 100;
-var rgbaToHsva = _ref => {
-  var {
-    r,
-    g,
-    b,
-    a
-  } = _ref;
-  var max = Math.max(r, g, b);
-  var delta = max - Math.min(r, g, b);
-  var hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
-  return {
-    h: 60 * (hh < 0 ? hh + 6 : hh),
-    s: max ? delta / max * SV_MAX : 0,
-    v: max / RGB_MAX * SV_MAX,
-    a
-  };
-};
-var hsvaToHslaString = hsva => {
-  var {
-    h,
-    s,
-    l,
-    a
-  } = hsvaToHsla(hsva);
-  return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
-};
-var hsvaToHsla = _ref5 => {
-  var {
-    h,
-    s,
-    v,
-    a
-  } = _ref5;
-  var hh = (200 - s) * v / SV_MAX;
-  return {
-    h,
-    s: hh > 0 && hh < 200 ? s * v / SV_MAX / (hh <= SV_MAX ? hh : 200 - hh) * SV_MAX : 0,
-    l: hh / 2,
-    a
-  };
-};
-var rgbToHex = _ref7 => {
-  var {
-    r,
-    g,
-    b
-  } = _ref7;
-  var bin = r << 16 | g << 8 | b;
-  return "#" + (h => new Array(7 - h.length).join('0') + h)(bin.toString(16));
-};
-var rgbaToHexa = _ref8 => {
-  var {
-    r,
-    g,
-    b,
-    a
-  } = _ref8;
-  var alpha = typeof a === 'number' && (a * 255 | 1 << 8).toString(16).slice(1);
-  return "" + rgbToHex({
-    r,
-    g,
-    b
-  }) + (alpha ? alpha : '');
-};
-var hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
-var hexToRgba = hex => {
-  var htemp = hex.replace('#', '');
-  if (/^#?/.test(hex) && htemp.length === 3) {
-    hex = "#" + htemp.charAt(0) + htemp.charAt(0) + htemp.charAt(1) + htemp.charAt(1) + htemp.charAt(2) + htemp.charAt(2);
-  }
-  var reg = new RegExp("[A-Za-z0-9]{2}", 'g');
-  var [r, g, b = 0, a] = hex.match(reg).map(v => parseInt(v, 16));
-  return {
-    r,
-    g,
-    b,
-    a: (a != null ? a : 255) / RGB_MAX
-  };
-};
-var hsvaToRgba = _ref9 => {
-  var {
-    h,
-    s,
-    v,
-    a
-  } = _ref9;
-  var _h = h / 60,
-    _s = s / SV_MAX,
-    _v = v / SV_MAX,
-    hi = Math.floor(_h) % 6;
-  var f = _h - Math.floor(_h),
-    _p = RGB_MAX * _v * (1 - _s),
-    _q = RGB_MAX * _v * (1 - _s * f),
-    _t = RGB_MAX * _v * (1 - _s * (1 - f));
-  _v *= RGB_MAX;
-  var rgba = {};
-  switch (hi) {
-    case 0:
-      rgba.r = _v;
-      rgba.g = _t;
-      rgba.b = _p;
-      break;
-    case 1:
-      rgba.r = _q;
-      rgba.g = _v;
-      rgba.b = _p;
-      break;
-    case 2:
-      rgba.r = _p;
-      rgba.g = _v;
-      rgba.b = _t;
-      break;
-    case 3:
-      rgba.r = _p;
-      rgba.g = _q;
-      rgba.b = _v;
-      break;
-    case 4:
-      rgba.r = _t;
-      rgba.g = _p;
-      rgba.b = _v;
-      break;
-    case 5:
-      rgba.r = _v;
-      rgba.g = _p;
-      rgba.b = _q;
-      break;
-  }
-  rgba.r = Math.round(rgba.r);
-  rgba.g = Math.round(rgba.g);
-  rgba.b = Math.round(rgba.b);
-  return _extends({}, rgba, {
-    a
-  });
-};
-var hsvaToRgbaString = hsva => {
-  var {
-    r,
-    g,
-    b,
-    a
-  } = hsvaToRgba(hsva);
-  return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
-};
-var rgbaToRgb = _ref0 => {
-  var {
-    r,
-    g,
-    b
-  } = _ref0;
-  return {
-    r,
-    g,
-    b
-  };
-};
-var hslaToHsl = _ref1 => {
-  var {
-    h,
-    s,
-    l
-  } = _ref1;
-  return {
-    h,
-    s,
-    l
-  };
-};
-var hsvaToHex = hsva => rgbToHex(hsvaToRgba(hsva));
-var hsvaToHsv = _ref10 => {
-  var {
-    h,
-    s,
-    v
-  } = _ref10;
-  return {
-    h,
-    s,
-    v
-  };
-};
-var rgbToXY = _ref12 => {
-  var {
-    r,
-    g,
-    b
-  } = _ref12;
-  var translateColor = function translateColor(color) {
-    return color <= 0.04045 ? color / 12.92 : Math.pow((color + 0.055) / 1.055, 2.4);
-  };
-  var red = translateColor(r / 255);
-  var green = translateColor(g / 255);
-  var blue = translateColor(b / 255);
-  var xyz = {};
-  xyz.x = red * 0.4124 + green * 0.3576 + blue * 0.1805;
-  xyz.y = red * 0.2126 + green * 0.7152 + blue * 0.0722;
-  xyz.bri = red * 0.0193 + green * 0.1192 + blue * 0.9505;
-  return xyz;
-};
-var color = str => {
-  var rgb;
-  var hsl;
-  var hsv;
-  var rgba;
-  var hsla;
-  var hsva;
-  var xy;
-  var hex;
-  var hexa;
-  if (typeof str === 'string' && validHex$1(str)) {
-    hsva = hexToHsva(str);
-    hex = str;
-  } else if (typeof str !== 'string') {
-    hsva = str;
-  }
-  if (hsva) {
-    hsv = hsvaToHsv(hsva);
-    hsla = hsvaToHsla(hsva);
-    rgba = hsvaToRgba(hsva);
-    hexa = rgbaToHexa(rgba);
-    hex = hsvaToHex(hsva);
-    hsl = hslaToHsl(hsla);
-    rgb = rgbaToRgb(rgba);
-    xy = rgbToXY(rgb);
-  }
-  return {
-    rgb,
-    hsl,
-    hsv,
-    rgba,
-    hsla,
-    hsva,
-    hex,
-    hexa,
-    xy
-  };
-};
-var validHex$1 = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
-
-function useEventCallback(handler) {
-  var callbackRef = useRef(handler);
-  useEffect(() => {
-    callbackRef.current = handler;
-  });
-  return useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
-}
-var isTouch = event => 'touches' in event;
-var preventDefaultMove = event => {
-  !isTouch(event) && event.preventDefault && event.preventDefault();
-};
-var clamp = function clamp(number, min, max) {
-  if (min === void 0) {
-    min = 0;
-  }
-  if (max === void 0) {
-    max = 1;
-  }
-  return number > max ? max : number < min ? min : number;
-};
-var getRelativePosition = (node, event) => {
-  var rect = node.getBoundingClientRect();
-  var pointer = isTouch(event) ? event.touches[0] : event;
-  return {
-    left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
-    width: rect.width,
-    height: rect.height,
-    x: pointer.pageX - (rect.left + window.pageXOffset),
-    y: pointer.pageY - (rect.top + window.pageYOffset)
-  };
-};
-
-var _excluded$8 = ["prefixCls", "className", "onMove", "onDown"];
-var Interactive = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-interactive',
-      className,
-      onMove,
-      onDown
-    } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded$8);
-  var container = useRef(null);
-  var hasTouched = useRef(false);
-  var [isDragging, setDragging] = useState(false);
-  var onMoveCallback = useEventCallback(onMove);
-  var onKeyCallback = useEventCallback(onDown);
-  var isValid = event => {
-    if (hasTouched.current && !isTouch(event)) return false;
-    hasTouched.current = isTouch(event);
-    return true;
-  };
-  var handleMove = useCallback(event => {
-    preventDefaultMove(event);
-    if (!container.current) return;
-    var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
-    if (!isDown) {
-      setDragging(false);
-      return;
-    }
-    onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
-  }, [onMoveCallback]);
-  var handleMoveEnd = useCallback(() => setDragging(false), []);
-  var toggleDocumentEvents = useCallback(state => {
-    if (state) {
-      window.addEventListener(hasTouched.current ? 'touchmove' : 'mousemove', handleMove);
-      window.addEventListener(hasTouched.current ? 'touchend' : 'mouseup', handleMoveEnd);
-    } else {
-      window.removeEventListener('mousemove', handleMove);
-      window.removeEventListener('mouseup', handleMoveEnd);
-      window.removeEventListener('touchmove', handleMove);
-      window.removeEventListener('touchend', handleMoveEnd);
-    }
-  }, [handleMove, handleMoveEnd]);
-  useEffect(() => {
-    toggleDocumentEvents(isDragging);
-    return () => {
-      toggleDocumentEvents(false);
-    };
-  }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
-  var handleMoveStart = useCallback(event => {
-    var activeEl = document.activeElement;
-    activeEl == null || activeEl.blur();
-    preventDefaultMove(event.nativeEvent);
-    if (!isValid(event.nativeEvent)) return;
-    if (!container.current) return;
-    onKeyCallback == null || onKeyCallback(getRelativePosition(container.current, event.nativeEvent), event.nativeEvent);
-    setDragging(true);
-  }, [onKeyCallback]);
-  return /*#__PURE__*/jsx("div", _extends({}, reset, {
-    className: [prefixCls, className || ''].filter(Boolean).join(' '),
-    style: _extends({}, reset.style, {
-      touchAction: 'none'
-    }),
-    ref: container,
-    tabIndex: 0,
-    onMouseDown: handleMoveStart,
-    onTouchStart: handleMoveStart
-  }));
-});
-Interactive.displayName = 'Interactive';
-
-var Pointer$1 = _ref => {
-  var {
-    className,
-    color,
-    left,
-    top,
-    prefixCls
-  } = _ref;
-  var style = {
-    position: 'absolute',
-    top,
-    left
-  };
-  var stylePointer = {
-    '--saturation-pointer-box-shadow': 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
-    width: 6,
-    height: 6,
-    transform: 'translate(-3px, -3px)',
-    boxShadow: 'var(--saturation-pointer-box-shadow)',
-    borderRadius: '50%',
-    backgroundColor: color
-  };
-  return useMemo(() => /*#__PURE__*/jsx("div", {
-    className: prefixCls + "-pointer " + (className || ''),
-    style: style,
-    children: /*#__PURE__*/jsx("div", {
-      className: prefixCls + "-fill",
-      style: stylePointer
-    })
-  }), [top, left, color, className, prefixCls]);
-};
-
-var _excluded$7 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
-var Saturation = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var _hsva$h;
-  var {
-      prefixCls = 'w-color-saturation',
-      radius = 0,
-      pointer,
-      className,
-      hue = 0,
-      style,
-      hsva,
-      onChange
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
-  var containerStyle = _extends({
-    width: 200,
-    height: 200,
-    borderRadius: radius
-  }, style, {
-    position: 'relative'
-  });
-  var handleChange = (interaction, event) => {
-    onChange && hsva && onChange({
-      h: hsva.h,
-      s: interaction.left * 100,
-      v: (1 - interaction.top) * 100,
-      a: hsva.a
-    });
-  };
-  var handleKeyDown = useCallback(event => {
-    if (!hsva || !onChange) return;
-    var step = 1;
-    var newS = hsva.s;
-    var newV = hsva.v;
-    var changed = false;
-    switch (event.key) {
-      case 'ArrowLeft':
-        newS = Math.max(0, hsva.s - step);
-        changed = true;
-        event.preventDefault();
-        break;
-      case 'ArrowRight':
-        newS = Math.min(100, hsva.s + step);
-        changed = true;
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-        newV = Math.min(100, hsva.v + step);
-        changed = true;
-        event.preventDefault();
-        break;
-      case 'ArrowDown':
-        newV = Math.max(0, hsva.v - step);
-        changed = true;
-        event.preventDefault();
-        break;
-      default:
-        return;
-    }
-    if (changed) {
-      onChange({
-        h: hsva.h,
-        s: newS,
-        v: newV,
-        a: hsva.a
-      });
-    }
-  }, [hsva, onChange]);
-  var pointerElement = useMemo(() => {
-    if (!hsva) return null;
-    var comProps = {
-      top: 100 - hsva.v + "%",
-      left: hsva.s + "%",
-      color: hsvaToHslaString(hsva)
-    };
-    if (pointer && typeof pointer === 'function') {
-      return pointer(_extends({
-        prefixCls
-      }, comProps));
-    }
-    return /*#__PURE__*/jsx(Pointer$1, _extends({
-      prefixCls: prefixCls
-    }, comProps));
-  }, [hsva, pointer, prefixCls]);
-  var handleClick = useCallback(event => {
-    event.target.focus();
-  }, []);
-  return /*#__PURE__*/jsx(Interactive, _extends({
-    className: [prefixCls, className || ''].filter(Boolean).join(' ')
-  }, other, {
-    style: _extends({
-      position: 'absolute',
-      inset: 0,
-      cursor: 'crosshair',
-      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((_hsva$h = hsva == null ? void 0 : hsva.h) != null ? _hsva$h : hue) + ", 100%, 50%))"
-    }, containerStyle, {
-      outline: 'none'
-    }),
-    ref: ref,
-    onMove: handleChange,
-    onDown: handleChange,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    children: pointerElement
-  }));
-});
-Saturation.displayName = 'Saturation';
-
-var _excluded$6 = ["className", "prefixCls", "left", "top", "style", "fillProps"];
-var Pointer = _ref => {
-  var {
-      className,
-      prefixCls,
-      left,
-      top,
-      style,
-      fillProps
-    } = _ref,
-    reset = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var styleWrapper = _extends({}, style, {
-    position: 'absolute',
-    left,
-    top
-  });
-  var stylePointer = _extends({
-    width: 18,
-    height: 18,
-    boxShadow: 'var(--alpha-pointer-box-shadow)',
-    borderRadius: '50%',
-    backgroundColor: 'var(--alpha-pointer-background-color)'
-  }, fillProps == null ? void 0 : fillProps.style, {
-    transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)'
-  });
-  return /*#__PURE__*/jsx("div", _extends({
-    className: prefixCls + "-pointer " + (className || ''),
-    style: styleWrapper
-  }, reset, {
-    children: /*#__PURE__*/jsx("div", _extends({
-      className: prefixCls + "-fill"
-    }, fillProps, {
-      style: stylePointer
-    }))
-  }));
-};
-
-var _excluded$5 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
-var BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
-var Alpha = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-alpha',
-      className,
-      hsva,
-      background,
-      bgProps = {},
-      innerProps = {},
-      pointerProps = {},
-      radius = 0,
-      width,
-      height = 16,
-      direction = 'horizontal',
-      style,
-      onChange,
-      pointer
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
-  var handleChange = offset => {
-    onChange && onChange(_extends({}, hsva, {
-      a: direction === 'horizontal' ? offset.left : offset.top
-    }), offset);
-  };
-  var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
-    a: 1
-  }));
-  var innerBackground = "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
-  var comProps = {};
-  if (direction === 'horizontal') {
-    comProps.left = hsva.a * 100 + "%";
-  } else {
-    comProps.top = hsva.a * 100 + "%";
-  }
-  var styleWrapper = _extends({
-    '--alpha-background-color': '#fff',
-    '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
-    '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
-    borderRadius: radius,
-    background: "url(" + BACKGROUND_IMG + ") left center",
-    backgroundColor: 'var(--alpha-background-color)'
-  }, {
-    width,
-    height
-  }, style, {
-    position: 'relative'
-  });
-  var handleKeyDown = useCallback(event => {
-    var step = 0.01;
-    var currentAlpha = hsva.a;
-    var newAlpha = currentAlpha;
-    switch (event.key) {
-      case 'ArrowLeft':
-        if (direction === 'horizontal') {
-          newAlpha = Math.max(0, currentAlpha - step);
-          event.preventDefault();
-        }
-        break;
-      case 'ArrowRight':
-        if (direction === 'horizontal') {
-          newAlpha = Math.min(1, currentAlpha + step);
-          event.preventDefault();
-        }
-        break;
-      case 'ArrowUp':
-        if (direction === 'vertical') {
-          newAlpha = Math.max(0, currentAlpha - step);
-          event.preventDefault();
-        }
-        break;
-      case 'ArrowDown':
-        if (direction === 'vertical') {
-          newAlpha = Math.min(1, currentAlpha + step);
-          event.preventDefault();
-        }
-        break;
-      default:
-        return;
-    }
-    if (newAlpha !== currentAlpha) {
-      var syntheticOffset = {
-        left: direction === 'horizontal' ? newAlpha : hsva.a,
-        top: direction === 'vertical' ? newAlpha : hsva.a,
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0
-      };
-      onChange && onChange(_extends({}, hsva, {
-        a: newAlpha
-      }), syntheticOffset);
-    }
-  }, [hsva, direction, onChange]);
-  var handleClick = useCallback(event => {
-    event.target.focus();
-  }, []);
-  var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
-    prefixCls
-  }, pointerProps, comProps)) : /*#__PURE__*/jsx(Pointer, _extends({}, pointerProps, {
-    prefixCls: prefixCls
-  }, comProps));
-  return /*#__PURE__*/jsxs("div", _extends({}, other, {
-    className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
-    style: styleWrapper,
-    ref: ref,
-    children: [/*#__PURE__*/jsx("div", _extends({}, bgProps, {
-      style: _extends({
-        inset: 0,
-        position: 'absolute',
-        background: background || innerBackground,
-        borderRadius: radius
-      }, bgProps.style)
-    })), /*#__PURE__*/jsx(Interactive, _extends({}, innerProps, {
-      style: _extends({}, innerProps.style, {
-        inset: 0,
-        zIndex: 1,
-        position: 'absolute',
-        outline: 'none'
-      }),
-      onMove: handleChange,
-      onDown: handleChange,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      children: pointerElement
-    }))]
-  }));
-});
-Alpha.displayName = 'Alpha';
-
-var _excluded$4 = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
-var validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
-var getNumberValue = value => Number(String(value).replace(/%/g, ''));
-var EditableInput = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-editable-input',
-      placement = 'bottom',
-      label,
-      value: initValue,
-      className,
-      style,
-      labelStyle,
-      inputStyle,
-      onChange,
-      onBlur,
-      renderInput
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
-  var [value, setValue] = useState(initValue);
-  var isFocus = useRef(false);
-  useEffect(() => {
-    if (props.value !== value) {
-      if (!isFocus.current) {
-        setValue(props.value);
-      }
-    }
-  }, [props.value]);
-  function handleChange(evn, valInit) {
-    var value = (valInit || evn.target.value).trim().replace(/^#/, '');
-    if (validHex(value)) {
-      onChange && onChange(evn, value);
-    }
-    var val = getNumberValue(value);
-    if (!isNaN(val)) {
-      onChange && onChange(evn, val);
-    }
-    setValue(value);
-  }
-  function handleBlur(evn) {
-    isFocus.current = false;
-    setValue(props.value);
-    onBlur && onBlur(evn);
-  }
-  var placementStyle = {};
-  if (placement === 'bottom') {
-    placementStyle['flexDirection'] = 'column';
-  }
-  if (placement === 'top') {
-    placementStyle['flexDirection'] = 'column-reverse';
-  }
-  if (placement === 'left') {
-    placementStyle['flexDirection'] = 'row-reverse';
-  }
-  var wrapperStyle = _extends({
-    '--editable-input-label-color': 'rgb(153, 153, 153)',
-    '--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
-    '--editable-input-color': '#666',
-    position: 'relative',
-    alignItems: 'center',
-    display: 'flex',
-    fontSize: 11
-  }, placementStyle, style);
-  var editableStyle = _extends({
-    width: '100%',
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 3,
-    paddingRight: 3,
-    fontSize: 11,
-    background: 'transparent',
-    boxSizing: 'border-box',
-    border: 'none',
-    color: 'var(--editable-input-color)',
-    boxShadow: 'var(--editable-input-box-shadow)'
-  }, inputStyle);
-  var inputProps = _extends({
-    value,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    autoComplete: 'off',
-    onFocus: () => isFocus.current = true
-  }, other, {
-    style: editableStyle,
-    onFocusCapture: e => {
-      var elm = e.target;
-      elm.setSelectionRange(elm.value.length, elm.value.length);
-    }
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: [prefixCls, className || ''].filter(Boolean).join(' '),
-    style: wrapperStyle,
-    children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/jsx("input", _extends({
-      ref: ref
-    }, inputProps)), label && /*#__PURE__*/jsx("span", {
-      style: _extends({
-        color: 'var(--editable-input-label-color)',
-        textTransform: 'capitalize'
-      }, labelStyle),
-      children: label
-    })]
-  });
-});
-EditableInput.displayName = 'EditableInput';
-
-var _excluded$3 = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
-var EditableInputRGBA = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-editable-input-rgba',
-      hsva,
-      placement = 'bottom',
-      rProps = {},
-      gProps = {},
-      bProps = {},
-      aProps = {},
-      className,
-      style,
-      onChange
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
-  var rgba = hsva ? hsvaToRgba(hsva) : {};
-  function handleBlur(evn) {
-    var value = Number(evn.target.value);
-    if (value && value > 255) {
-      evn.target.value = '255';
-    }
-    if (value && value < 0) {
-      evn.target.value = '0';
-    }
-  }
-  var handleAlphaBlur = evn => {
-    var value = Number(evn.target.value);
-    if (value && value > 100) {
-      evn.target.value = '100';
-    }
-    if (value && value < 0) {
-      evn.target.value = '0';
-    }
-  };
-  var handleChange = (value, type, evn) => {
-    if (typeof value === 'number') {
-      if (type === 'a') {
-        if (value < 0) value = 0;
-        if (value > 100) value = 100;
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          a: value / 100
-        }))));
-      }
-      if (value > 255) {
-        value = 255;
-        evn.target.value = '255';
-      }
-      if (value < 0) {
-        value = 0;
-        evn.target.value = '0';
-      }
-      if (type === 'r') {
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          r: value
-        }))));
-      }
-      if (type === 'g') {
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          g: value
-        }))));
-      }
-      if (type === 'b') {
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          b: value
-        }))));
-      }
-    }
-  };
-  var roundedAlpha = rgba.a ? Math.round(rgba.a * 100) / 100 : 0;
-  return /*#__PURE__*/jsxs("div", _extends({
-    ref: ref,
-    className: [prefixCls, className || ''].filter(Boolean).join(' ')
-  }, other, {
-    style: _extends({
-      fontSize: 11,
-      display: 'flex'
-    }, style),
-    children: [/*#__PURE__*/jsx(EditableInput, _extends({
-      label: "R",
-      value: rgba.r || 0,
-      onBlur: handleBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'r', evn)
-    }, rProps, {
-      style: _extends({}, rProps.style)
-    })), /*#__PURE__*/jsx(EditableInput, _extends({
-      label: "G",
-      value: rgba.g || 0,
-      onBlur: handleBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'g', evn)
-    }, gProps, {
-      style: _extends({
-        marginLeft: 5
-      }, rProps.style)
-    })), /*#__PURE__*/jsx(EditableInput, _extends({
-      label: "B",
-      value: rgba.b || 0,
-      onBlur: handleBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'b', evn)
-    }, bProps, {
-      style: _extends({
-        marginLeft: 5
-      }, bProps.style)
-    })), aProps && /*#__PURE__*/jsx(EditableInput, _extends({
-      label: "A",
-      value: parseInt(String(roundedAlpha * 100), 10),
-      onBlur: handleAlphaBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'a', evn)
-    }, aProps, {
-      style: _extends({
-        marginLeft: 5
-      }, aProps.style)
-    }))]
-  }));
-});
-EditableInputRGBA.displayName = 'EditableInputRGBA';
-
-var _excluded$2 = ["prefixCls", "className", "hue", "onChange", "direction"];
-var Hue = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-hue',
-      className,
-      hue = 0,
-      onChange: _onChange,
-      direction = 'horizontal'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
-  return /*#__PURE__*/jsx(Alpha, _extends({
-    ref: ref,
-    className: prefixCls + " " + (className || '')
-  }, other, {
-    direction: direction,
-    background: "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
-    hsva: {
-      h: hue,
-      s: 100,
-      v: 100,
-      a: hue / 360
-    },
-    onChange: (_, interaction) => {
-      _onChange && _onChange({
-        h: direction === 'horizontal' ? 360 * interaction.left : 360 * interaction.top
-      });
-    }
-  }));
-});
-Hue.displayName = 'Hue';
-
-var _excluded$1 = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
-var Swatch = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-swatch',
-      className,
-      color: color$1,
-      colors = [],
-      style,
-      rectProps = {},
-      onChange,
-      addonAfter,
-      addonBefore,
-      rectRender
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1);
-  var rectStyle = _extends({
-    '--swatch-background-color': 'rgb(144, 19, 254)',
-    background: 'var(--swatch-background-color)',
-    height: 15,
-    width: 15,
-    marginRight: 5,
-    marginBottom: 5,
-    cursor: 'pointer',
-    position: 'relative',
-    outline: 'none',
-    borderRadius: 2
-  }, rectProps.style);
-  var handleClick = (hex, evn) => {
-    onChange && onChange(hexToHsva(hex), color(hexToHsva(hex)), evn);
-  };
-  return /*#__PURE__*/jsxs("div", _extends({
-    ref: ref
-  }, other, {
-    className: [prefixCls, className || ''].filter(Boolean).join(' '),
-    style: _extends({
-      display: 'flex',
-      flexWrap: 'wrap',
-      position: 'relative'
-    }, style),
-    children: [addonBefore && /*#__PURE__*/React$1.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
-      var title = '';
-      var background = '';
-      if (typeof item === 'string') {
-        title = item;
-        background = item;
-      }
-      if (typeof item === 'object' && item.color) {
-        title = item.title || item.color;
-        background = item.color;
-      }
-      var checked = color$1 && color$1.toLocaleLowerCase() === background.toLocaleLowerCase();
-      var render = rectRender && rectRender({
-        title,
-        color: background,
-        checked: !!checked,
-        style: _extends({}, rectStyle, {
-          background
-        }),
-        onClick: evn => handleClick(background, evn)
-      });
-      if (render) {
-        return /*#__PURE__*/jsx(Fragment, {
-          children: render
-        }, idx);
-      }
-      var child = rectProps.children && /*#__PURE__*/React$1.isValidElement(rectProps.children) ? /*#__PURE__*/React$1.cloneElement(rectProps.children, {
-        color: background,
-        checked
-      }) : null;
-      return /*#__PURE__*/jsx("div", _extends({
-        tabIndex: 0,
-        title: title,
-        onClick: evn => handleClick(background, evn)
-      }, rectProps, {
-        children: child,
-        style: _extends({}, rectStyle, {
-          background
-        })
-      }), idx);
-    }), addonAfter && /*#__PURE__*/React$1.isValidElement(addonAfter) && addonAfter]
-  }));
-});
-Swatch.displayName = 'Swatch';
-
-var _excluded = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"];
-var PRESET_COLORS = ['#D0021B', '#F5A623', '#f8e61b', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'];
-var Bar = props => /*#__PURE__*/jsx("div", {
-  style: {
-    boxShadow: 'rgb(0 0 0 / 60%) 0px 0px 2px',
-    width: 4,
-    top: 1,
-    bottom: 1,
-    left: props.left,
-    borderRadius: 1,
-    position: 'absolute',
-    backgroundColor: '#fff'
-  }
-});
-var Sketch = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-sketch',
-      className,
-      onChange,
-      width = 218,
-      presetColors = PRESET_COLORS,
-      color: color$1,
-      editableDisable = true,
-      disableAlpha = false,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  var [hsva, setHsva] = useState({
-    h: 209,
-    s: 36,
-    v: 90,
-    a: 1
-  });
-  useEffect(() => {
-    if (typeof color$1 === 'string' && validHex$1(color$1)) {
-      setHsva(hexToHsva(color$1));
-    }
-    if (typeof color$1 === 'object') {
-      setHsva(color$1);
-    }
-  }, [color$1]);
-  var handleChange = hsv => {
-    setHsva(hsv);
-    onChange && onChange(color(hsv));
-  };
-  var handleHex = (value, evn) => {
-    if (typeof value === 'string' && validHex$1(value) && /(3|6)/.test(String(value.length))) {
-      handleChange(hexToHsva(value));
-    }
-  };
-  var handleAlphaChange = newAlpha => handleChange(_extends({}, hsva, {
-    a: newAlpha.a
-  }));
-  var handleSaturationChange = newColor => handleChange(_extends({}, hsva, newColor, {
-    a: hsva.a
-  }));
-  var styleMain = _extends({
-    '--sketch-background': 'rgb(255, 255, 255)',
-    '--sketch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
-    '--sketch-swatch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset',
-    '--sketch-alpha-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset',
-    '--sketch-swatch-border-top': '1px solid rgb(238, 238, 238)',
-    background: 'var(--sketch-background)',
-    borderRadius: 4,
-    boxShadow: 'var(--sketch-box-shadow)',
-    width
-  }, style);
-  var styleAlpha = {
-    borderRadius: 2,
-    background: hsvaToRgbaString(hsva),
-    boxShadow: 'var(--sketch-alpha-box-shadow)'
-  };
-  var styleSwatch = {
-    borderTop: 'var(--sketch-swatch-border-top)',
-    paddingTop: 10,
-    paddingLeft: 10
-  };
-  var styleSwatchRect = {
-    marginRight: 10,
-    marginBottom: 10,
-    borderRadius: 3,
-    boxShadow: 'var(--sketch-swatch-box-shadow)'
-  };
-  return /*#__PURE__*/jsxs("div", _extends({}, other, {
-    className: prefixCls + " " + (className || ''),
-    ref: ref,
-    style: styleMain,
-    children: [/*#__PURE__*/jsxs("div", {
-      style: {
-        padding: '10px 10px 8px'
-      },
-      children: [/*#__PURE__*/jsx(Saturation, {
-        hsva: hsva,
-        style: {
-          width: 'auto',
-          height: 150
-        },
-        onChange: handleSaturationChange
-      }), /*#__PURE__*/jsxs("div", {
-        style: {
-          display: 'flex',
-          marginTop: 4
-        },
-        children: [/*#__PURE__*/jsxs("div", {
-          style: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/jsx(Hue, {
-            width: "auto",
-            height: 10,
-            hue: hsva.h,
-            pointer: Bar,
-            innerProps: {
-              style: {
-                marginLeft: 1,
-                marginRight: 5
-              }
-            },
-            onChange: newHue => handleChange(_extends({}, hsva, newHue))
-          }), !disableAlpha && /*#__PURE__*/jsx(Alpha, {
-            width: "auto",
-            height: 10,
-            hsva: hsva,
-            pointer: Bar,
-            style: {
-              marginTop: 4
-            },
-            innerProps: {
-              style: {
-                marginLeft: 1,
-                marginRight: 5
-              }
-            },
-            onChange: handleAlphaChange
-          })]
-        }), !disableAlpha && /*#__PURE__*/jsx(Alpha, {
-          width: 24,
-          height: 24,
-          hsva: hsva,
-          radius: 2,
-          style: {
-            marginLeft: 4
-          },
-          bgProps: {
-            style: {
-              background: 'transparent'
-            }
-          },
-          innerProps: {
-            style: styleAlpha
-          },
-          pointer: () => /*#__PURE__*/jsx(Fragment, {})
-        })]
-      })]
-    }), editableDisable && /*#__PURE__*/jsxs("div", {
-      style: {
-        display: 'flex',
-        margin: '0 10px 3px 10px'
-      },
-      children: [/*#__PURE__*/jsx(EditableInput, {
-        label: "Hex",
-        value: hsvaToHex(hsva).replace(/^#/, '').toLocaleUpperCase(),
-        onChange: (evn, val) => handleHex(val),
-        style: {
-          minWidth: 58
-        }
-      }), /*#__PURE__*/jsx(EditableInputRGBA, {
-        hsva: hsva,
-        style: {
-          marginLeft: 6
-        },
-        aProps: !disableAlpha ? {} : false,
-        onChange: result => handleChange(result.hsva)
-      })]
-    }), presetColors && presetColors.length > 0 && /*#__PURE__*/jsx(Swatch, {
-      style: styleSwatch,
-      colors: presetColors,
-      color: hsvaToHex(hsva),
-      onChange: hsvColor => handleChange(hsvColor),
-      rectProps: {
-        style: styleSwatchRect
-      }
-    })]
-  }));
-});
-Sketch.displayName = 'Sketch';
-
-var styles$h = {"trigger":"es-trigger-w-aUi","colorPreview":"es-colorPreview-SUgiJ","colorValue":"es-colorValue-cYdRP","popover":"es-popover-SfIUB"};
-
-const ColorSetter = props => {
-  const {
-    value,
-    initialValue,
-    onChange,
-    disableAlpha = false
-  } = props;
-  const [open, setOpen] = useState(false);
-  return /*#__PURE__*/React.createElement(Popover, {
-    onClose: () => setOpen(false),
-    open: open,
-    trigger: /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Select color",
-      className: styles$h.trigger,
-      onClick: () => setOpen(true),
-      type: "button"
-    }, /*#__PURE__*/React.createElement("div", {
-      "aria-label": "Current color",
-      className: styles$h.colorPreview,
-      style: {
-        backgroundColor: value ?? initialValue
-      }
-    }), /*#__PURE__*/React.createElement("span", {
-      className: styles$h.colorValue
-    }, value ?? initialValue))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$h.popover
-  }, /*#__PURE__*/React.createElement(Sketch, {
-    color: value,
-    disableAlpha: disableAlpha,
-    onChange: res => onChange(res.hexa),
-    presetColors: []
-  })));
-};
-
-var styles$g = {"trigger":"es-trigger-fTNvQ","triggerIcon":"es-triggerIcon-1mdQ0","triggerIconPrimary":"es-triggerIconPrimary-opifh","triggerIconMuted":"es-triggerIconMuted-CWgDl","triggerText":"es-triggerText-WeQRu","popoverContent":"es-popoverContent-6qE--","tabsList":"es-tabsList-liSeY","tabTrigger":"es-tabTrigger-6j7K-","tabTriggerActive":"es-tabTriggerActive-g6hcl","tabTriggerIcon":"es-tabTriggerIcon-dRSAp","tabContent":"es-tabContent--H166","tabContentActive":"es-tabContentActive-Fjdu5","section":"es-section-eDYxd","sectionLabel":"es-sectionLabel--LHE8","input":"es-input--OymK","inputMono":"es-inputMono-pCJz3","textarea":"es-textarea-iurkc","booleanButtons":"es-booleanButtons-0bM8P","booleanButton":"es-booleanButton-3fXcB","booleanButtonActive":"es-booleanButtonActive-zGWrZ","datasourceList":"es-datasourceList-VIRXb","datasourceButton":"es-datasourceButton-giz6D","datasourceButtonActive":"es-datasourceButtonActive-m5WPP","datasourceIcon":"es-datasourceIcon-q9Omt","emptyState":"es-emptyState-rI2si","hint":"es-hint-zfWLZ","preview":"es-preview-tUInw"};
-
-const defaultValue$2 = {
-  type: 'static',
-  staticValue: ''
-};
-const DataBindingSetter = props => {
-  const {
-    value,
-    initialValue,
-    onChange,
-    dataType = 'any',
-    showPreview = true,
-    dataSources = []
-  } = props;
-  const currentValue = value ?? initialValue ?? defaultValue$2;
-  const [open, setOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState(currentValue.type);
-  const updateBinding = useCallback(updates => {
-    onChange({
-      ...currentValue,
-      ...updates
-    });
-  }, [currentValue, onChange]);
-  const handleTypeChange = useCallback(type => {
-    setActiveTab(type);
-    updateBinding({
-      type
-    });
-  }, [updateBinding]);
-  const handleStaticValueChange = useCallback(staticValue => {
-    updateBinding({
-      staticValue
-    });
-  }, [updateBinding]);
-  const handleDatasourceChange = useCallback(datasourceId => {
-    updateBinding({
-      datasourceId,
-      datasourcePath: ''
-    });
-  }, [updateBinding]);
-  const handlePathChange = useCallback(datasourcePath => {
-    updateBinding({
-      datasourcePath
-    });
-  }, [updateBinding]);
-
-  // 渲染静态值输入
-  const renderStaticInput = useMemo(() => {
-    switch (dataType) {
-      case 'number':
-        return /*#__PURE__*/React.createElement("input", {
-          className: styles$g.input,
-          onChange: e => handleStaticValueChange(Number(e.target.value)),
-          placeholder: "\u8F93\u5165\u6570\u503C",
-          type: "number",
-          value: currentValue.staticValue ?? ''
-        });
-      case 'boolean':
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles$g.booleanButtons
-        }, /*#__PURE__*/React.createElement("button", {
-          className: cn(styles$g.booleanButton, currentValue.staticValue === true ? styles$g.booleanButtonActive : ''),
-          onClick: () => handleStaticValueChange(true),
-          type: "button"
-        }, "True"), /*#__PURE__*/React.createElement("button", {
-          className: cn(styles$g.booleanButton, currentValue.staticValue === false ? styles$g.booleanButtonActive : ''),
-          onClick: () => handleStaticValueChange(false),
-          type: "button"
-        }, "False"));
-      case 'array':
-      case 'object':
-        return /*#__PURE__*/React.createElement("textarea", {
-          className: styles$g.textarea,
-          onChange: e => {
-            try {
-              const parsed = JSON.parse(e.target.value);
-              handleStaticValueChange(parsed);
-            } catch {
-              handleStaticValueChange(e.target.value);
-            }
-          },
-          placeholder: dataType === 'array' ? '["item1", "item2"]' : '{"key": "value"}',
-          value: typeof currentValue.staticValue === 'string' ? currentValue.staticValue : JSON.stringify(currentValue.staticValue, null, 2) ?? ''
-        });
-      default:
-        return /*#__PURE__*/React.createElement("input", {
-          className: styles$g.input,
-          onChange: e => handleStaticValueChange(e.target.value),
-          placeholder: "\u8F93\u5165\u503C",
-          type: "text",
-          value: currentValue.staticValue ?? ''
-        });
-    }
-  }, [dataType, currentValue.staticValue, handleStaticValueChange]);
-
-  // 绑定状态显示
-  const bindingStatus = useMemo(() => {
-    if (currentValue.type === 'datasource' && currentValue.datasourceId) {
-      const ds = dataSources.find(d => d.id === currentValue.datasourceId);
-      return {
-        icon: /*#__PURE__*/React.createElement(Link2, {
-          className: cn(styles$g.triggerIcon, styles$g.triggerIconPrimary)
-        }),
-        text: `${ds?.name ?? currentValue.datasourceId}${currentValue.datasourcePath ? `.${currentValue.datasourcePath}` : ''}`
-      };
-    }
-    return {
-      icon: /*#__PURE__*/React.createElement(FileBraces, {
-        className: cn(styles$g.triggerIcon, styles$g.triggerIconMuted)
-      }),
-      text: '静态数据'
-    };
-  }, [currentValue, dataSources]);
-  return /*#__PURE__*/React.createElement(Popover, {
-    onClose: () => setOpen(false),
-    open: open,
-    trigger: /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Data binding",
-      className: styles$g.trigger,
-      onClick: () => setOpen(true),
-      type: "button"
-    }, bindingStatus.icon, /*#__PURE__*/React.createElement("span", {
-      className: styles$g.triggerText
-    }, bindingStatus.text)),
-    width: 300
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.popoverContent
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.tabsList,
-    role: "tablist"
-  }, /*#__PURE__*/React.createElement("button", {
-    "aria-selected": activeTab === 'static',
-    className: cn(styles$g.tabTrigger, activeTab === 'static' ? styles$g.tabTriggerActive : ''),
-    onClick: () => handleTypeChange('static'),
-    role: "tab",
-    type: "button"
-  }, /*#__PURE__*/React.createElement(FileBraces, {
-    className: styles$g.tabTriggerIcon
-  }), "\u9759\u6001\u6570\u636E"), /*#__PURE__*/React.createElement("button", {
-    "aria-selected": activeTab === 'datasource',
-    className: cn(styles$g.tabTrigger, activeTab === 'datasource' ? styles$g.tabTriggerActive : ''),
-    onClick: () => handleTypeChange('datasource'),
-    role: "tab",
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Database, {
-    className: styles$g.tabTriggerIcon
-  }), "\u6570\u636E\u6E90")), /*#__PURE__*/React.createElement("div", {
-    className: cn(styles$g.tabContent, activeTab === 'static' ? styles$g.tabContentActive : ''),
-    role: "tabpanel"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.section
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$g.sectionLabel
-  }, "\u503C (", dataType, ")"), renderStaticInput)), /*#__PURE__*/React.createElement("div", {
-    className: cn(styles$g.tabContent, activeTab === 'datasource' ? styles$g.tabContentActive : ''),
-    role: "tabpanel"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.section
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$g.sectionLabel
-  }, "\u6570\u636E\u6E90"), dataSources.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: styles$g.datasourceList
-  }, dataSources.map(ds => /*#__PURE__*/React.createElement("button", {
-    className: cn(styles$g.datasourceButton, currentValue.datasourceId === ds.id ? styles$g.datasourceButtonActive : ''),
-    key: ds.id,
-    onClick: () => handleDatasourceChange(ds.id),
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Database, {
-    className: styles$g.datasourceIcon
-  }), ds.name))) : /*#__PURE__*/React.createElement("div", {
-    className: styles$g.emptyState
-  }, "\u6682\u65E0\u53EF\u7528\u6570\u636E\u6E90"), currentValue.datasourceId ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: styles$g.sectionLabel
-  }, "\u6570\u636E\u8DEF\u5F84"), /*#__PURE__*/React.createElement("input", {
-    className: cn(styles$g.input, styles$g.inputMono),
-    onChange: e => handlePathChange(e.target.value),
-    placeholder: "data.list[0].name",
-    type: "text",
-    value: currentValue.datasourcePath ?? ''
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles$g.hint
-  }, "\u4F7F\u7528\u70B9\u53F7\u8BBF\u95EE\u5D4C\u5957\u5C5E\u6027\uFF0C\u5982: data.items[0].value")) : null, showPreview === true && currentValue.datasourceId ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: styles$g.sectionLabel
-  }, "\u6570\u636E\u9884\u89C8"), /*#__PURE__*/React.createElement("div", {
-    className: styles$g.preview
-  }, "\u7ED1\u5B9A\u540E\u53EF\u5728\u9884\u89C8\u6A21\u5F0F\u67E5\u770B\u6570\u636E")) : null))));
-};
-
-var styles$f = {"trigger":"es-trigger-rmYLl","triggerIcon":"es-triggerIcon-ktlTS","triggerText":"es-triggerText-B63By","popoverContent":"es-popoverContent-IIcFY","header":"es-header-VoKF3","headerTitle":"es-headerTitle-vDZR8","headerCount":"es-headerCount-stTlN","mappingList":"es-mappingList-SLqhN","mappingItem":"es-mappingItem-xtRLl","mappingHeader":"es-mappingHeader-LwKiY","mappingTitle":"es-mappingTitle-IMhzw","mappingRequired":"es-mappingRequired-tP6L-","mappingType":"es-mappingType-nyqrh","mappingRow":"es-mappingRow-lFfhT","select":"es-select-R4pIl","input":"es-input--LohJ","arrowIcon":"es-arrowIcon-QqWMM","targetField":"es-targetField-gSvGk","transformRow":"es-transformRow-O6MAG","transformIcon":"es-transformIcon-beXzy","transformInput":"es-transformInput-SyN2q","clearButton":"es-clearButton-Pm-uP","helpText":"es-helpText-IHqjo"};
-
-const defaultValue$1 = {
-  mappings: []
-};
-const DataMappingSetter = props => {
-  const {
-    value,
-    initialValue,
-    onChange,
-    targetFields,
-    sourceFields = []
-  } = props;
-  const currentValue = value ?? initialValue ?? defaultValue$1;
-  const [open, setOpen] = useState(false);
-
-  // 获取字段的映射
-  const getMapping = useCallback(targetField => currentValue.mappings.find(m => m.targetField === targetField), [currentValue.mappings]);
-
-  // 更新映射
-  const updateMapping = useCallback((targetField, updates) => {
-    const existingIndex = currentValue.mappings.findIndex(m => m.targetField === targetField);
-    const newMappings = [...currentValue.mappings];
-    if (existingIndex >= 0) {
-      newMappings[existingIndex] = {
-        ...newMappings[existingIndex],
-        ...updates
-      };
-    } else {
-      newMappings.push({
-        targetField,
-        sourceField: updates.sourceField ?? '',
-        transform: updates.transform
-      });
-    }
-    onChange({
-      mappings: newMappings
-    });
-  }, [currentValue.mappings, onChange]);
-
-  // 清除映射
-  const clearMapping = useCallback(targetField => {
-    const newMappings = currentValue.mappings.filter(m => m.targetField !== targetField);
-    onChange({
-      mappings: newMappings
-    });
-  }, [currentValue.mappings, onChange]);
-
-  // 统计已映射字段数
-  const mappedCount = currentValue.mappings.filter(m => m.sourceField).length;
-  return /*#__PURE__*/React.createElement(Popover, {
-    onClose: () => setOpen(false),
-    open: open,
-    trigger: /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Data mapping",
-      className: styles$f.trigger,
-      onClick: () => setOpen(true),
-      type: "button"
-    }, /*#__PURE__*/React.createElement(Settings2, {
-      className: styles$f.triggerIcon
-    }), /*#__PURE__*/React.createElement("span", {
-      className: styles$f.triggerText
-    }, "\u5B57\u6BB5\u6620\u5C04 (", mappedCount, "/", targetFields.length, ")")),
-    width: 320
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.popoverContent
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.header
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$f.headerTitle
-  }, "\u5B57\u6BB5\u6620\u5C04\u914D\u7F6E"), /*#__PURE__*/React.createElement("span", {
-    className: styles$f.headerCount
-  }, mappedCount, "/", targetFields.length, " \u5DF2\u6620\u5C04")), /*#__PURE__*/React.createElement("div", {
-    className: styles$f.mappingList
-  }, targetFields.map(field => {
-    const mapping = getMapping(field.name);
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$f.mappingItem,
-      key: field.name
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$f.mappingHeader
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles$f.mappingTitle
-    }, field.label, field.required ? /*#__PURE__*/React.createElement("span", {
-      className: styles$f.mappingRequired
-    }, "*") : null), /*#__PURE__*/React.createElement("span", {
-      className: styles$f.mappingType
-    }, field.type)), /*#__PURE__*/React.createElement("div", {
-      className: styles$f.mappingRow
-    }, sourceFields.length > 0 ? /*#__PURE__*/React.createElement("select", {
-      className: styles$f.select,
-      onChange: e => updateMapping(field.name, {
-        sourceField: e.target.value
-      }),
-      value: mapping?.sourceField ?? ''
-    }, /*#__PURE__*/React.createElement("option", {
-      value: ""
-    }, "\u9009\u62E9\u5B57\u6BB5"), sourceFields.map(sf => /*#__PURE__*/React.createElement("option", {
-      key: sf,
-      value: sf
-    }, sf))) : /*#__PURE__*/React.createElement("input", {
-      className: styles$f.input,
-      onChange: e => updateMapping(field.name, {
-        sourceField: e.target.value
-      }),
-      placeholder: "\u6E90\u5B57\u6BB5\u8DEF\u5F84",
-      type: "text",
-      value: mapping?.sourceField ?? ''
-    }), /*#__PURE__*/React.createElement(ArrowRight, {
-      className: styles$f.arrowIcon
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles$f.targetField
-    }, field.name)), mapping?.sourceField ? /*#__PURE__*/React.createElement("div", {
-      className: styles$f.transformRow
-    }, /*#__PURE__*/React.createElement(Code, {
-      className: styles$f.transformIcon
-    }), /*#__PURE__*/React.createElement("input", {
-      className: styles$f.transformInput,
-      onChange: e => updateMapping(field.name, {
-        transform: e.target.value
-      }),
-      placeholder: "\u8F6C\u6362\u8868\u8FBE\u5F0F (\u53EF\u9009)",
-      type: "text",
-      value: mapping?.transform ?? ''
-    })) : null, mapping?.sourceField ? /*#__PURE__*/React.createElement("button", {
-      className: styles$f.clearButton,
-      onClick: () => clearMapping(field.name),
-      type: "button"
-    }, "\u6E05\u9664\u6620\u5C04") : null);
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$f.helpText
-  }, /*#__PURE__*/React.createElement("p", null, "\u2022 \u6E90\u5B57\u6BB5: \u6570\u636E\u6E90\u4E2D\u7684\u5B57\u6BB5\u8DEF\u5F84"), /*#__PURE__*/React.createElement("p", null, "\u2022 \u8F6C\u6362\u8868\u8FBE\u5F0F: \u5982 value * 100, value.toFixed(2)"))));
-};
-
-var styles$e = {"container":"es-container-CUmyq","textarea":"es-textarea-hn1hD","textareaError":"es-textareaError-O2GWs","error":"es-error-wjKcS"};
-
-const JsonSetter = props => {
-  const {
-    value,
-    initialValue,
-    placeholder,
-    rows = 6,
-    onChange
-  } = props;
-  const [text, setText] = useState('');
-  const [error, setError] = useState(null);
-
-  // Sync value to text
-  useEffect(() => {
-    const currentValue = value ?? initialValue;
-    if (currentValue !== undefined) {
-      try {
-        setText(JSON.stringify(currentValue, null, 2));
-        setError(null);
-      } catch {
-        setText(String(currentValue));
-      }
-    } else {
-      setText('');
-    }
-  }, [value, initialValue]);
-  const handleChange = useCallback(newText => {
-    setText(newText);
-    if (!newText.trim()) {
-      setError(null);
-      onChange(undefined);
-      return;
-    }
-    try {
-      const parsed = JSON.parse(newText);
-      setError(null);
-      onChange(parsed);
-    } catch (e) {
-      setError(e.message);
-    }
-  }, [onChange]);
-  const lineHeight = 1.5;
-  const minHeight = rows * lineHeight * 14; // 14px base font size
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$e.container
-  }, /*#__PURE__*/React.createElement("textarea", {
-    className: cn(styles$e.textarea, error ? styles$e.textareaError : null),
-    onChange: e => handleChange(e.target.value),
-    placeholder: placeholder || '输入 JSON 数据',
-    spellCheck: false,
-    style: {
-      minHeight
-    },
-    value: text
-  }), error ? /*#__PURE__*/React.createElement("div", {
-    className: styles$e.error
-  }, error) : null);
-};
-
-var styles$d = {"container":"es-container-som8X","id":"es-id-VnRzV","title":"es-title-B-JkN"};
-
-const NodeIdSetter = props => {
-  const {
-    selected
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$d.container
-  }, /*#__PURE__*/React.createElement("p", {
-    className: styles$d.id
-  }, selected.id), /*#__PURE__*/React.createElement("p", {
-    className: styles$d.title
-  }, selected.componentMeta.title));
-};
-
-var styles$c = {"container":"es-container-d6iPo","input":"es-input-hzqco","inputWithSuffix":"es-inputWithSuffix-dzHIR","suffix":"es-suffix--jLoo"};
-
-const NumberSetter = props => {
-  const {
-    value,
-    initialValue,
-    placeholder,
-    onChange,
-    suffix
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$c.container
-  }, /*#__PURE__*/React.createElement("input", {
-    className: cn(styles$c.input, suffix ? styles$c.inputWithSuffix : ''),
-    onChange: e => onChange(+e.target.value),
-    placeholder: placeholder || '',
-    type: "number",
-    value: value ?? initialValue ?? ''
-  }), suffix ? /*#__PURE__*/React.createElement("span", {
-    "aria-label": `Unit: ${suffix}`,
-    className: styles$c.suffix
-  }, suffix) : null);
-};
-
-var styles$b = {"container":"es-container-RzrEe","field":"es-field-AaNu3","label":"es-label-zWfmB","input":"es-input-fv7wH","customField":"es-customField-hV2yY","customFieldInputs":"es-customFieldInputs-efA5X","keyInput":"es-keyInput-MXoPV","removeButton":"es-removeButton-s7K9l","removeIcon":"es-removeIcon-Ostpz","addButton":"es-addButton-Wgly5","addIcon":"es-addIcon-61nc3"};
-
-const ObjectSetter = props => {
-  const {
-    value,
-    initialValue,
-    fields = [],
-    allowCustomFields = false,
-    addFieldText = '添加字段',
-    onChange
-  } = props;
-  const currentValue = value ?? initialValue ?? {};
-  const handleFieldChange = useCallback((key, newValue) => {
-    onChange({
-      ...currentValue,
-      [key]: newValue
-    });
-  }, [currentValue, onChange]);
-  const handleAddField = useCallback(() => {
-    const newKey = `field_${Date.now()}`;
-    onChange({
-      ...currentValue,
-      [newKey]: ''
-    });
-  }, [currentValue, onChange]);
-  const handleRemoveField = useCallback(key => {
-    const newValue = {
-      ...currentValue
-    };
-    delete newValue[key];
-    onChange(newValue);
-  }, [currentValue, onChange]);
-
-  // Get all keys: defined fields + custom fields
-  const definedKeys = fields.map(f => f.key);
-  const customKeys = Object.keys(currentValue).filter(k => !definedKeys.includes(k));
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$b.container
-  }, fields.map(field => /*#__PURE__*/React.createElement("div", {
-    className: styles$b.field,
-    key: field.key
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$b.label
-  }, field.label), /*#__PURE__*/React.createElement("input", {
-    className: styles$b.input,
-    onChange: e => {
-      const val = field.type === 'number' ? +e.target.value : e.target.value;
-      handleFieldChange(field.key, val);
-    },
-    placeholder: field.placeholder,
-    type: field.type === 'number' ? 'number' : 'text',
-    value: currentValue[field.key] ?? ''
-  }))), customKeys.map(key => /*#__PURE__*/React.createElement("div", {
-    className: styles$b.customField,
-    key: key
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$b.customFieldInputs
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$b.keyInput,
-    onChange: e => {
-      const newKey = e.target.value;
-      if (newKey && newKey !== key) {
-        const newValue = {
-          ...currentValue
-        };
-        newValue[newKey] = newValue[key];
-        delete newValue[key];
-        onChange(newValue);
-      }
-    },
-    placeholder: "\u5B57\u6BB5\u540D",
-    type: "text",
-    value: key
-  }), /*#__PURE__*/React.createElement("input", {
-    className: styles$b.input,
-    onChange: e => handleFieldChange(key, e.target.value),
-    placeholder: "\u503C",
-    type: "text",
-    value: currentValue[key] ?? ''
-  })), /*#__PURE__*/React.createElement("button", {
-    className: styles$b.removeButton,
-    onClick: () => handleRemoveField(key),
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Trash2, {
-    className: styles$b.removeIcon
-  })))), allowCustomFields ? /*#__PURE__*/React.createElement("button", {
-    className: styles$b.addButton,
-    onClick: handleAddField,
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Plus, {
-    className: styles$b.addIcon
-  }), addFieldText) : null);
-};
-
-var styles$a = {"container":"es-container-YWSlG","inputWrapper":"es-inputWrapper-B2wKI","input":"es-input--qUrU","suffix":"es-suffix-2c3Cd"};
-
-const RectSetter = props => {
-  const {
-    value,
-    onChange
-  } = props;
-  const handleChange = (key, newValue) => {
-    onChange({
-      ...value,
-      [key]: newValue
-    });
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$a.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inputWrapper
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$a.input,
-    onChange: e => handleChange('x', Number(e.target.value)),
-    type: "number",
-    value: formatDecimal(value.x)
-  }), /*#__PURE__*/React.createElement("span", {
-    "aria-label": "Unit: X",
-    className: styles$a.suffix
-  }, "X")), /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inputWrapper
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$a.input,
-    onChange: e => handleChange('y', Number(e.target.value)),
-    type: "number",
-    value: formatDecimal(value.y)
-  }), /*#__PURE__*/React.createElement("span", {
-    "aria-label": "Unit: Y",
-    className: styles$a.suffix
-  }, "Y")), /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inputWrapper
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$a.input,
-    onChange: e => handleChange('width', Number(e.target.value)),
-    type: "number",
-    value: formatDecimal(value.width)
-  }), /*#__PURE__*/React.createElement("span", {
-    "aria-label": "Unit: W",
-    className: styles$a.suffix
-  }, "W")), /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inputWrapper
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$a.input,
-    onChange: e => handleChange('height', Number(e.target.value)),
-    type: "number",
-    value: formatDecimal(value.height)
-  }), /*#__PURE__*/React.createElement("span", {
-    "aria-label": "Unit: H",
-    className: styles$a.suffix
-  }, "H")));
-};
-const decimalRegex = /(\.\d{2})\d+$/;
-const formatDecimal = num => num.toString().replace(decimalRegex, '$1');
-
-var styles$9 = {"container":"es-container-lamwH","containerSm":"es-containerSm-mndNj","segment":"es-segment-JmKWl","segmentSelected":"es-segmentSelected-fumXM","segmentDisabled":"es-segmentDisabled-Md5LF"};
-
-/**
- * SegmentedSetter - 分段控制器
- * 用于在多个选项之间切换，类似于 iOS 的 UISegmentedControl
- */
-const SegmentedSetter = props => {
-  const {
-    value,
-    initialValue,
-    options = [],
-    onChange,
-    size = 'md'
-  } = props;
-  const currentValue = value ?? initialValue ?? options[0]?.value ?? '';
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(styles$9.container, size === 'sm' ? styles$9.containerSm : '')
-  }, options.map(option => /*#__PURE__*/React.createElement("button", {
-    className: cn(styles$9.segment, currentValue === option.value ? styles$9.segmentSelected : '', option.disabled === true ? styles$9.segmentDisabled : ''),
-    disabled: option.disabled,
-    key: option.value,
-    onClick: () => !option.disabled && onChange(option.value),
-    type: "button"
-  }, option.label)));
-};
-
-var styles$8 = {"trigger":"es-trigger-YRz9p","triggerValue":"es-triggerValue-k-g2-","placeholder":"es-placeholder-F8-XP","chevron":"es-chevron-UbZv-","chevronOpen":"es-chevronOpen-Yui-r","dropdown":"es-dropdown-l2sra","option":"es-option-cv-7C","optionSelected":"es-optionSelected-K4e5h","optionDisabled":"es-optionDisabled-72jrC"};
-
-const SelectSetter = props => {
-  const {
-    value,
-    initialValue,
-    options = [],
-    placeholder,
-    onChange
-  } = props;
-  const [open, setOpen] = useState(false);
-  const currentValue = value ?? initialValue ?? '';
-  const selectedOption = options.find(opt => opt.value === currentValue);
-  const handleSelect = (optionValue, disabled) => {
-    if (disabled) {
-      return;
-    }
-    onChange(optionValue);
-    setOpen(false);
-  };
-  return /*#__PURE__*/React.createElement(Popover, {
-    onClose: () => setOpen(false),
-    open: open,
-    trigger: /*#__PURE__*/React.createElement("button", {
-      "aria-expanded": open,
-      "aria-haspopup": "listbox",
-      className: styles$8.trigger,
-      onClick: () => setOpen(true),
-      type: "button"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: cn(styles$8.triggerValue, selectedOption ? '' : styles$8.placeholder)
-    }, selectedOption?.label || placeholder || '请选择'), /*#__PURE__*/React.createElement(ChevronDown, {
-      className: cn(styles$8.chevron, open ? styles$8.chevronOpen : '')
-    }))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.dropdown,
-    role: "listbox"
-  }, options.map(option => /*#__PURE__*/React.createElement("button", {
-    "aria-selected": option.value === currentValue,
-    className: cn(styles$8.option, option.value === currentValue ? styles$8.optionSelected : '', option.disabled === true ? styles$8.optionDisabled : ''),
-    key: option.value,
-    onClick: () => handleSelect(option.value, option.disabled),
-    role: "option",
-    type: "button"
-  }, option.label))));
-};
-
-var styles$7 = {"container":"es-container-PG1Uy","slider":"es-slider-pypb6","track":"es-track-X2NtH","range":"es-range-AVV8x","thumb":"es-thumb-YMQR-","value":"es-value-JiWPV"};
-
-const SliderSetter = props => {
-  const {
-    value,
-    initialValue,
-    min = 0,
-    max = 100,
-    step = 1,
-    showValue = true,
-    suffix,
-    onChange
-  } = props;
-  const currentValue = value ?? initialValue ?? min;
-  const trackRef = useRef(null);
-  const percentage = (currentValue - min) / (max - min) * 100;
-  const handleChange = useCallback(clientX => {
-    if (!trackRef.current) {
-      return;
-    }
-    const rect = trackRef.current.getBoundingClientRect();
-    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-    const rawValue = min + percent * (max - min);
-    const steppedValue = Math.round(rawValue / step) * step;
-    const clampedValue = Math.max(min, Math.min(max, steppedValue));
-    onChange(clampedValue);
-  }, [min, max, step, onChange]);
-  const handleMouseDown = event => {
-    handleChange(event.clientX);
-    const handleMouseMove = moveEvent => {
-      handleChange(moveEvent.clientX);
-    };
-    const handleMouseUp = () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$7.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.slider
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.track,
-    onMouseDown: handleMouseDown,
-    ref: trackRef,
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.range,
-    style: {
-      width: `${percentage}%`
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    "aria-valuemax": max,
-    "aria-valuemin": min,
-    "aria-valuenow": currentValue,
-    className: styles$7.thumb,
-    role: "slider",
-    style: {
-      left: `${percentage}%`
-    },
-    tabIndex: 0
-  }))), showValue === true ? /*#__PURE__*/React.createElement("span", {
-    className: styles$7.value
-  }, currentValue, suffix) : null);
-};
-
-var styles$6 = {"container":"es-container-XqQza","boxModel":"es-boxModel-8RFjI","inputTop":"es-inputTop-bqsmI","inputRight":"es-inputRight-TV3E-","inputBottom":"es-inputBottom-dP-wA","inputLeft":"es-inputLeft-sygc3","spacingInput":"es-spacingInput-KAWdK","linkButton":"es-linkButton-v1n0k","linkButtonActive":"es-linkButtonActive-Vge1n","linkIcon":"es-linkIcon-K0j9e","presets":"es-presets-CPVVc","presetButton":"es-presetButton-vUc7S","modeLabel":"es-modeLabel-Vh1Cf"};
-
-const defaultValue = {
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0
-};
-const presetValues = [0, 4, 8, 12, 16, 24, 32];
-const SpacingSetter = props => {
-  const {
-    value,
-    initialValue,
-    onChange,
-    mode = 'padding',
-    linked: initialLinked = false,
-    min = 0,
-    max = 100
-  } = props;
-  const currentValue = value ?? initialValue ?? defaultValue;
-  const [isLinked, setIsLinked] = useState(initialLinked);
-  const updateSpacing = useCallback(updates => {
-    if (isLinked) {
-      const newValue = Object.values(updates)[0];
-      onChange({
-        top: newValue,
-        right: newValue,
-        bottom: newValue,
-        left: newValue
-      });
-    } else {
-      onChange({
-        ...currentValue,
-        ...updates
-      });
-    }
-  }, [currentValue, isLinked, onChange]);
-  const handlePresetClick = useCallback(presetValue => {
-    onChange({
-      top: presetValue,
-      right: presetValue,
-      bottom: presetValue,
-      left: presetValue
-    });
-  }, [onChange]);
-  const toggleLinked = useCallback(() => {
-    setIsLinked(prev => !prev);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$6.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.boxModel
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.inputTop
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$6.spacingInput,
-    max: max,
-    min: min,
-    onChange: e => updateSpacing({
-      top: Number(e.target.value)
-    }),
-    type: "number",
-    value: currentValue.top
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.inputRight
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$6.spacingInput,
-    max: max,
-    min: min,
-    onChange: e => updateSpacing({
-      right: Number(e.target.value)
-    }),
-    type: "number",
-    value: currentValue.right
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.inputBottom
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$6.spacingInput,
-    max: max,
-    min: min,
-    onChange: e => updateSpacing({
-      bottom: Number(e.target.value)
-    }),
-    type: "number",
-    value: currentValue.bottom
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.inputLeft
-  }, /*#__PURE__*/React.createElement("input", {
-    className: styles$6.spacingInput,
-    max: max,
-    min: min,
-    onChange: e => updateSpacing({
-      left: Number(e.target.value)
-    }),
-    type: "number",
-    value: currentValue.left
-  })), /*#__PURE__*/React.createElement("button", {
-    "aria-label": isLinked ? 'Unlink values' : 'Link values',
-    className: cn(styles$6.linkButton, isLinked ? styles$6.linkButtonActive : ''),
-    onClick: toggleLinked,
-    type: "button"
-  }, isLinked ? /*#__PURE__*/React.createElement(Link, {
-    className: styles$6.linkIcon
-  }) : /*#__PURE__*/React.createElement(Unlink, {
-    className: styles$6.linkIcon
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.presets
-  }, presetValues.map(presetValue => /*#__PURE__*/React.createElement("button", {
-    className: styles$6.presetButton,
-    key: presetValue,
-    onClick: () => handlePresetClick(presetValue),
-    type: "button"
-  }, presetValue))), /*#__PURE__*/React.createElement("div", {
-    className: styles$6.modeLabel
-  }, mode === 'padding' ? '内边距' : '外边距', " (px)"));
-};
-
-var styles$5 = {"container":"es-container-weN0F","input":"es-input-C8N67","inputWithSuffix":"es-inputWithSuffix-tdJcI","suffix":"es-suffix-HGRiQ"};
-
-const StringSetter = props => {
-  const {
-    value,
-    initialValue,
-    placeholder,
-    onChange,
-    suffix
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$5.container
-  }, /*#__PURE__*/React.createElement("input", {
-    className: cn(styles$5.input, suffix ? styles$5.inputWithSuffix : ''),
-    onChange: e => onChange(e.target.value),
-    placeholder: placeholder || '',
-    type: "text",
-    value: value || initialValue || ''
-  }), suffix ? /*#__PURE__*/React.createElement("span", {
-    "aria-label": `Unit: ${suffix}`,
-    className: styles$5.suffix
-  }, suffix) : null);
-};
-
-var styles$4 = {"switch":"es-switch-2DV6T","switchChecked":"es-switchChecked-eI65V","switchThumb":"es-switchThumb-GDlBx","switchThumbChecked":"es-switchThumbChecked-uA5kV","checkboxWrapper":"es-checkboxWrapper-l-KtW","checkboxInput":"es-checkboxInput-4Z9KK","checkbox":"es-checkbox-G1P36","checkboxChecked":"es-checkboxChecked-7XJoC","checkIcon":"es-checkIcon-3KIBH","segmented":"es-segmented-IaxAM","segmentedButton":"es-segmentedButton-mbZ5z","segmentedButtonSelected":"es-segmentedButtonSelected-u4m2T"};
-
-/**
- * SwitchSetter - 布尔值设置器
- * 提供多种 UI 模式：switch（开关）、checkbox（复选框）、segmented（分段）
- */
-const SwitchSetter = props => {
-  const {
-    value,
-    initialValue,
-    onChange,
-    mode = 'switch',
-    trueLabel = '是',
-    falseLabel = '否'
-  } = props;
-  const currentValue = value ?? initialValue ?? false;
-
-  // 分段模式
-  if (mode === 'segmented') {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$4.segmented
-    }, /*#__PURE__*/React.createElement("button", {
-      className: cn(styles$4.segmentedButton, currentValue === false ? styles$4.segmentedButtonSelected : ''),
-      onClick: () => onChange(false),
-      type: "button"
-    }, falseLabel), /*#__PURE__*/React.createElement("button", {
-      className: cn(styles$4.segmentedButton, currentValue === true ? styles$4.segmentedButtonSelected : ''),
-      onClick: () => onChange(true),
-      type: "button"
-    }, trueLabel));
-  }
-
-  // 复选框模式
-  if (mode === 'checkbox') {
-    return /*#__PURE__*/React.createElement("label", {
-      className: styles$4.checkboxWrapper
-    }, /*#__PURE__*/React.createElement("input", {
-      checked: currentValue,
-      className: styles$4.checkboxInput,
-      onChange: e => onChange(e.target.checked),
-      type: "checkbox"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: cn(styles$4.checkbox, currentValue ? styles$4.checkboxChecked : '')
-    }, currentValue ? /*#__PURE__*/React.createElement(Check, {
-      className: styles$4.checkIcon
-    }) : null));
-  }
-
-  // 开关模式（默认）
-  return /*#__PURE__*/React.createElement("button", {
-    "aria-checked": currentValue,
-    className: cn(styles$4.switch, currentValue ? styles$4.switchChecked : ''),
-    onClick: () => onChange(!currentValue),
-    role: "switch",
-    type: "button"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: cn(styles$4.switchThumb, currentValue ? styles$4.switchThumbChecked : '')
-  }));
-};
-
-var styles$3 = {"container":"es-container-ftwPX","textarea":"es-textarea-sJPy9","counter":"es-counter-02NEu"};
-
-const TextAreaSetter = props => {
-  const {
-    value,
-    initialValue,
-    placeholder,
-    rows = 3,
-    maxLength,
-    onChange
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$3.container
-  }, /*#__PURE__*/React.createElement("textarea", {
-    className: styles$3.textarea,
-    maxLength: maxLength,
-    onChange: e => onChange(e.target.value),
-    placeholder: placeholder || '',
-    rows: rows,
-    value: value ?? initialValue ?? ''
-  }), maxLength ? /*#__PURE__*/React.createElement("div", {
-    className: styles$3.counter
-  }, (value ?? initialValue ?? '').length, "/", maxLength) : null);
-};
-
-var styles$2 = {"container":"es-container-EDh0-","row":"es-row-MOm-T","label":"es-label-1o-jT","hiddenInput":"es-hiddenInput-03Dx-","uploadArea":"es-uploadArea-1HYbh","uploadIcon":"es-uploadIcon-Ck7gF","clearButton":"es-clearButton-N-9cs","clearIcon":"es-clearIcon-LHlF6","fileInfo":"es-fileInfo-71Jtf","fileName":"es-fileName-B2hHy","fileSize":"es-fileSize-pINcz","error":"es-error-A8MID"};
-
-const UploadSetter = props => {
-  const {
-    value,
-    onChange,
-    accept = '.jpg,.jpeg,.png,.gif',
-    maxSize = 10 * 1024 * 1024
-  } = props;
-  const [error, setError] = useState('');
-  const inputRef = useRef(null);
-  const handleFileChange = async e => {
-    const file = e.target.files?.[0];
-    setError('');
-    if (!file) {
-      onChange(null);
-      return;
-    }
-    const ext = `.${file.name.split('.').pop()?.toLowerCase()}`;
-    if (!accept.includes(ext)) {
-      setError(`仅支持 ${accept} 格式文件`);
-      onChange(null);
-      return;
-    }
-    if (file.size > maxSize) {
-      setError(`文件大小不能超过 ${maxSize / 1024 / 1024}MB`);
-      onChange(null);
-      return;
-    }
-    try {
-      const [base64, dimensions] = await Promise.all([new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = err => reject(err);
-        reader.readAsDataURL(file);
-      }), new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve({
-          width: img.naturalWidth,
-          height: img.naturalHeight
-        });
-        img.onerror = reject;
-        img.src = URL.createObjectURL(file);
-      })]);
-      onChange({
-        raw: {
-          name: file.name,
-          size: file.size,
-          type: file.type,
-          width: dimensions.width,
-          height: dimensions.height
-        },
-        base64
-      });
-    } catch (_) {
-      setError('文件读取失败，请重试');
-      onChange(null);
-    }
-  };
-  const handleClear = () => {
-    onChange(null);
-    if (inputRef.current) {
-      inputRef.current.value = '';
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$2.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.row
-  }, /*#__PURE__*/React.createElement("label", {
-    className: styles$2.label
-  }, /*#__PURE__*/React.createElement("input", {
-    accept: accept,
-    className: styles$2.hiddenInput,
-    onChange: handleFileChange,
-    ref: inputRef,
-    type: "file"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.uploadArea
-  }, /*#__PURE__*/React.createElement(Upload, {
-    className: styles$2.uploadIcon
-  }), /*#__PURE__*/React.createElement("span", null, value ? '更换文件' : '点击上传'))), value ? /*#__PURE__*/React.createElement("button", {
-    "aria-label": "\u6E05\u9664\u6587\u4EF6",
-    className: styles$2.clearButton,
-    onClick: handleClear,
-    type: "button"
-  }, /*#__PURE__*/React.createElement(X, {
-    className: styles$2.clearIcon
-  })) : null), value ? /*#__PURE__*/React.createElement("div", {
-    className: styles$2.fileInfo
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$2.fileName
-  }, value.raw?.name), /*#__PURE__*/React.createElement("span", {
-    className: styles$2.fileSize
-  }, (value.raw?.size / 1024).toFixed(1), "KB")) : null, error ? /*#__PURE__*/React.createElement("p", {
-    className: styles$2.error,
-    role: "alert"
-  }, error) : null);
-};
-
-var styles$1 = {"container":"es-container-gjha7","header":"es-header-iE--w","title":"es-title-qTdCp","toggleButton":"es-toggleButton-g6dI2","toggleIcon":"es-toggleIcon-cjnM4","content":"es-content-GYYgk","contentHidden":"es-contentHidden-WAYSW","srOnly":"es-srOnly-EI1Tc"};
-
-const CollapseSetter = props => {
-  const {
-    field,
-    children,
-    initialValue,
-    icon = true
-  } = props;
-  const [isOpen, setIsOpen] = useState(initialValue ?? true);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.header
-  }, /*#__PURE__*/React.createElement("h4", {
-    className: styles$1.title
-  }, field.title), icon ? /*#__PURE__*/React.createElement("button", {
-    "aria-expanded": isOpen,
-    className: styles$1.toggleButton,
-    onClick: () => setIsOpen(!isOpen),
-    type: "button"
-  }, /*#__PURE__*/React.createElement(ChevronsUpDown, {
-    className: styles$1.toggleIcon
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles$1.srOnly
-  }, "Toggle")) : null), /*#__PURE__*/React.createElement("div", {
-    className: cn(styles$1.content, isOpen === false ? styles$1.contentHidden : '')
-  }, children));
-};
-
-var styles = {"container":"es-container-4LWRO","tabsList":"es-tabsList-L72im","tabTrigger":"es-tabTrigger-u3S3S","tabTriggerActive":"es-tabTriggerActive-xCpU6","tabContent":"es-tabContent-Pj2Us","tabContentActive":"es-tabContentActive-NJtXh"};
-
-const TabSetter = props => {
-  const {
-    tabs,
-    initialValue,
-    children
-  } = props;
-  const tabsList = React$1.useMemo(() => {
-    if (tabs) {
-      return tabs;
-    }
-    if (Array.isArray(children) && children.length > 0) {
-      return children.map(child => ({
-        label: child.props.field.config.title,
-        value: child.props.field.config.key
-      }));
-    }
-    throw new Error('TabSetter: children or tabs must be an array');
-  }, [tabs, children]);
-  const firstTabValue = React$1.useMemo(() => tabsList[0]?.value, [tabsList]);
-  const [activeTab, setActiveTab] = useState(initialValue ?? firstTabValue);
-  return /*#__PURE__*/React$1.createElement("div", {
-    className: styles.container
-  }, /*#__PURE__*/React$1.createElement("div", {
-    className: styles.tabsList,
-    role: "tablist",
-    style: {
-      gridTemplateColumns: `repeat(${tabsList.length}, minmax(0, 1fr))`
-    }
-  }, tabsList.map(tab => /*#__PURE__*/React$1.createElement("button", {
-    "aria-selected": activeTab === tab.value,
-    className: cn(styles.tabTrigger, activeTab === tab.value ? styles.tabTriggerActive : ''),
-    key: tab.value,
-    onClick: () => setActiveTab(tab.value),
-    role: "tab",
-    type: "button"
-  }, tab.label))), Array.isArray(children) ? children.map(child => /*#__PURE__*/React$1.createElement("div", {
-    className: cn(styles.tabContent, activeTab === child.props.field.config.key ? styles.tabContentActive : ''),
-    key: child.props.field.config.key,
-    role: "tabpanel"
-  }, child)) : null);
-};
-
-const setterMap = {
-  ColorSetter,
-  NodeIdSetter,
-  NumberSetter,
-  RectSetter,
-  StringSetter,
-  SwitchSetter,
-  UploadSetter,
-  SegmentedSetter,
-  CollapseSetter,
-  TabSetter,
-  SpacingSetter,
-  AlignSetter,
-  DataBindingSetter,
-  DataMappingSetter,
-  SelectSetter,
-  SliderSetter,
-  TextAreaSetter,
-  ArraySetter,
-  JsonSetter,
-  ObjectSetter
-};
-
-export { AlignSetter, ArraySetter, CollapseSetter, ColorSetter, DataBindingSetter, DataMappingSetter, JsonSetter, NodeIdSetter, NumberSetter, ObjectSetter, Popover, RectSetter, SegmentedSetter, SelectSetter, SliderSetter, SpacingSetter, StringSetter, SwitchSetter, TabSetter, TextAreaSetter, UploadSetter, setterMap as default, setterMap };
-//# sourceMappingURL=index.esm.js.map