@canvas-components/react-components 0.3.27 → 0.3.29

package/dist/index.cjs

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var ReactDOM = require('react-dom');
 var icons = require('@canvas-components/icons');
+var ReactDOM = require('react-dom');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -195,953 +195,118 @@ function joinClassNames(...values) {
 
 // src/shared/prefix.ts
 var REACT_COMPONENT_PREFIX = "canvas-react";
+var REACT_ICON_DEFINITIONS = icons.iconDefinitions;
 
-// src/components/tag/style.css
-styleInject(".canvas-react-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  min-width: 0;\n  max-width: 100%;\n  padding: 3px 6px;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg-soft);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size-secondary);\n  line-height: 1.4;\n}\n.canvas-react-tag-content {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 4px;\n  min-width: 0;\n  overflow: hidden;\n}\n.canvas-react-tag-close {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  font: inherit;\n  font-size: 16px;\n  line-height: 1;\n  cursor: pointer;\n}\n.canvas-react-tag-close:hover {\n  background: var(--canvas-react-color-bg-hover);\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-tag-close:focus-visible {\n  outline: 2px solid var(--canvas-react-color-primary);\n  outline-offset: 1px;\n}\n");
-function ReactTag({
-  children,
-  className,
-  closeLabel = "\u79FB\u9664\u6807\u7B7E",
-  onClose,
-  ...restProps
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      ...restProps,
-      className: joinClassNames(`${REACT_COMPONENT_PREFIX}-tag`, className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-tag-content`, children }),
-        onClose ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: `${REACT_COMPONENT_PREFIX}-tag-close`,
-            "aria-label": closeLabel,
-            title: closeLabel,
-            onClick: onClose,
-            children: "\xD7"
-          }
-        ) : null
-      ]
+// src/components/icon/style.css
+styleInject(".canvas-react-icon {\n  display: inline-block;\n  vertical-align: -0.125em;\n  color: inherit;\n}\n.canvas-react-icon-spin {\n  animation: canvas-react-icon-spin 1s infinite linear;\n}\n@keyframes canvas-react-icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .canvas-react-icon-spin {\n    animation-duration: 2s;\n  }\n}\n");
+var PRIMARY_COLOR_TOKEN = "__CC_REACT_ICON_PRIMARY__";
+var SECONDARY_COLOR_TOKEN = "__CC_REACT_ICON_SECONDARY__";
+var ReactIcon = React.forwardRef(
+  function ReactIcon2({
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    className,
+    color,
+    name,
+    rotate,
+    size = "1em",
+    spin = false,
+    style,
+    twoToneColor,
+    ...svgProps
+  }, ref) {
+    const icon = REACT_ICON_DEFINITIONS[name];
+    const [primaryColor, secondaryColor] = resolveTwoToneColors(twoToneColor);
+    const svgStyle = {
+      color,
+      width: size,
+      height: size,
+      transform: rotate == null ? void 0 : `rotate(${rotate}deg)`,
+      ...style
+    };
+    const classes = [
+      "canvas-react-icon",
+      spin ? "canvas-react-icon-spin" : void 0,
+      className
+    ].filter(Boolean).join(" ");
+    return React.createElement(
+      "svg",
+      {
+        ...svgProps,
+        ref,
+        className: classes,
+        viewBox: icon.icon.attrs.viewBox,
+        width: size,
+        height: size,
+        fill: "currentColor",
+        style: svgStyle,
+        role: ariaLabel ? "img" : svgProps.role,
+        "aria-label": ariaLabel,
+        "aria-hidden": ariaHidden ?? !ariaLabel,
+        focusable: "false",
+        "data-icon": icon.name
+      },
+      ...renderIconChildren(icon.icon, primaryColor, secondaryColor)
+    );
+  }
+);
+ReactIcon.displayName = "ReactIcon";
+function createReactIconComponent(name) {
+  const IconComponent = React.forwardRef(
+    function NamedReactIcon(props, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ReactIcon, { ...props, name, ref });
     }
   );
+  IconComponent.displayName = `React${name}`;
+  return IconComponent;
 }
-
-// src/components/rich-text/model.ts
-var styleKey = (style) => JSON.stringify({
-  fontFamily: style?.fontFamily,
-  fontSize: style?.fontSize,
-  fontWeight: style?.fontWeight,
-  fontStyle: style?.fontStyle,
-  color: style?.color
-});
-function normalizeStyle(input) {
-  if (!input) return void 0;
-  const style = {};
-  if (typeof input.fontFamily === "string" && /^[\p{L}\p{N}_\s,'"-]+$/u.test(input.fontFamily))
-    style.fontFamily = input.fontFamily;
-  if (typeof input.fontSize === "number" && Number.isFinite(input.fontSize) && input.fontSize >= 1 && input.fontSize <= 240)
-    style.fontSize = input.fontSize;
-  if (typeof input.fontWeight === "string" && /^(?:[1-9]00|normal|bold)$/.test(input.fontWeight))
-    style.fontWeight = input.fontWeight;
-  if (input.fontStyle === "normal" || input.fontStyle === "italic")
-    style.fontStyle = input.fontStyle;
-  if (typeof input.color === "string" && /^#[0-9a-fA-F]{3,8}$/.test(input.color))
-    style.color = input.color;
-  return Object.keys(style).length ? style : void 0;
-}
-function alignRange(text, start, end) {
-  const Segmenter = Intl.Segmenter;
-  const boundaries = Segmenter ? [
-    0,
-    ...Array.from(
-      new Segmenter(void 0, { granularity: "grapheme" }).segment(text),
-      (part) => part.index + part.segment.length
-    )
-  ] : [
-    0,
-    ...Array.from(text).reduce((offsets, character) => {
-      offsets.push((offsets[offsets.length - 1] ?? 0) + character.length);
-      return offsets;
-    }, [])
-  ];
-  const clampedStart = Math.max(0, Math.min(start, text.length));
-  const clampedEnd = Math.max(clampedStart, Math.min(end, text.length));
-  const from = [...boundaries].reverse().find((boundary) => boundary <= clampedStart) ?? 0;
-  const to = clampedStart === clampedEnd ? from : boundaries.find((boundary) => boundary >= clampedEnd) ?? text.length;
-  return { from, to };
-}
-function normalizeRichTextRuns(runs) {
-  const normalized = [];
-  for (const run of runs) {
-    if (!run.text) continue;
-    const style = normalizeStyle(run.style);
-    const previous = normalized[normalized.length - 1];
-    if (previous && styleKey(previous.style) === styleKey(style))
-      previous.text += run.text;
-    else normalized.push({ text: run.text, ...style ? { style } : {} });
+function resolveTwoToneColors(twoToneColor) {
+  if (Array.isArray(twoToneColor)) {
+    return [twoToneColor[0], twoToneColor[1]];
   }
-  return normalized;
+  const primaryColor = twoToneColor ?? "#1677ff";
+  return [
+    primaryColor,
+    twoToneColor ? lightenColor(twoToneColor) : "#e6f4ff"
+  ];
 }
-function richTextPlainText(runs) {
-  return runs.map((run) => run.text).join("");
+function lightenColor(color) {
+  const match = color.match(/^#([\da-f]{3}|[\da-f]{6})$/i);
+  if (!match) return "#e6e6e6";
+  const raw = match[1];
+  const normalized = raw.length === 3 ? raw.split("").map((digit) => digit + digit).join("") : raw;
+  const channels = normalized.match(/[\da-f]{2}/gi).map((channel) => Number.parseInt(channel, 16));
+  return `#${channels.map((channel) => Math.round(channel + (255 - channel) * 0.9)).map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
 }
-function styleRichTextRange(runs, start, end, patch) {
-  if (start >= end) return normalizeRichTextRuns(runs);
-  ({ from: start, to: end } = alignRange(richTextPlainText(runs), start, end));
-  const result = [];
-  let offset = 0;
-  for (const run of runs) {
-    const runStart = offset;
-    const runEnd = offset + run.text.length;
-    offset = runEnd;
-    if (runEnd <= start || runStart >= end) {
-      result.push(run);
-      continue;
+function renderIconChildren(node, primaryColor, secondaryColor) {
+  return (node.children ?? []).map((child, index) => {
+    const props = {};
+    for (const [key, rawValue] of Object.entries(child.attrs)) {
+      const value = rawValue.split(PRIMARY_COLOR_TOKEN).join(primaryColor).split(SECONDARY_COLOR_TOKEN).join(secondaryColor);
+      props[normalizeSvgAttribute(key)] = value;
     }
-    const localStart = Math.max(0, start - runStart);
-    const localEnd = Math.min(run.text.length, end - runStart);
-    if (localStart)
-      result.push({ ...run, text: run.text.slice(0, localStart) });
-    result.push({
-      text: run.text.slice(localStart, localEnd),
-      style: { ...run.style, ...patch }
-    });
-    if (localEnd < run.text.length)
-      result.push({ ...run, text: run.text.slice(localEnd) });
-  }
-  return normalizeRichTextRuns(result);
+    return React.createElement(
+      child.tag,
+      { ...props, key: `${child.tag}-${index}` },
+      ...renderIconChildren(child, primaryColor, secondaryColor)
+    );
+  });
 }
-function replaceRichTextRange(runs, start, end, text) {
-  const content = richTextPlainText(runs);
-  const { from, to } = alignRange(content, start, end);
-  const result = [];
-  let offset = 0;
-  let inherited;
-  let following;
-  for (const run of runs) {
-    const runStart = offset;
-    const runEnd = offset + run.text.length;
-    offset = runEnd;
-    if (runStart < from) {
-      const before = run.text.slice(
-        0,
-        Math.min(run.text.length, from - runStart)
-      );
-      if (before) {
-        result.push({ ...run, text: before });
-        inherited = run.style;
-      }
-    }
-    if (runEnd > to) {
-      const after = run.text.slice(Math.max(0, to - runStart));
-      if (after) {
-        following ?? (following = run.style);
-        result.push({ ...run, text: after });
-      }
-    }
-  }
-  if (text) {
-    let length = 0;
-    const insertionIndex = result.findIndex((run) => {
-      length += run.text.length;
-      return length > from;
-    });
-    result.splice(insertionIndex < 0 ? result.length : insertionIndex, 0, {
-      text,
-      ...inherited ?? following ? { style: inherited ?? following } : {}
-    });
-  }
-  return normalizeRichTextRuns(result);
-}
-
-// src/components/compat/style.css
-styleInject(".canvas-react-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 4px 14px;\n  border: 1px solid var(--cc-border-color, #d9d9d9);\n  border-radius: 6px;\n  color: var(--cc-text-color, #1f2937);\n  background: var(--cc-surface-color, #fff);\n  cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n  color: #1677ff;\n  border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.canvas-react-button-primary {\n  color: #fff;\n  border-color: #1677ff;\n  background: #1677ff;\n}\n.canvas-react-button-primary:hover:not(:disabled) {\n  color: #fff;\n  border-color: #4096ff;\n  background: #4096ff;\n}\n.canvas-react-button-danger {\n  color: #dc2626;\n  border-color: #fca5a5;\n}\n.canvas-react-button-small {\n  min-height: 24px;\n  padding: 2px 8px;\n}\n.canvas-react-button-large {\n  min-height: 40px;\n  padding: 6px 18px;\n}\n.canvas-react-button-icon {\n  display: inline-flex;\n}\n.canvas-react-row {\n  display: flex;\n  flex-flow: row wrap;\n}\n.canvas-react-col {\n  min-width: 0;\n  padding-inline: 8px;\n}\n.canvas-react-radio-group {\n  display: flex;\n  gap: 16px;\n}\n.canvas-react-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n}\n.canvas-react-radio input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.canvas-react-radio-mark {\n  width: 14px;\n  height: 14px;\n  border: 1px solid #94a3b8;\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n  border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 16px;\n}\n.canvas-react-form-label {\n  color: #334155;\n  font-size: 14px;\n}\n.canvas-react-form-error {\n  color: #dc2626;\n  font-size: 12px;\n}\n.canvas-react-textarea {\n  width: 100%;\n  min-height: 72px;\n  padding: 8px 10px;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: 6px;\n  box-sizing: border-box;\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font: inherit;\n  resize: vertical;\n}\n.canvas-react-textarea:hover:not(:disabled) {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-textarea:focus {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n  outline: none;\n}\n.canvas-react-textarea::placeholder {\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-textarea:disabled {\n  background: var(--canvas-react-color-bg-soft, #fafafa);\n  color: var(--canvas-react-color-text-muted);\n  cursor: not-allowed;\n}\n");
-
-// src/components/form/style.css
-styleInject(".canvas-react-form {\n  min-width: 0;\n}\n.canvas-react-form-vertical {\n  display: grid;\n  gap: 16px;\n}\n.canvas-react-form-horizontal {\n  display: grid;\n  gap: 12px;\n}\n.canvas-react-form-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px 16px;\n}\n.canvas-react-form-item {\n  box-sizing: border-box;\n  min-width: 0;\n}\n.canvas-react-form-item-vertical {\n  display: grid;\n  gap: 6px;\n}\n.canvas-react-form-item-horizontal {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  row-gap: 4px;\n}\n.canvas-react-form-item-inline {\n  display: inline-grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 8px;\n}\n.canvas-react-form-item-no-wrap {\n  flex-wrap: nowrap;\n}\n.canvas-react-form-item-horizontal.canvas-react-form-item-no-wrap {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-horizontal > .canvas-react-form-item {\n  margin-bottom: var(--canvas-react-form-item-spacing, 16px);\n}\n.canvas-react-form-item-inline.canvas-react-form-item-no-wrap {\n  display: inline-grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-item-no-wrap > .canvas-react-form-label {\n  white-space: nowrap;\n}\n.canvas-react-form-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  min-width: 0;\n  color: #475569;\n  font-size: var(--canvas-react-font-size-label);\n  line-height: 1.4;\n}\n.canvas-react-form-horizontal > .canvas-react-form-item > .canvas-react-form-label {\n  min-height: 32px;\n}\n.canvas-react-form-required {\n  color: #dc2626;\n}\n.canvas-react-form-control {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.canvas-react-form-error {\n  color: #dc2626;\n  font-size: var(--canvas-react-font-size-secondary);\n}\n.canvas-react-form-help,\n.canvas-react-form-extra {\n  color: #64748b;\n  font-size: var(--canvas-react-font-size-secondary);\n}\n.canvas-react-form-item-error .canvas-react-form-control > input,\n.canvas-react-form-item-error .canvas-react-form-control > textarea {\n  border-color: #dc2626;\n}\n");
-function createFormInstance() {
-  const store = {
-    values: {},
-    initialValues: {},
-    errors: {},
-    rules: /* @__PURE__ */ new Map(),
-    listeners: /* @__PURE__ */ new Set(),
-    revision: 0,
-    notify() {
-      store.revision += 1;
-      store.listeners.forEach((listener) => listener());
-    }
-  };
-  return {
-    __store: store,
-    getFieldValue: (name) => store.values[name],
-    setFieldsValue(values) {
-      store.values = { ...store.values, ...values };
-      Object.keys(values).forEach((name) => {
-        delete store.errors[name];
-      });
-      store.notify();
-    },
-    resetFields() {
-      store.values = { ...store.initialValues };
-      store.errors = {};
-      store.notify();
-    },
-    async validateFields() {
-      const errors = {};
-      for (const [name, rules] of store.rules) {
-        const value = store.values[name];
-        for (const rawRule of rules) {
-          const rule = typeof rawRule === "function" ? rawRule({ getFieldValue: (field) => store.values[field] }) : rawRule;
-          if (rule.required && (value === void 0 || value === null || value === "")) {
-            errors[name] = rule.message ?? "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879";
-            break;
-          }
-          if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.min !== void 0 && value < rule.min) {
-            errors[name] = rule.message ?? `\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`;
-            break;
-          }
-          if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.max !== void 0 && value > rule.max) {
-            errors[name] = rule.message ?? `\u4E0D\u80FD\u5927\u4E8E ${rule.max}`;
-            break;
-          }
-          if (rule.type === "integer" && typeof value === "number" && !Number.isInteger(value)) {
-            errors[name] = rule.message ?? "\u8BF7\u8F93\u5165\u6574\u6570";
-            break;
-          }
-          if (rule.validator) {
-            try {
-              await rule.validator(rule, value);
-            } catch (error) {
-              errors[name] = error instanceof Error ? error.message : "\u6821\u9A8C\u5931\u8D25";
-              break;
-            }
-          }
-        }
-      }
-      store.errors = errors;
-      store.notify();
-      if (Object.keys(errors).length > 0) {
-        return Promise.reject({
-          errorFields: errors,
-          values: { ...store.values }
-        });
-      }
-      return { ...store.values };
-    }
-  };
-}
-function useReactForm() {
-  const formRef = React.useRef(null);
-  if (!formRef.current) formRef.current = createFormInstance();
-  return [formRef.current];
-}
-function useReactFormWatch(name, form) {
-  React.useSyncExternalStore(
-    (listener) => {
-      form.__store.listeners.add(listener);
-      return () => form.__store.listeners.delete(listener);
-    },
-    () => form.__store.revision,
-    () => 0
-  );
-  return form.getFieldValue(name);
-}
-var FormContext = React.createContext(null);
-var emptySubscribe = () => () => {
-};
-var emptySnapshot = () => 0;
-function ReactFormRoot({
-  form: formProp,
-  initialValues,
-  layout = "vertical",
-  noWrap = false,
-  itemSpacing,
-  labelWidth,
-  labelAlign = "right",
-  colon = false,
-  requiredMark = true,
-  className,
-  children,
-  ...props
-}) {
-  const internalForm = React.useRef(null);
-  if (!internalForm.current) internalForm.current = createFormInstance();
-  const form = formProp ?? internalForm.current;
-  const initialKey = React.useMemo(
-    () => JSON.stringify(initialValues ?? {}),
-    [initialValues]
-  );
-  React.useEffect(() => {
-    form.__store.initialValues = { ...initialValues };
-    form.__store.values = { ...initialValues, ...form.__store.values };
-    form.__store.notify();
-  }, [form, initialKey]);
-  const contextValue = React.useMemo(
-    () => ({
-      form,
-      layout,
-      noWrap,
-      labelWidth,
-      labelAlign,
-      colon,
-      requiredMark
-    }),
-    [colon, form, labelAlign, labelWidth, layout, noWrap, requiredMark]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "form",
-    {
-      ...props,
-      style: itemSpacing === void 0 ? props.style : {
-        ...props.style,
-        "--canvas-react-form-item-spacing": itemSpacing
-      },
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-form`,
-        `${REACT_COMPONENT_PREFIX}-form-${layout}`,
-        className
-      ),
-      onSubmit: (event) => event.preventDefault(),
-      children
-    }
-  ) });
-}
-function ReactFormItem({
-  label,
-  name,
-  children,
-  rules = [],
-  initialValue,
-  required,
-  colon,
-  labelWidth,
-  labelAlign,
-  labelStyle,
-  controlStyle,
-  help,
-  extra,
-  className,
-  style,
-  noWrap
-}) {
-  const context = React.useContext(FormContext);
-  const form = context?.form ?? null;
-  if (name && !form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
-  React.useSyncExternalStore(
-    form ? (listener) => {
-      form.__store.listeners.add(listener);
-      return () => form.__store.listeners.delete(listener);
-    } : emptySubscribe,
-    form ? () => form.__store.revision : emptySnapshot,
-    emptySnapshot
-  );
-  React.useEffect(() => {
-    if (!form || !name) return;
-    form.__store.rules.set(name, rules);
-    if (form.getFieldValue(name) === void 0 && initialValue !== void 0) {
-      form.setFieldsValue({ [name]: initialValue });
-    }
-    return () => {
-      form.__store.rules.delete(name);
-    };
-  }, [form, initialValue, name, rules]);
-  const childProps = React.isValidElement(children) ? children.props : {};
-  const value = form && name ? form.getFieldValue(name) : void 0;
-  const child = form && name && React.isValidElement(children) ? React.cloneElement(children, {
-    value: value ?? "",
-    onChange: (...args) => {
-      const first = args[0];
-      const nextValue = typeof first === "object" && first !== null && "target" in first ? first.target?.value : first;
-      form.setFieldsValue({ [name]: nextValue });
-      const childOnChange = childProps.onChange;
-      if (typeof childOnChange === "function") childOnChange(...args);
-    }
-  }) : children;
-  const error = form && name ? form.__store.errors[name] : void 0;
-  const isRequired = required ?? rules.some((rule) => typeof rule !== "function" && rule.required === true);
-  const resolvedLabelWidth = labelWidth ?? context?.labelWidth;
-  const resolvedLabelAlign = labelAlign ?? context?.labelAlign ?? "right";
-  const showColon = colon ?? context?.colon ?? false;
-  const shouldMarkRequired = context?.requiredMark ?? true;
-  const resolvedLayout = context?.layout ?? "vertical";
-  const resolvedNoWrap = noWrap ?? context?.noWrap ?? false;
-  const labelElementId = typeof childProps.id === "string" ? childProps.id : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-form-item`,
-        `${REACT_COMPONENT_PREFIX}-form-item-${resolvedLayout}`,
-        resolvedNoWrap && `${REACT_COMPONENT_PREFIX}-form-item-no-wrap`,
-        className,
-        error && `${REACT_COMPONENT_PREFIX}-form-item-error`
-      ),
-      style,
-      children: [
-        label ? /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: `${REACT_COMPONENT_PREFIX}-form-label`,
-            htmlFor: labelElementId,
-            style: {
-              width: resolvedLabelWidth,
-              flexBasis: resolvedLabelWidth,
-              textAlign: resolvedLabelAlign,
-              ...labelStyle
-            },
-            children: [
-              shouldMarkRequired && isRequired ? /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: `${REACT_COMPONENT_PREFIX}-form-required`,
-                  children: "*"
-                }
-              ) : null,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-              showColon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: ":" }) : null
-            ]
-          }
-        ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: `${REACT_COMPONENT_PREFIX}-form-control`,
-            style: controlStyle,
-            children: [
-              child,
-              error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: error }) : help ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-help`, children: help }) : null,
-              extra ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-extra`, children: extra }) : null
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-var ReactForm = Object.assign(ReactFormRoot, {
-  Item: ReactFormItem,
-  useForm: useReactForm,
-  useWatch: useReactFormWatch
-});
-
-// src/components/message/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-message-host {\n  position: fixed;\n  z-index: 3000;\n  inset-inline: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  padding-inline: 16px;\n  pointer-events: none;\n  font-size: var(--canvas-react-font-size, 14px);\n}\n.canvas-react-message {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  max-width: min(100%, 640px);\n  max-height: 240px;\n  padding: 9px 12px;\n  border-radius: var(--canvas-react-radius-md, 8px);\n  background: var(--canvas-react-color-bg, #fff);\n  color: var(--canvas-react-color-text, rgba(0, 0, 0, 0.88));\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);\n  line-height: 1.5;\n  pointer-events: auto;\n  animation: canvas-react-message-enter 0.2s ease-out both;\n}\n.canvas-react-message-leaving {\n  overflow: hidden;\n  pointer-events: none;\n  animation: canvas-react-message-leave 0.3s ease-in forwards;\n}\n.canvas-react-message-icon {\n  display: inline-flex;\n  flex: none;\n  width: 16px;\n  height: 16px;\n}\n.canvas-react-message-icon svg {\n  width: 16px;\n  height: 16px;\n}\n.canvas-react-message-info,\n.canvas-react-message-loading {\n  --canvas-react-message-color: #1677ff;\n}\n.canvas-react-message-success {\n  --canvas-react-message-color: #52c41a;\n}\n.canvas-react-message-warning {\n  --canvas-react-message-color: #faad14;\n}\n.canvas-react-message-error {\n  --canvas-react-message-color: #ff4d4f;\n}\n.canvas-react-message-icon {\n  color: var(--canvas-react-message-color);\n}\n.canvas-react-message-spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: canvas-react-message-spin 0.8s linear infinite;\n}\n@keyframes canvas-react-message-enter {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes canvas-react-message-leave {\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n    max-height: 0;\n    padding-block: 0;\n    margin-bottom: -8px;\n  }\n}\n@keyframes canvas-react-message-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .canvas-react-message,\n  .canvas-react-message-spinner {\n    animation-duration: 0.01ms;\n  }\n}\n');
-var nextKey = 0;
-var LEAVE_DURATION = 300;
-function createMessageStore(initialOptions = {}) {
-  let options = initialOptions;
-  let entries = [];
-  const listeners2 = /* @__PURE__ */ new Set();
-  const timers = /* @__PURE__ */ new Map();
-  const leaveTimers = /* @__PURE__ */ new Map();
-  const publish = () => listeners2.forEach((listener) => listener());
-  const remove = (key) => {
-    const targets = key === void 0 ? entries.filter((entry) => !entry.leaving) : entries.filter((entry) => entry.key === key && !entry.leaving);
-    if (!targets.length) return;
-    targets.forEach((entry) => {
-      const timer = timers.get(entry.key);
-      if (timer) clearTimeout(timer);
-      timers.delete(entry.key);
-      entry.leaving = true;
-      leaveTimers.set(
-        entry.key,
-        setTimeout(() => {
-          leaveTimers.delete(entry.key);
-          entries = entries.filter(
-            (item) => item.key !== entry.key || item !== entry
-          );
-          entry.close();
-          entry.onClose?.();
-          publish();
-        }, LEAVE_DURATION)
-      );
-    });
-    publish();
-  };
-  const open = (config) => {
-    const key = config.key ?? ++nextKey;
-    const previous = entries.find((entry2) => entry2.key === key);
-    const oldTimer = timers.get(key);
-    if (oldTimer) clearTimeout(oldTimer);
-    timers.delete(key);
-    const leaveTimer = leaveTimers.get(key);
-    if (leaveTimer) clearTimeout(leaveTimer);
-    leaveTimers.delete(key);
-    let resolve;
-    const promise = previous ? void 0 : new Promise((done) => {
-      resolve = done;
-    });
-    const close = previous?.close ?? resolve;
-    const entry = {
-      ...config,
-      key,
-      type: config.type ?? "info",
-      close
-    };
-    entries = previous ? entries.map((item) => item.key === key ? entry : item) : [...entries, entry];
-    if (options.maxCount && entries.filter((item) => !item.leaving).length > options.maxCount) {
-      const oldest = entries.find((item) => item.key !== key && !item.leaving);
-      if (oldest && oldest.key !== key) remove(oldest.key);
-    }
-    const duration = config.duration ?? options.duration ?? (entry.type === "loading" ? 0 : 3);
-    if (duration > 0)
-      timers.set(
-        key,
-        setTimeout(() => remove(key), duration * 1e3)
-      );
-    publish();
-    const handle = (() => remove(key));
-    handle.then = (onFulfilled, onRejected) => (promise ?? new Promise((done) => {
-      const current = entries.find((item) => item.key === key);
-      if (!current) done();
-      else {
-        const originalClose = current.close;
-        current.close = () => {
-          originalClose();
-          done();
-        };
-      }
-    })).then(onFulfilled, onRejected);
-    return handle;
-  };
-  const level = (type) => (content, duration, onClose) => open(
-    isConfig(content) ? { ...content, type } : { content, type, duration, onClose }
-  );
-  const api = {
-    open,
-    info: level("info"),
-    success: level("success"),
-    warning: level("warning"),
-    error: level("error"),
-    loading: level("loading"),
-    destroy: remove,
-    config(next) {
-      options = { ...options, ...next };
-      publish();
-    }
-  };
-  return {
-    api,
-    getEntries: () => entries,
-    getOptions: () => options,
-    subscribe(listener) {
-      listeners2.add(listener);
-      return () => {
-        listeners2.delete(listener);
-      };
-    }
-  };
-}
-function isConfig(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && "content" in value;
-}
-function MessageHolder({ store }) {
-  const [, refresh] = React.useState(0);
-  React.useEffect(() => {
-    refresh((value) => value + 1);
-    return store.subscribe(() => refresh((value) => value + 1));
-  }, [store]);
-  const options = store.getOptions();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `${REACT_COMPONENT_PREFIX}-message-host`,
-      style: { top: options.top ?? 8 },
-      role: "status",
-      "aria-live": "polite",
-      children: store.getEntries().map((entry) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: [
-            `${REACT_COMPONENT_PREFIX}-message`,
-            `${REACT_COMPONENT_PREFIX}-message-${entry.type}`,
-            entry.leaving && `${REACT_COMPONENT_PREFIX}-message-leaving`,
-            entry.className
-          ].filter(Boolean).join(" "),
-          style: entry.style,
-          onClick: entry.onClick,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: `${REACT_COMPONENT_PREFIX}-message-icon`,
-                "aria-hidden": "true",
-                children: entry.icon ?? /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, { type: entry.type })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: entry.content })
-          ]
-        },
-        entry.key
-      ))
-    }
-  );
-}
-function MessageIcon({ type }) {
-  if (type === "loading")
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-message-spinner` });
-  const path = type === "success" ? "M5 12l4 4L19 6" : type === "error" ? "M6 6l12 12M18 6L6 18" : type === "warning" ? "M12 7v6m0 4h.01" : "M12 11v6m0-10h.01";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2.4",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx: "12",
-            cy: "12",
-            r: "10",
-            fill: "currentColor",
-            stroke: "none",
-            opacity: ".12"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
-      ]
-    }
-  );
-}
-var staticStore;
-var staticRootMounted = false;
-var staticHost;
-function resolveMessageContainer(value) {
-  return (typeof value === "function" ? value() : value) ?? document.body;
-}
-function getStaticStore() {
-  if (!staticStore) staticStore = createMessageStore();
-  if (typeof document !== "undefined" && !staticRootMounted) {
-    const host = document.createElement("div");
-    host.id = `${REACT_COMPONENT_PREFIX}-message-root`;
-    resolveMessageContainer(staticStore.getOptions().getContainer).appendChild(
-      host
-    );
-    staticHost = host;
-    staticRootMounted = true;
-    if (typeof ReactDOM__namespace.render === "function") {
-      ReactDOM__namespace.render(/* @__PURE__ */ jsxRuntime.jsx(MessageHolder, { store: staticStore }), host);
-    } else {
-      void import('react-dom/client').then(({ createRoot }) => {
-        createRoot(host).render(/* @__PURE__ */ jsxRuntime.jsx(MessageHolder, { store: staticStore }));
-      });
-    }
-  } else if (staticHost && !staticHost.isConnected) {
-    resolveMessageContainer(staticStore.getOptions().getContainer).appendChild(
-      staticHost
-    );
-  }
-  return staticStore;
-}
-var reactMessage = {
-  open: (config) => getStaticStore().api.open(config),
-  info: (content, duration, onClose) => getStaticStore().api.info(content, duration, onClose),
-  success: (content, duration, onClose) => getStaticStore().api.success(content, duration, onClose),
-  warning: (content, duration, onClose) => getStaticStore().api.warning(content, duration, onClose),
-  error: (content, duration, onClose) => getStaticStore().api.error(content, duration, onClose),
-  loading: (content, duration, onClose) => getStaticStore().api.loading(content, duration, onClose),
-  destroy: (key) => getStaticStore().api.destroy(key),
-  config: (options) => {
-    const store = getStaticStore();
-    store.api.config(options);
-    if (staticHost && typeof document !== "undefined") {
-      const container = resolveMessageContainer(
-        store.getOptions().getContainer
-      );
-      if (staticHost.parentElement !== container)
-        container.appendChild(staticHost);
-    }
-  },
-  /** 创建能读取调用位置 React Context 的消息实例。 */
-  useMessage: (options) => useReactMessage(options)
-};
-function useReactMessage(options) {
-  const store = React.useMemo(() => createMessageStore(options), []);
-  React.useEffect(() => () => store.api.destroy(), [store]);
-  const holder = /* @__PURE__ */ jsxRuntime.jsx(MessageHolder, { store }, "message-holder");
-  return [
-    store.api,
-    options?.getContainer && typeof document !== "undefined" ? ReactDOM__namespace.createPortal(
-      holder,
-      resolveMessageContainer(options.getContainer)
-    ) : holder
-  ];
-}
-function ReactButton({
-  children,
-  className,
-  danger,
-  htmlType = "button",
-  icon,
-  size = "middle",
-  type = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ...props,
-      type: htmlType,
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-button`,
-        `${REACT_COMPONENT_PREFIX}-button-${type}`,
-        `${REACT_COMPONENT_PREFIX}-button-${size}`,
-        danger && `${REACT_COMPONENT_PREFIX}-button-danger`,
-        className
-      ),
-      children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-button-icon`, children: icon }) : null,
-        children
-      ]
-    }
-  );
-}
-function ReactFlex({
-  vertical,
-  justify,
-  align,
-  gap,
-  style,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      style: {
-        display: "flex",
-        flexDirection: vertical ? "column" : "row",
-        justifyContent: justify,
-        alignItems: align,
-        gap,
-        ...style
-      }
-    }
-  );
-}
-function ReactRow({ gutter = 0, style, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-row`,
-        props.className
-      ),
-      style: { marginInline: -gutter / 2, ...style }
-    }
-  );
-}
-function ReactCol({ span = 24, style, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-col`,
-        props.className
-      ),
-      style: {
-        flex: `0 0 ${span / 24 * 100}%`,
-        maxWidth: `${span / 24 * 100}%`,
-        ...style
-      }
-    }
-  );
-}
-var RadioGroupContext = React.createContext({});
-function ReactRadioOption({
-  value,
-  checked,
-  disabled,
-  onChange,
-  children,
-  className,
-  ...props
-}) {
-  const group = React.useContext(RadioGroupContext);
-  const selected = checked ?? String(group.value ?? "") === String(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      ...props,
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-radio`,
-        disabled && `${REACT_COMPONENT_PREFIX}-radio-disabled`,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "radio",
-            checked: selected,
-            disabled,
-            onChange: () => {
-              const event = { target: { value } };
-              onChange?.(event);
-              group.onChange?.(event);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-radio-mark` }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
-      ]
-    }
-  );
-}
-function ReactRadioGroup({
-  value,
-  onChange,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-radio-group`,
-        className
-      )
-    }
-  ) });
-}
-var ReactRadio = Object.assign(ReactRadioOption, {
-  Group: ReactRadioGroup
-});
-function ReactTextArea({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      ...props,
-      className: joinClassNames(
-        `${REACT_COMPONENT_PREFIX}-textarea`,
-        className
-      )
-    }
-  );
-}
-var REACT_ICON_DEFINITIONS = icons.iconDefinitions;
-
-// src/components/icon/style.css
-styleInject(".canvas-react-icon {\n  display: inline-block;\n  vertical-align: -0.125em;\n  color: inherit;\n}\n.canvas-react-icon-spin {\n  animation: canvas-react-icon-spin 1s infinite linear;\n}\n@keyframes canvas-react-icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .canvas-react-icon-spin {\n    animation-duration: 2s;\n  }\n}\n");
-var PRIMARY_COLOR_TOKEN = "__CC_REACT_ICON_PRIMARY__";
-var SECONDARY_COLOR_TOKEN = "__CC_REACT_ICON_SECONDARY__";
-var ReactIcon = React.forwardRef(
-  function ReactIcon2({
-    "aria-hidden": ariaHidden,
-    "aria-label": ariaLabel,
-    className,
-    color,
-    name,
-    rotate,
-    size = "1em",
-    spin = false,
-    style,
-    twoToneColor,
-    ...svgProps
-  }, ref) {
-    const icon = REACT_ICON_DEFINITIONS[name];
-    const [primaryColor, secondaryColor] = resolveTwoToneColors(twoToneColor);
-    const svgStyle = {
-      color,
-      width: size,
-      height: size,
-      transform: rotate == null ? void 0 : `rotate(${rotate}deg)`,
-      ...style
-    };
-    const classes = [
-      "canvas-react-icon",
-      spin ? "canvas-react-icon-spin" : void 0,
-      className
-    ].filter(Boolean).join(" ");
-    return React.createElement(
-      "svg",
-      {
-        ...svgProps,
-        ref,
-        className: classes,
-        viewBox: icon.icon.attrs.viewBox,
-        width: size,
-        height: size,
-        fill: "currentColor",
-        style: svgStyle,
-        role: ariaLabel ? "img" : svgProps.role,
-        "aria-label": ariaLabel,
-        "aria-hidden": ariaHidden ?? !ariaLabel,
-        focusable: "false",
-        "data-icon": icon.name
-      },
-      ...renderIconChildren(icon.icon, primaryColor, secondaryColor)
-    );
-  }
-);
-ReactIcon.displayName = "ReactIcon";
-function createReactIconComponent(name) {
-  const IconComponent = React.forwardRef(
-    function NamedReactIcon(props, ref) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ReactIcon, { ...props, name, ref });
-    }
-  );
-  IconComponent.displayName = `React${name}`;
-  return IconComponent;
-}
-function resolveTwoToneColors(twoToneColor) {
-  if (Array.isArray(twoToneColor)) {
-    return [twoToneColor[0], twoToneColor[1]];
-  }
-  const primaryColor = twoToneColor ?? "#1677ff";
-  return [
-    primaryColor,
-    twoToneColor ? lightenColor(twoToneColor) : "#e6f4ff"
-  ];
-}
-function lightenColor(color) {
-  const match = color.match(/^#([\da-f]{3}|[\da-f]{6})$/i);
-  if (!match) return "#e6e6e6";
-  const raw = match[1];
-  const normalized = raw.length === 3 ? raw.split("").map((digit) => digit + digit).join("") : raw;
-  const channels = normalized.match(/[\da-f]{2}/gi).map((channel) => Number.parseInt(channel, 16));
-  return `#${channels.map((channel) => Math.round(channel + (255 - channel) * 0.9)).map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
-}
-function renderIconChildren(node, primaryColor, secondaryColor) {
-  return (node.children ?? []).map((child, index) => {
-    const props = {};
-    for (const [key, rawValue] of Object.entries(child.attrs)) {
-      const value = rawValue.split(PRIMARY_COLOR_TOKEN).join(primaryColor).split(SECONDARY_COLOR_TOKEN).join(secondaryColor);
-      props[normalizeSvgAttribute(key)] = value;
-    }
-    return React.createElement(
-      child.tag,
-      { ...props, key: `${child.tag}-${index}` },
-      ...renderIconChildren(child, primaryColor, secondaryColor)
-    );
-  });
-}
-var SVG_ATTRIBUTE_NAMES = {
-  class: "className",
-  "clip-path": "clipPath",
-  "clip-rule": "clipRule",
-  "fill-rule": "fillRule",
-  "stroke-dasharray": "strokeDasharray",
-  "stroke-dashoffset": "strokeDashoffset",
-  "stroke-linecap": "strokeLinecap",
-  "stroke-linejoin": "strokeLinejoin",
-  "stroke-miterlimit": "strokeMiterlimit",
-  "stroke-width": "strokeWidth",
-  "xlink:href": "xlinkHref"
-};
-function normalizeSvgAttribute(name) {
-  return SVG_ATTRIBUTE_NAMES[name] ?? name.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
+var SVG_ATTRIBUTE_NAMES = {
+  class: "className",
+  "clip-path": "clipPath",
+  "clip-rule": "clipRule",
+  "fill-rule": "fillRule",
+  "stroke-dasharray": "strokeDasharray",
+  "stroke-dashoffset": "strokeDashoffset",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "stroke-miterlimit": "strokeMiterlimit",
+  "stroke-width": "strokeWidth",
+  "xlink:href": "xlinkHref"
+};
+function normalizeSvgAttribute(name) {
+  return SVG_ATTRIBUTE_NAMES[name] ?? name.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
 }
 
 // src/components/icon/icons.tsx
@@ -2286,6 +1451,866 @@ var ReactZhihuSquareFilled = createReactIconComponent("ZhihuSquareFilled");
 var ReactZoomInOutlined = createReactIconComponent("ZoomInOutlined");
 var ReactZoomOutOutlined = createReactIconComponent("ZoomOutOutlined");
 
+// src/components/empty/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-empty {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  min-width: 0;\n  padding: 24px 12px;\n  color: var(--canvas-react-color-text-secondary, #8c8c8c);\n  font-size: var(--canvas-react-font-size, 14px);\n  text-align: center;\n}\n.canvas-react-empty-image {\n  display: flex;\n  color: #c8d0dc;\n}\n.canvas-react-empty-description {\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n.canvas-react-empty-actions {\n  margin-top: 8px;\n}\n');
+function ReactEmpty({
+  description = "\u6682\u65E0\u6570\u636E",
+  image = /* @__PURE__ */ jsxRuntime.jsx(ReactInboxOutlined, { "aria-hidden": "true", size: 42 }),
+  children,
+  className,
+  role = "status",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      role,
+      className: joinClassNames(`${REACT_COMPONENT_PREFIX}-empty`, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-empty-image`, children: image }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-empty-description`, children: description }),
+        children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-empty-actions`, children }) : null
+      ]
+    }
+  );
+}
+
+// src/components/tag/style.css
+styleInject(".canvas-react-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  min-width: 0;\n  max-width: 100%;\n  padding: 3px 6px;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg-soft);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size-secondary);\n  line-height: 1.4;\n}\n.canvas-react-tag-content {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 4px;\n  min-width: 0;\n  overflow: hidden;\n}\n.canvas-react-tag-close {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  font: inherit;\n  font-size: 16px;\n  line-height: 1;\n  cursor: pointer;\n}\n.canvas-react-tag-close:hover {\n  background: var(--canvas-react-color-bg-hover);\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-tag-close:focus-visible {\n  outline: 2px solid var(--canvas-react-color-primary);\n  outline-offset: 1px;\n}\n");
+function ReactTag({
+  children,
+  className,
+  closeLabel = "\u79FB\u9664\u6807\u7B7E",
+  onClose,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ...restProps,
+      className: joinClassNames(`${REACT_COMPONENT_PREFIX}-tag`, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-tag-content`, children }),
+        onClose ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: `${REACT_COMPONENT_PREFIX}-tag-close`,
+            "aria-label": closeLabel,
+            title: closeLabel,
+            onClick: onClose,
+            children: "\xD7"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/rich-text/model.ts
+var styleKey = (style) => JSON.stringify({
+  fontFamily: style?.fontFamily,
+  fontSize: style?.fontSize,
+  fontWeight: style?.fontWeight,
+  fontStyle: style?.fontStyle,
+  color: style?.color
+});
+function normalizeStyle(input) {
+  if (!input) return void 0;
+  const style = {};
+  if (typeof input.fontFamily === "string" && /^[\p{L}\p{N}_\s,'"-]+$/u.test(input.fontFamily))
+    style.fontFamily = input.fontFamily;
+  if (typeof input.fontSize === "number" && Number.isFinite(input.fontSize) && input.fontSize >= 1 && input.fontSize <= 240)
+    style.fontSize = input.fontSize;
+  if (typeof input.fontWeight === "string" && /^(?:[1-9]00|normal|bold)$/.test(input.fontWeight))
+    style.fontWeight = input.fontWeight;
+  if (input.fontStyle === "normal" || input.fontStyle === "italic")
+    style.fontStyle = input.fontStyle;
+  if (typeof input.color === "string" && /^#[0-9a-fA-F]{3,8}$/.test(input.color))
+    style.color = input.color;
+  return Object.keys(style).length ? style : void 0;
+}
+function alignRange(text, start, end) {
+  const Segmenter = Intl.Segmenter;
+  const boundaries = Segmenter ? [
+    0,
+    ...Array.from(
+      new Segmenter(void 0, { granularity: "grapheme" }).segment(text),
+      (part) => part.index + part.segment.length
+    )
+  ] : [
+    0,
+    ...Array.from(text).reduce((offsets, character) => {
+      offsets.push((offsets[offsets.length - 1] ?? 0) + character.length);
+      return offsets;
+    }, [])
+  ];
+  const clampedStart = Math.max(0, Math.min(start, text.length));
+  const clampedEnd = Math.max(clampedStart, Math.min(end, text.length));
+  const from = [...boundaries].reverse().find((boundary) => boundary <= clampedStart) ?? 0;
+  const to = clampedStart === clampedEnd ? from : boundaries.find((boundary) => boundary >= clampedEnd) ?? text.length;
+  return { from, to };
+}
+function normalizeRichTextRuns(runs) {
+  const normalized = [];
+  for (const run of runs) {
+    if (!run.text) continue;
+    const style = normalizeStyle(run.style);
+    const previous = normalized[normalized.length - 1];
+    if (previous && styleKey(previous.style) === styleKey(style))
+      previous.text += run.text;
+    else normalized.push({ text: run.text, ...style ? { style } : {} });
+  }
+  return normalized;
+}
+function richTextPlainText(runs) {
+  return runs.map((run) => run.text).join("");
+}
+function styleRichTextRange(runs, start, end, patch) {
+  if (start >= end) return normalizeRichTextRuns(runs);
+  ({ from: start, to: end } = alignRange(richTextPlainText(runs), start, end));
+  const result = [];
+  let offset = 0;
+  for (const run of runs) {
+    const runStart = offset;
+    const runEnd = offset + run.text.length;
+    offset = runEnd;
+    if (runEnd <= start || runStart >= end) {
+      result.push(run);
+      continue;
+    }
+    const localStart = Math.max(0, start - runStart);
+    const localEnd = Math.min(run.text.length, end - runStart);
+    if (localStart)
+      result.push({ ...run, text: run.text.slice(0, localStart) });
+    result.push({
+      text: run.text.slice(localStart, localEnd),
+      style: { ...run.style, ...patch }
+    });
+    if (localEnd < run.text.length)
+      result.push({ ...run, text: run.text.slice(localEnd) });
+  }
+  return normalizeRichTextRuns(result);
+}
+function replaceRichTextRange(runs, start, end, text) {
+  const content = richTextPlainText(runs);
+  const { from, to } = alignRange(content, start, end);
+  const result = [];
+  let offset = 0;
+  let inherited;
+  let following;
+  for (const run of runs) {
+    const runStart = offset;
+    const runEnd = offset + run.text.length;
+    offset = runEnd;
+    if (runStart < from) {
+      const before = run.text.slice(
+        0,
+        Math.min(run.text.length, from - runStart)
+      );
+      if (before) {
+        result.push({ ...run, text: before });
+        inherited = run.style;
+      }
+    }
+    if (runEnd > to) {
+      const after = run.text.slice(Math.max(0, to - runStart));
+      if (after) {
+        following ?? (following = run.style);
+        result.push({ ...run, text: after });
+      }
+    }
+  }
+  if (text) {
+    let length = 0;
+    const insertionIndex = result.findIndex((run) => {
+      length += run.text.length;
+      return length > from;
+    });
+    result.splice(insertionIndex < 0 ? result.length : insertionIndex, 0, {
+      text,
+      ...inherited ?? following ? { style: inherited ?? following } : {}
+    });
+  }
+  return normalizeRichTextRuns(result);
+}
+
+// src/components/compat/style.css
+styleInject(".canvas-react-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 4px 14px;\n  border: 1px solid var(--cc-border-color, #d9d9d9);\n  border-radius: 6px;\n  color: var(--cc-text-color, #1f2937);\n  background: var(--cc-surface-color, #fff);\n  cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n  color: #1677ff;\n  border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.canvas-react-button-primary {\n  color: #fff;\n  border-color: #1677ff;\n  background: #1677ff;\n}\n.canvas-react-button-primary:hover:not(:disabled) {\n  color: #fff;\n  border-color: #4096ff;\n  background: #4096ff;\n}\n.canvas-react-button-danger {\n  color: #dc2626;\n  border-color: #fca5a5;\n}\n.canvas-react-button-small {\n  min-height: 24px;\n  padding: 2px 8px;\n}\n.canvas-react-button-large {\n  min-height: 40px;\n  padding: 6px 18px;\n}\n.canvas-react-button-icon {\n  display: inline-flex;\n}\n.canvas-react-row {\n  display: flex;\n  flex-flow: row wrap;\n}\n.canvas-react-col {\n  min-width: 0;\n  padding-inline: 8px;\n}\n.canvas-react-radio-group {\n  display: flex;\n  gap: 16px;\n}\n.canvas-react-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n}\n.canvas-react-radio input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.canvas-react-radio-mark {\n  width: 14px;\n  height: 14px;\n  border: 1px solid #94a3b8;\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n  border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 16px;\n}\n.canvas-react-form-label {\n  color: #334155;\n  font-size: 14px;\n}\n.canvas-react-form-error {\n  color: #dc2626;\n  font-size: 12px;\n}\n.canvas-react-textarea {\n  width: 100%;\n  min-height: 72px;\n  padding: 8px 10px;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: 6px;\n  box-sizing: border-box;\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font: inherit;\n  resize: vertical;\n}\n.canvas-react-textarea:hover:not(:disabled) {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-textarea:focus {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n  outline: none;\n}\n.canvas-react-textarea::placeholder {\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-textarea:disabled {\n  background: var(--canvas-react-color-bg-soft, #fafafa);\n  color: var(--canvas-react-color-text-muted);\n  cursor: not-allowed;\n}\n");
+
+// src/components/form/style.css
+styleInject(".canvas-react-form {\n  min-width: 0;\n}\n.canvas-react-form-vertical {\n  display: grid;\n  gap: 16px;\n}\n.canvas-react-form-horizontal {\n  display: grid;\n  gap: 12px;\n}\n.canvas-react-form-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px 16px;\n}\n.canvas-react-form-item {\n  box-sizing: border-box;\n  min-width: 0;\n}\n.canvas-react-form-item-vertical {\n  display: grid;\n  gap: 6px;\n}\n.canvas-react-form-item-horizontal {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  row-gap: 4px;\n}\n.canvas-react-form-item-inline {\n  display: inline-grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 8px;\n}\n.canvas-react-form-item-no-wrap {\n  flex-wrap: nowrap;\n}\n.canvas-react-form-item-horizontal.canvas-react-form-item-no-wrap {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-horizontal > .canvas-react-form-item {\n  margin-bottom: var(--canvas-react-form-item-spacing, 16px);\n}\n.canvas-react-form-item-inline.canvas-react-form-item-no-wrap {\n  display: inline-grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-item-no-wrap > .canvas-react-form-label {\n  white-space: nowrap;\n}\n.canvas-react-form-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  min-width: 0;\n  color: #475569;\n  font-size: var(--canvas-react-font-size-label);\n  line-height: 1.4;\n}\n.canvas-react-form-horizontal > .canvas-react-form-item > .canvas-react-form-label {\n  min-height: 32px;\n}\n.canvas-react-form-required {\n  color: #dc2626;\n}\n.canvas-react-form-control {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.canvas-react-form-error {\n  color: #dc2626;\n  font-size: var(--canvas-react-font-size-secondary);\n}\n.canvas-react-form-help,\n.canvas-react-form-extra {\n  color: #64748b;\n  font-size: var(--canvas-react-font-size-secondary);\n}\n.canvas-react-form-item-error .canvas-react-form-control > input,\n.canvas-react-form-item-error .canvas-react-form-control > textarea {\n  border-color: #dc2626;\n}\n");
+function createFormInstance() {
+  const store = {
+    values: {},
+    initialValues: {},
+    errors: {},
+    rules: /* @__PURE__ */ new Map(),
+    listeners: /* @__PURE__ */ new Set(),
+    revision: 0,
+    notify() {
+      store.revision += 1;
+      store.listeners.forEach((listener) => listener());
+    }
+  };
+  return {
+    __store: store,
+    getFieldValue: (name) => store.values[name],
+    setFieldsValue(values) {
+      store.values = { ...store.values, ...values };
+      Object.keys(values).forEach((name) => {
+        delete store.errors[name];
+      });
+      store.notify();
+    },
+    resetFields() {
+      store.values = { ...store.initialValues };
+      store.errors = {};
+      store.notify();
+    },
+    async validateFields() {
+      const errors = {};
+      for (const [name, rules] of store.rules) {
+        const value = store.values[name];
+        for (const rawRule of rules) {
+          const rule = typeof rawRule === "function" ? rawRule({ getFieldValue: (field) => store.values[field] }) : rawRule;
+          if (rule.required && (value === void 0 || value === null || value === "")) {
+            errors[name] = rule.message ?? "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879";
+            break;
+          }
+          if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.min !== void 0 && value < rule.min) {
+            errors[name] = rule.message ?? `\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`;
+            break;
+          }
+          if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.max !== void 0 && value > rule.max) {
+            errors[name] = rule.message ?? `\u4E0D\u80FD\u5927\u4E8E ${rule.max}`;
+            break;
+          }
+          if (rule.type === "integer" && typeof value === "number" && !Number.isInteger(value)) {
+            errors[name] = rule.message ?? "\u8BF7\u8F93\u5165\u6574\u6570";
+            break;
+          }
+          if (rule.validator) {
+            try {
+              await rule.validator(rule, value);
+            } catch (error) {
+              errors[name] = error instanceof Error ? error.message : "\u6821\u9A8C\u5931\u8D25";
+              break;
+            }
+          }
+        }
+      }
+      store.errors = errors;
+      store.notify();
+      if (Object.keys(errors).length > 0) {
+        return Promise.reject({
+          errorFields: errors,
+          values: { ...store.values }
+        });
+      }
+      return { ...store.values };
+    }
+  };
+}
+function useReactForm() {
+  const formRef = React.useRef(null);
+  if (!formRef.current) formRef.current = createFormInstance();
+  return [formRef.current];
+}
+function useReactFormWatch(name, form) {
+  React.useSyncExternalStore(
+    (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    },
+    () => form.__store.revision,
+    () => 0
+  );
+  return form.getFieldValue(name);
+}
+var FormContext = React.createContext(null);
+var emptySubscribe = () => () => {
+};
+var emptySnapshot = () => 0;
+function ReactFormRoot({
+  form: formProp,
+  initialValues,
+  layout = "vertical",
+  noWrap = false,
+  itemSpacing,
+  labelWidth,
+  labelAlign = "right",
+  colon = false,
+  requiredMark = true,
+  className,
+  children,
+  ...props
+}) {
+  const internalForm = React.useRef(null);
+  if (!internalForm.current) internalForm.current = createFormInstance();
+  const form = formProp ?? internalForm.current;
+  const initialKey = React.useMemo(
+    () => JSON.stringify(initialValues ?? {}),
+    [initialValues]
+  );
+  React.useEffect(() => {
+    form.__store.initialValues = { ...initialValues };
+    form.__store.values = { ...initialValues, ...form.__store.values };
+    form.__store.notify();
+  }, [form, initialKey]);
+  const contextValue = React.useMemo(
+    () => ({
+      form,
+      layout,
+      noWrap,
+      labelWidth,
+      labelAlign,
+      colon,
+      requiredMark
+    }),
+    [colon, form, labelAlign, labelWidth, layout, noWrap, requiredMark]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      ...props,
+      style: itemSpacing === void 0 ? props.style : {
+        ...props.style,
+        "--canvas-react-form-item-spacing": itemSpacing
+      },
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-form`,
+        `${REACT_COMPONENT_PREFIX}-form-${layout}`,
+        className
+      ),
+      onSubmit: (event) => event.preventDefault(),
+      children
+    }
+  ) });
+}
+function ReactFormItem({
+  label,
+  name,
+  children,
+  rules = [],
+  initialValue,
+  required,
+  colon,
+  labelWidth,
+  labelAlign,
+  labelStyle,
+  controlStyle,
+  help,
+  extra,
+  className,
+  style,
+  noWrap
+}) {
+  const context = React.useContext(FormContext);
+  const form = context?.form ?? null;
+  if (name && !form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
+  React.useSyncExternalStore(
+    form ? (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    } : emptySubscribe,
+    form ? () => form.__store.revision : emptySnapshot,
+    emptySnapshot
+  );
+  React.useEffect(() => {
+    if (!form || !name) return;
+    form.__store.rules.set(name, rules);
+    if (form.getFieldValue(name) === void 0 && initialValue !== void 0) {
+      form.setFieldsValue({ [name]: initialValue });
+    }
+    return () => {
+      form.__store.rules.delete(name);
+    };
+  }, [form, initialValue, name, rules]);
+  const childProps = React.isValidElement(children) ? children.props : {};
+  const value = form && name ? form.getFieldValue(name) : void 0;
+  const child = form && name && React.isValidElement(children) ? React.cloneElement(children, {
+    value: value ?? "",
+    onChange: (...args) => {
+      const first = args[0];
+      const nextValue = typeof first === "object" && first !== null && "target" in first ? first.target?.value : first;
+      form.setFieldsValue({ [name]: nextValue });
+      const childOnChange = childProps.onChange;
+      if (typeof childOnChange === "function") childOnChange(...args);
+    }
+  }) : children;
+  const error = form && name ? form.__store.errors[name] : void 0;
+  const isRequired = required ?? rules.some((rule) => typeof rule !== "function" && rule.required === true);
+  const resolvedLabelWidth = labelWidth ?? context?.labelWidth;
+  const resolvedLabelAlign = labelAlign ?? context?.labelAlign ?? "right";
+  const showColon = colon ?? context?.colon ?? false;
+  const shouldMarkRequired = context?.requiredMark ?? true;
+  const resolvedLayout = context?.layout ?? "vertical";
+  const resolvedNoWrap = noWrap ?? context?.noWrap ?? false;
+  const labelElementId = typeof childProps.id === "string" ? childProps.id : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-form-item`,
+        `${REACT_COMPONENT_PREFIX}-form-item-${resolvedLayout}`,
+        resolvedNoWrap && `${REACT_COMPONENT_PREFIX}-form-item-no-wrap`,
+        className,
+        error && `${REACT_COMPONENT_PREFIX}-form-item-error`
+      ),
+      style,
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: `${REACT_COMPONENT_PREFIX}-form-label`,
+            htmlFor: labelElementId,
+            style: {
+              width: resolvedLabelWidth,
+              flexBasis: resolvedLabelWidth,
+              textAlign: resolvedLabelAlign,
+              ...labelStyle
+            },
+            children: [
+              shouldMarkRequired && isRequired ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `${REACT_COMPONENT_PREFIX}-form-required`,
+                  children: "*"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+              showColon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: ":" }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `${REACT_COMPONENT_PREFIX}-form-control`,
+            style: controlStyle,
+            children: [
+              child,
+              error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: error }) : help ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-help`, children: help }) : null,
+              extra ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-extra`, children: extra }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ReactForm = Object.assign(ReactFormRoot, {
+  Item: ReactFormItem,
+  useForm: useReactForm,
+  useWatch: useReactFormWatch
+});
+
+// src/components/message/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-message-host {\n  position: fixed;\n  z-index: 3000;\n  inset-inline: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  padding-inline: 16px;\n  pointer-events: none;\n  font-size: var(--canvas-react-font-size, 14px);\n}\n.canvas-react-message {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  max-width: min(100%, 640px);\n  max-height: 240px;\n  padding: 9px 12px;\n  border-radius: var(--canvas-react-radius-md, 8px);\n  background: var(--canvas-react-color-bg, #fff);\n  color: var(--canvas-react-color-text, rgba(0, 0, 0, 0.88));\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);\n  line-height: 1.5;\n  pointer-events: auto;\n  animation: canvas-react-message-enter 0.2s ease-out both;\n}\n.canvas-react-message-leaving {\n  overflow: hidden;\n  pointer-events: none;\n  animation: canvas-react-message-leave 0.3s ease-in forwards;\n}\n.canvas-react-message-icon {\n  display: inline-flex;\n  flex: none;\n  width: 16px;\n  height: 16px;\n}\n.canvas-react-message-icon svg {\n  width: 16px;\n  height: 16px;\n}\n.canvas-react-message-info,\n.canvas-react-message-loading {\n  --canvas-react-message-color: #1677ff;\n}\n.canvas-react-message-success {\n  --canvas-react-message-color: #52c41a;\n}\n.canvas-react-message-warning {\n  --canvas-react-message-color: #faad14;\n}\n.canvas-react-message-error {\n  --canvas-react-message-color: #ff4d4f;\n}\n.canvas-react-message-icon {\n  color: var(--canvas-react-message-color);\n}\n.canvas-react-message-spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: canvas-react-message-spin 0.8s linear infinite;\n}\n@keyframes canvas-react-message-enter {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes canvas-react-message-leave {\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n    max-height: 0;\n    padding-block: 0;\n    margin-bottom: -8px;\n  }\n}\n@keyframes canvas-react-message-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .canvas-react-message,\n  .canvas-react-message-spinner {\n    animation-duration: 0.01ms;\n  }\n}\n');
+var nextKey = 0;
+var LEAVE_DURATION = 300;
+function createMessageStore(initialOptions = {}) {
+  let options = initialOptions;
+  let entries = [];
+  const listeners2 = /* @__PURE__ */ new Set();
+  const timers = /* @__PURE__ */ new Map();
+  const leaveTimers = /* @__PURE__ */ new Map();
+  const publish = () => listeners2.forEach((listener) => listener());
+  const remove = (key) => {
+    const targets = key === void 0 ? entries.filter((entry) => !entry.leaving) : entries.filter((entry) => entry.key === key && !entry.leaving);
+    if (!targets.length) return;
+    targets.forEach((entry) => {
+      const timer = timers.get(entry.key);
+      if (timer) clearTimeout(timer);
+      timers.delete(entry.key);
+      entry.leaving = true;
+      leaveTimers.set(
+        entry.key,
+        setTimeout(() => {
+          leaveTimers.delete(entry.key);
+          entries = entries.filter(
+            (item) => item.key !== entry.key || item !== entry
+          );
+          entry.close();
+          entry.onClose?.();
+          publish();
+        }, LEAVE_DURATION)
+      );
+    });
+    publish();
+  };
+  const open = (config) => {
+    const key = config.key ?? ++nextKey;
+    const previous = entries.find((entry2) => entry2.key === key);
+    const oldTimer = timers.get(key);
+    if (oldTimer) clearTimeout(oldTimer);
+    timers.delete(key);
+    const leaveTimer = leaveTimers.get(key);
+    if (leaveTimer) clearTimeout(leaveTimer);
+    leaveTimers.delete(key);
+    let resolve;
+    const promise = previous ? void 0 : new Promise((done) => {
+      resolve = done;
+    });
+    const close = previous?.close ?? resolve;
+    const entry = {
+      ...config,
+      key,
+      type: config.type ?? "info",
+      close
+    };
+    entries = previous ? entries.map((item) => item.key === key ? entry : item) : [...entries, entry];
+    if (options.maxCount && entries.filter((item) => !item.leaving).length > options.maxCount) {
+      const oldest = entries.find((item) => item.key !== key && !item.leaving);
+      if (oldest && oldest.key !== key) remove(oldest.key);
+    }
+    const duration = config.duration ?? options.duration ?? (entry.type === "loading" ? 0 : 3);
+    if (duration > 0)
+      timers.set(
+        key,
+        setTimeout(() => remove(key), duration * 1e3)
+      );
+    publish();
+    const handle = (() => remove(key));
+    handle.then = (onFulfilled, onRejected) => (promise ?? new Promise((done) => {
+      const current = entries.find((item) => item.key === key);
+      if (!current) done();
+      else {
+        const originalClose = current.close;
+        current.close = () => {
+          originalClose();
+          done();
+        };
+      }
+    })).then(onFulfilled, onRejected);
+    return handle;
+  };
+  const level = (type) => (content, duration, onClose) => open(
+    isConfig(content) ? { ...content, type } : { content, type, duration, onClose }
+  );
+  const api = {
+    open,
+    info: level("info"),
+    success: level("success"),
+    warning: level("warning"),
+    error: level("error"),
+    loading: level("loading"),
+    destroy: remove,
+    config(next) {
+      options = { ...options, ...next };
+      publish();
+    }
+  };
+  return {
+    api,
+    getEntries: () => entries,
+    getOptions: () => options,
+    subscribe(listener) {
+      listeners2.add(listener);
+      return () => {
+        listeners2.delete(listener);
+      };
+    }
+  };
+}
+function isConfig(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && "content" in value;
+}
+function MessageHolder({ store }) {
+  const [, refresh] = React.useState(0);
+  React.useEffect(() => {
+    refresh((value) => value + 1);
+    return store.subscribe(() => refresh((value) => value + 1));
+  }, [store]);
+  const options = store.getOptions();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `${REACT_COMPONENT_PREFIX}-message-host`,
+      style: { top: options.top ?? 8 },
+      role: "status",
+      "aria-live": "polite",
+      children: store.getEntries().map((entry) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: [
+            `${REACT_COMPONENT_PREFIX}-message`,
+            `${REACT_COMPONENT_PREFIX}-message-${entry.type}`,
+            entry.leaving && `${REACT_COMPONENT_PREFIX}-message-leaving`,
+            entry.className
+          ].filter(Boolean).join(" "),
+          style: entry.style,
+          onClick: entry.onClick,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `${REACT_COMPONENT_PREFIX}-message-icon`,
+                "aria-hidden": "true",
+                children: entry.icon ?? /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, { type: entry.type })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: entry.content })
+          ]
+        },
+        entry.key
+      ))
+    }
+  );
+}
+function MessageIcon({ type }) {
+  if (type === "loading")
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-message-spinner` });
+  const path = type === "success" ? "M5 12l4 4L19 6" : type === "error" ? "M6 6l12 12M18 6L6 18" : type === "warning" ? "M12 7v6m0 4h.01" : "M12 11v6m0-10h.01";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            fill: "currentColor",
+            stroke: "none",
+            opacity: ".12"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
+      ]
+    }
+  );
+}
+var staticStore;
+var staticRootMounted = false;
+var staticHost;
+function resolveMessageContainer(value) {
+  return (typeof value === "function" ? value() : value) ?? document.body;
+}
+function getStaticStore() {
+  if (!staticStore) staticStore = createMessageStore();
+  if (typeof document !== "undefined" && !staticRootMounted) {
+    const host = document.createElement("div");
+    host.id = `${REACT_COMPONENT_PREFIX}-message-root`;
+    resolveMessageContainer(staticStore.getOptions().getContainer).appendChild(
+      host
+    );
+    staticHost = host;
+    staticRootMounted = true;
+    if (typeof ReactDOM__namespace.render === "function") {
+      ReactDOM__namespace.render(/* @__PURE__ */ jsxRuntime.jsx(MessageHolder, { store: staticStore }), host);
+    } else {
+      void import('react-dom/client').then(({ createRoot }) => {
+        createRoot(host).render(/* @__PURE__ */ jsxRuntime.jsx(MessageHolder, { store: staticStore }));
+      });
+    }
+  } else if (staticHost && !staticHost.isConnected) {
+    resolveMessageContainer(staticStore.getOptions().getContainer).appendChild(
+      staticHost
+    );
+  }
+  return staticStore;
+}
+var reactMessage = {
+  open: (config) => getStaticStore().api.open(config),
+  info: (content, duration, onClose) => getStaticStore().api.info(content, duration, onClose),
+  success: (content, duration, onClose) => getStaticStore().api.success(content, duration, onClose),
+  warning: (content, duration, onClose) => getStaticStore().api.warning(content, duration, onClose),
+  error: (content, duration, onClose) => getStaticStore().api.error(content, duration, onClose),
+  loading: (content, duration, onClose) => getStaticStore().api.loading(content, duration, onClose),
+  destroy: (key) => getStaticStore().api.destroy(key),
+  config: (options) => {
+    const store = getStaticStore();
+    store.api.config(options);
+    if (staticHost && typeof document !== "undefined") {
+      const container = resolveMessageContainer(
+        store.getOptions().getContainer
+      );
+      if (staticHost.parentElement !== container)
+        container.appendChild(staticHost);
+    }
+  },
+  /** 创建能读取调用位置 React Context 的消息实例。 */
+  useMessage: (options) => useReactMessage(options)
+};
+function useReactMessage(options) {
+  const store = React.useMemo(() => createMessageStore(options), []);
+  React.useEffect(() => () => store.api.destroy(), [store]);
+  const holder = /* @__PURE__ */ jsxRuntime.jsx(MessageHolder, { store }, "message-holder");
+  return [
+    store.api,
+    options?.getContainer && typeof document !== "undefined" ? ReactDOM__namespace.createPortal(
+      holder,
+      resolveMessageContainer(options.getContainer)
+    ) : holder
+  ];
+}
+function ReactButton({
+  children,
+  className,
+  danger,
+  htmlType = "button",
+  icon,
+  size = "middle",
+  type = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...props,
+      type: htmlType,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-button`,
+        `${REACT_COMPONENT_PREFIX}-button-${type}`,
+        `${REACT_COMPONENT_PREFIX}-button-${size}`,
+        danger && `${REACT_COMPONENT_PREFIX}-button-danger`,
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-button-icon`, children: icon }) : null,
+        children
+      ]
+    }
+  );
+}
+function ReactFlex({
+  vertical,
+  justify,
+  align,
+  gap,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      style: {
+        display: "flex",
+        flexDirection: vertical ? "column" : "row",
+        justifyContent: justify,
+        alignItems: align,
+        gap,
+        ...style
+      }
+    }
+  );
+}
+function ReactRow({ gutter = 0, style, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-row`,
+        props.className
+      ),
+      style: { marginInline: -gutter / 2, ...style }
+    }
+  );
+}
+function ReactCol({ span = 24, style, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-col`,
+        props.className
+      ),
+      style: {
+        flex: `0 0 ${span / 24 * 100}%`,
+        maxWidth: `${span / 24 * 100}%`,
+        ...style
+      }
+    }
+  );
+}
+var RadioGroupContext = React.createContext({});
+function ReactRadioOption({
+  value,
+  checked,
+  disabled,
+  onChange,
+  children,
+  className,
+  ...props
+}) {
+  const group = React.useContext(RadioGroupContext);
+  const selected = checked ?? String(group.value ?? "") === String(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-radio`,
+        disabled && `${REACT_COMPONENT_PREFIX}-radio-disabled`,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            checked: selected,
+            disabled,
+            onChange: () => {
+              const event = { target: { value } };
+              onChange?.(event);
+              group.onChange?.(event);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-radio-mark` }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  );
+}
+function ReactRadioGroup({
+  value,
+  onChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-radio-group`,
+        className
+      )
+    }
+  ) });
+}
+var ReactRadio = Object.assign(ReactRadioOption, {
+  Group: ReactRadioGroup
+});
+function ReactTextArea({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-textarea`,
+        className
+      )
+    }
+  );
+}
+
 // src/components/input-number/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  text-align: left;\n  overflow: hidden;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n  position: relative;\n  display: flex;\n  flex: 0 0 28px;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  cursor: pointer;\n  transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n  border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n  border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n  color: var(--canvas-react-color-primary);\n  background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n  color: #c4c7cf;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n  position: relative;\n  display: block;\n  width: 10px;\n  height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  background: currentColor;\n  border-radius: 1px;\n  transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n  width: 10px;\n  height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n  width: 1.5px;\n  height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  height: 100%;\n}\n.canvas-react-input-number-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--canvas-react-control-padding-inline, 8px);\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n  text-align: inherit;\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n  flex: 0 0 auto;\n  padding-right: 8px;\n  color: var(--canvas-react-color-text-muted);\n  font-size: 12px;\n  line-height: 1;\n  user-select: none;\n}\n');
 var ReactInputNumber = React.forwardRef(
@@ -3553,6 +3578,7 @@ var ReactSelect = React.forwardRef(
       onFocus,
       onKeyDown,
       options,
+      renderOptionExtra,
       optionHeight = 32,
       listHeight = 224,
       placeholder,
@@ -3748,7 +3774,10 @@ var ReactSelect = React.forwardRef(
                       openSelect();
                       return;
                     }
-                    const targetOption = resolveSelectEnterOption(filteredOptions, activeIndex);
+                    const targetOption = resolveSelectEnterOption(
+                      filteredOptions,
+                      activeIndex
+                    );
                     if (targetOption && !targetOption.disabled) {
                       selectOption(targetOption, "keyboard");
                     } else if (allowCustomValue && keyword.trim()) {
@@ -3838,7 +3867,7 @@ var ReactSelect = React.forwardRef(
                 const isSelected = String(option.value) === String(value ?? "");
                 const isActive = optionIndex === activeIndex;
                 const isSearching = showSearch && searchKeyword.trim().length > 0;
-                return /* @__PURE__ */ jsxRuntime.jsx(
+                return /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     className: joinClassNames(
@@ -3861,17 +3890,20 @@ var ReactSelect = React.forwardRef(
                       }
                       selectOption(option, "mouse");
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
-                        title: option.label,
-                        children: renderSelectOptionLabel(
-                          option.label,
-                          showSearch ? searchKeyword : ""
-                        )
-                      }
-                    )
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
+                          title: option.label,
+                          children: renderSelectOptionLabel(
+                            option.label,
+                            showSearch ? searchKeyword : ""
+                          )
+                        }
+                      ),
+                      renderOptionExtra?.(option)
+                    ]
                   },
                   String(option.value)
                 );
@@ -3912,7 +3944,8 @@ function scoreSelectMatch(text, search) {
   return (index === 0 ? 2 : 1) + search.length / normalized.length;
 }
 function resolveSelectEnterOption(options, activeIndex = -1) {
-  if (options[activeIndex] && !options[activeIndex].disabled) return options[activeIndex];
+  if (options[activeIndex] && !options[activeIndex].disabled)
+    return options[activeIndex];
   return options.find((option) => !option.disabled);
 }
 function resolveSelectKeywordOnOpen(selectedLabel) {
@@ -9495,15 +9528,19 @@ function ReactScrollbarPositionDialog(props) {
 }
 
 // src/components/pagination/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n  --canvas-react-pagination-control-size: 32px;\n  --canvas-react-pagination-gap: 8px;\n  --canvas-react-pagination-padding-inline: 10px;\n  --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--canvas-react-pagination-gap);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  white-space: nowrap;\n}\n.canvas-react-pagination-small {\n  --canvas-react-pagination-control-size: 24px;\n  --canvas-react-pagination-gap: 4px;\n  --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination > .canvas-react-select-wrap {\n  flex: 0 0 auto;\n  width: auto;\n  height: auto;\n}\n.canvas-react-pagination > .canvas-react-select-wrap > .canvas-react-select {\n  flex-shrink: 0;\n}\n.canvas-react-pagination-large {\n  --canvas-react-pagination-control-size: 40px;\n  --canvas-react-pagination-gap: 10px;\n  --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--canvas-react-pagination-gap);\n  flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--canvas-react-pagination-control-size);\n  height: var(--canvas-react-pagination-control-size);\n  padding: 0 var(--canvas-react-pagination-padding-inline);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    color 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n  position: relative;\n  width: var(--canvas-react-pagination-control-size);\n  min-width: var(--canvas-react-pagination-control-size);\n  padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-bg-active);\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n  opacity: 0.48;\n  cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transition:\n    border-color 0.18s ease,\n    transform 0.18s ease,\n    opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n  transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n  transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n  opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--canvas-react-pagination-gap);\n  flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination button,\n.canvas-react-pagination input {\n  font-family: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n}\n');
+styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n  --canvas-react-pagination-control-size: 32px;\n  --canvas-react-pagination-gap: 8px;\n  --canvas-react-pagination-padding-inline: 10px;\n  --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--canvas-react-pagination-gap);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  white-space: nowrap;\n}\n.canvas-react-pagination-small {\n  --canvas-react-pagination-control-size: 24px;\n  --canvas-react-pagination-gap: 4px;\n  --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination > .canvas-react-select-wrap {\n  flex: 0 0 auto;\n  width: auto;\n  height: auto;\n}\n.canvas-react-pagination > .canvas-react-select-wrap > .canvas-react-select {\n  flex-shrink: 0;\n}\n.canvas-react-pagination-large {\n  --canvas-react-pagination-control-size: 40px;\n  --canvas-react-pagination-gap: 10px;\n  --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--canvas-react-pagination-gap);\n  flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--canvas-react-pagination-control-size);\n  height: var(--canvas-react-pagination-control-size);\n  padding: 0 var(--canvas-react-pagination-padding-inline);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    color 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n  position: relative;\n  width: var(--canvas-react-pagination-control-size);\n  min-width: var(--canvas-react-pagination-control-size);\n  padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-bg-active);\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n  opacity: 0.48;\n  cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transition:\n    border-color 0.18s ease,\n    transform 0.18s ease,\n    opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n  transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n  transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n  opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--canvas-react-pagination-gap);\n  flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination button,\n.canvas-react-pagination input {\n  font-family: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n}\n.canvas-react-pagination-remove-size {\n  flex: 0 0 auto;\n  margin-left: 6px;\n  padding: 0 4px;\n  border: 0;\n  border-radius: var(--canvas-react-radius-sm);\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  font: inherit;\n  cursor: pointer;\n}\n.canvas-react-pagination-remove-size:hover,\n.canvas-react-pagination-remove-size:focus-visible {\n  background: var(--canvas-react-color-bg-hover);\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-remove-size:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n');
+var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
 function ReactPagination(props) {
   const {
+    allowPageSizeInput = false,
+    minPageSize = 1,
+    maxPageSize = Number.MAX_SAFE_INTEGER,
     current,
     disabled,
     onChange,
     onPageSizeChange,
-    pageSize = 10,
+    pageSize = DEFAULT_PAGE_SIZE,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     showLessItems,
     showQuickJumper,
@@ -9517,12 +9554,56 @@ function ReactPagination(props) {
   } = props;
   const style = { ...rootStyle, ...styles?.root };
   const [quickValue, setQuickValue] = React.useState("");
+  const [customPageSizes, setCustomPageSizes] = React.useState([]);
+  const pageSizeDraft = React.useRef(null);
+  const sizeChangerRef = React.useRef(null);
+  const minimum = Number.isSafeInteger(minPageSize) && minPageSize > 0 ? minPageSize : 1;
+  const maximum = Number.isSafeInteger(maxPageSize) && maxPageSize > 0 ? Math.max(minimum, maxPageSize) : Number.MAX_SAFE_INTEGER;
+  const defaultPageSize = Math.min(
+    maximum,
+    Math.max(minimum, DEFAULT_PAGE_SIZE)
+  );
+  const isValidPageSize = (value) => Number.isSafeInteger(value) && value >= minimum && value <= maximum;
   const resolvedPageSizeOptions = React.useMemo(() => {
-    if (pageSizeOptions.length === 0 || pageSizeOptions.includes(pageSize) || !Number.isSafeInteger(pageSize) || pageSize <= 0) {
-      return pageSizeOptions;
+    const options = allowPageSizeInput ? [.../* @__PURE__ */ new Set([...pageSizeOptions, ...customPageSizes])].sort(
+      (a, b) => a - b
+    ) : pageSizeOptions;
+    if (options.length === 0 && !allowPageSizeInput || options.includes(pageSize) || !Number.isSafeInteger(pageSize) || pageSize <= 0) {
+      return options;
+    }
+    return [...options, pageSize].sort((left, right) => left - right);
+  }, [pageSizeOptions, pageSize, customPageSizes, allowPageSizeInput]);
+  const changePageSize = (value) => {
+    pageSizeDraft.current = null;
+    if (disabled || !isValidPageSize(value)) return;
+    if (allowPageSizeInput) {
+      setCustomPageSizes(
+        (sizes) => sizes.includes(value) ? sizes : [...sizes, value]
+      );
+    }
+    onPageSizeChange?.(1, value);
+  };
+  const removeCustomPageSize = (value) => {
+    if (disabled) return;
+    pageSizeDraft.current = null;
+    sizeChangerRef.current?.blur();
+    setCustomPageSizes((sizes) => sizes.filter((size2) => size2 !== value));
+    if (value === pageSize) {
+      onPageSizeChange?.(1, defaultPageSize);
     }
-    return [...pageSizeOptions, pageSize].sort((left, right) => left - right);
-  }, [pageSizeOptions, pageSize]);
+  };
+  const commitPageSizeInput = () => {
+    const draft = pageSizeDraft.current;
+    pageSizeDraft.current = null;
+    if (!allowPageSizeInput || draft == null || !/^\d+$/.test(draft.trim()))
+      return;
+    changePageSize(Number(draft.trim()));
+  };
+  const pageSizeSelectOptions = resolvedPageSizeOptions.map((size2) => ({
+    label: `${size2} / \u9875`,
+    value: size2,
+    ...!isValidPageSize(size2) ? { disabled: true } : {}
+  }));
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const safeCurrent = clampPage(current, totalPages);
   const range = total === 0 ? [0, 0] : [
@@ -9654,26 +9735,65 @@ function ReactPagination(props) {
             )
           }
         ),
-        showSizeChanger && resolvedPageSizeOptions.length ? /* @__PURE__ */ jsxRuntime.jsx(
+        showSizeChanger && (allowPageSizeInput || resolvedPageSizeOptions.length) ? /* @__PURE__ */ jsxRuntime.jsx(
           ReactSelect,
           {
+            ref: sizeChangerRef,
             value: String(pageSize),
             disabled,
+            "aria-label": "\u6BCF\u9875\u6761\u6570",
+            allowClear: false,
+            showSearch: allowPageSizeInput,
+            allowCustomValue: allowPageSizeInput,
+            inputMode: allowPageSizeInput ? "numeric" : void 0,
+            onInputValueChange: (value) => {
+              pageSizeDraft.current = value;
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Escape") pageSizeDraft.current = null;
+              if ((event.key === "ArrowDown" || event.key === "ArrowUp") && pageSizeDraft.current != null && filterSelectOptions(
+                pageSizeSelectOptions,
+                pageSizeDraft.current,
+                true
+              ).some((option) => !option.disabled)) {
+                pageSizeDraft.current = null;
+              }
+              if (allowPageSizeInput && event.key === "Enter" && pageSizeDraft.current != null) {
+                event.preventDefault();
+                commitPageSizeInput();
+                event.currentTarget.blur();
+              }
+            },
+            onBlur: () => commitPageSizeInput(),
             style: {
               width: resolvePaginationSelectWidth(size, resolvedPageSizeOptions),
               ...styles?.sizeChanger
             },
-            options: resolvedPageSizeOptions.map((size2) => ({
-              label: `${size2} / \u9875`,
-              value: size2
-            })),
-            onChange: (value) => {
-              const nextPageSize = Number(value);
-              if (!Number.isFinite(nextPageSize)) {
-                return;
-              }
-              onPageSizeChange?.(1, nextPageSize);
-            }
+            options: pageSizeSelectOptions,
+            renderOptionExtra: (option) => {
+              const value = Number(option.value);
+              if (!allowPageSizeInput || pageSizeOptions.includes(value) || value === defaultPageSize)
+                return null;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${REACT_COMPONENT_PREFIX}-pagination-remove-size`,
+                  "aria-label": `\u5220\u9664\u6BCF\u9875 ${value} \u6761`,
+                  disabled,
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                  },
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    removeCustomPageSize(value);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" })
+                }
+              );
+            },
+            onChange: (value) => changePageSize(Number(value))
           }
         ) : null,
         showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10288,7 +10408,7 @@ function ReactPositionedTooltip(props) {
     left: request.x,
     top: request.y,
     boxSizing: "border-box",
-    maxWidth: request.variant === "resize" ? "calc(100vw - 16px)" : `min(${320 * zoom}px, calc(100vw - 16px))`,
+    maxWidth: request.variant === "resize" || request.singleLine ? "calc(100vw - 16px)" : `min(${320 * zoom}px, calc(100vw - 16px))`,
     maxHeight: "calc(100vh - 16px)",
     padding: `${paddingBlock}px ${paddingInline}px`,
     borderRadius: 6 * zoom,
@@ -10300,7 +10420,7 @@ function ReactPositionedTooltip(props) {
     border: request.variant === "error" ? "1px solid rgba(255, 77, 79, 0.2)" : "none",
     pointerEvents: "none",
     zIndex: 1200,
-    whiteSpace: request.variant === "resize" ? "nowrap" : "pre-wrap",
+    whiteSpace: request.variant === "resize" || request.singleLine ? "nowrap" : "pre-wrap",
     wordBreak: "break-word"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: tooltipRef, role: "tooltip", style, children: [
@@ -10311,7 +10431,7 @@ function ReactPositionedTooltip(props) {
           display: "block",
           maxHeight: `calc(100vh - ${16 + 2 * paddingBlock + 2}px)`,
           overflow: "hidden",
-          textOverflow: request.variant === "resize" ? "ellipsis" : void 0
+          textOverflow: request.variant === "resize" || request.singleLine ? "ellipsis" : void 0
         },
         children: request.content
       }
@@ -11564,8 +11684,15 @@ function ReactCascader(props) {
   const [focus, setFocus] = React.useState({ column: 0, index: -1 });
   const interactive = !disabled && !readOnly;
   React.useEffect(() => {
-    setPath(selected);
-  }, [selected]);
+    if (multiple)
+      setPath(
+        (current) => resolvePath(
+          options,
+          current.map((item) => item.value)
+        )
+      );
+    else setPath(selected);
+  }, [selected, multiple, options]);
   const displayPath = (valuePath) => {
     const nodes = resolvePath(options, valuePath);
     const labels = valuePath.map(
@@ -14529,6 +14656,7 @@ exports.ReactEditOutlined = ReactEditOutlined;
 exports.ReactEditTwoTone = ReactEditTwoTone;
 exports.ReactElevenLabsFilled = ReactElevenLabsFilled;
 exports.ReactEllipsisOutlined = ReactEllipsisOutlined;
+exports.ReactEmpty = ReactEmpty;
 exports.ReactEnterOutlined = ReactEnterOutlined;
 exports.ReactEnvironmentFilled = ReactEnvironmentFilled;
 exports.ReactEnvironmentOutlined = ReactEnvironmentOutlined;