antd-solid 0.0.10 → 0.0.12

package/dist/index.esm.js

@@ -1,28 +1,69 @@
-import { delegateEvents, use, insert, createComponent, effect, className, style, template, mergeProps as mergeProps$1, Dynamic, render, memo, Portal, setAttribute, spread } from 'solid-js/web';
-import { mergeProps, createSignal, createMemo, Show, createEffect, on, splitProps, untrack, For, onMount, onCleanup, children, createSelector, createContext, useContext, Index, Switch as Switch$1, Match } from 'solid-js';
+import { insert, template, delegateEvents, use, createComponent, effect, className, style, mergeProps as mergeProps$1, Dynamic, render, memo, Portal, setAttribute, spread } from 'solid-js/web';
+import { mergeProps, createSignal, createMemo, untrack, Show, createEffect, on, splitProps, For, onMount, onCleanup, children, createSelector, createContext, useContext, Index, Switch as Switch$1, Match } from 'solid-js';
 import cs from 'classnames';
 import { omit, isNil, clamp, compact, isEmpty, max, get, set, mapValues } from 'lodash-es';
 import React, { useRef, useEffect } from 'react';
-import { ConfigProvider, DatePicker as DatePicker$1, ColorPicker as ColorPicker$1, Progress as Progress$1, Upload as Upload$1, Skeleton as Skeleton$1, Image as Image$2 } from 'antd';
+import { Transition } from 'solid-transition-group';
+import { ConfigProvider, DatePicker as DatePicker$1, ColorPicker as ColorPicker$1, Skeleton as Skeleton$1, Image as Image$2 } from 'antd';
 export { message } from 'antd';
 import { createRoot } from 'react-dom/client';
 import { nanoid } from 'nanoid';
-import { Transition } from 'solid-transition-group';
 
-const _tmpl$$q = /*#__PURE__*/template(`<span class="i-ant-design:loading ant-[vertical-align:-0.125em] keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-mr-8px">`),
-  _tmpl$2$d = /*#__PURE__*/template(`<button><span>`);
+const _tmpl$$t = /*#__PURE__*/template(`<div class="ant-compact ant-flex child[:first-child]>:ant-rounded-l-6px child[:last-child]>:ant-rounded-r-6px">`);
+function Compact(props) {
+  return (() => {
+    const _el$ = _tmpl$$t();
+    insert(_el$, () => props.children);
+    return _el$;
+  })();
+}
+Compact.compactItemClass = 'p[.ant-compact]:ant-ml--1px p[.ant-compact]:first:ant-ml-0';
+Compact.compactItemRounded0Class = 'p[.ant-compact]:ant-rounded-0';
+Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-l-6px';
+Compact.compactItemRoundedRightClass = 'p[.ant-compact>:last-child]:ant-rounded-r-6px';
+Compact.compactItemZIndexClass = 'p[.ant-compact]:hover:ant-z-10 p[.ant-compact]:focus:ant-z-10 p[.ant-compact]:focus-within:ant-z-10';
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".ant-compact .ant-btn-primary:not(:first-child) {\n  border-left: 1px solid white;\n}\n.ant-compact .ant-btn-primary:not(:last-child) {\n  border-right: 1px solid white;\n}";
+styleInject(css_248z$1);
+
+const _tmpl$$s = /*#__PURE__*/template(`<span class="i-ant-design:loading ant-[vertical-align:-0.125em] keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-mr-8px">`),
+  _tmpl$2$f = /*#__PURE__*/template(`<button><span>`);
 const sizeClassMap = {
   large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
   middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
-  small: 'ant-px-7px ant-h-24px ant-rounded-4px',
-  plain: 'ant-p-0'
+  small: 'ant-px-7px ant-h-24px ant-rounded-4px'
 };
 const typeClassMap = {
-  default: danger => cs('ant-bg-white', danger ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]'),
-  primary: danger => cs('ant-border-none ant-text-white', danger ? 'ant-bg-[var(--ant-color-error)] hover:ant-bg-[var(--light-error-color)] active:ant-bg-[var(--dark-error-color)]' : 'ant-bg-[var(--primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-bg-[var(--dark-primary-color)]'),
-  dashed: danger => cs(' ant-bg-white', danger ? 'ant-[border:1px_dashed_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]'),
+  default: danger => cs('ant-bg-white', danger ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]'),
+  primary: danger => cs('ant-text-white', danger ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-bg-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-bg-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-bg-[var(--dark-error-color)]' : 'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-[var(--ant-color-primary)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-bg-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-bg-[var(--ant-color-primary-active)]'),
+  dashed: danger => cs(' ant-bg-white', danger ? 'ant-[border:1px_dashed_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]'),
   text: danger => cs('ant-border-none ant-bg-transparent', danger ? 'ant-text-[var(--ant-color-error)] hover:ant-bg-[var(--error-bg-color)] active:ant-bg-[var(--error-bg-color)]' : 'ant-text-[var(--dark-color)] hover:ant-bg-[rgba(0,0,0,0.06)] active:ant-bg-[rgba(0,0,0,.15)]'),
-  link: danger => cs('ant-border-none ant-bg-transparent', danger ? 'ant-text-[var(--ant-color-error)] hover:ant-text-[var(--light-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]')
+  link: danger => cs('ant-border-none ant-bg-transparent', danger ? 'ant-text-[var(--ant-color-error)] hover:ant-text-[var(--light-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-text-[var(--ant-color-primary)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-text-[var(--ant-color-primary-active)]')
 };
 const Button = props => {
   const mergedProps = mergeProps({
@@ -32,7 +73,7 @@ const Button = props => {
   const [innerLoading, setLoading] = createSignal(false);
   const loading = createMemo(() => props.loading ?? innerLoading());
   return (() => {
-    const _el$ = _tmpl$2$d(),
+    const _el$ = _tmpl$2$f(),
       _el$3 = _el$.firstChild;
     _el$.$$click = e => {
       const res = mergedProps.onClick?.(e);
@@ -42,7 +83,7 @@ const Button = props => {
       }
       if (mergedProps.type === 'default' || mergedProps.type === 'primary' || mergedProps.type === 'dashed') {
         const div = document.createElement('div');
-        div.className = cs(props.danger ? 'ant-[--color:var(--light-error-color)]' : 'ant-[--color:var(--light-primary-color)]', 'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]');
+        div.className = cs(props.danger ? 'ant-[--color:var(--light-error-color)]' : 'ant-[--color:var(--ant-color-primary-hover)]', 'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]');
         const onAnimationEnd = () => {
           div.remove();
           div.removeEventListener('animationend', onAnimationEnd);
@@ -53,17 +94,18 @@ const Button = props => {
     };
     const _ref$ = mergedProps.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : mergedProps.ref = _el$;
+    _el$.addEventListener("click", untrack(() => props['on:click']));
     insert(_el$, createComponent(Show, {
       get when() {
         return loading();
       },
       get children() {
-        return _tmpl$$q();
+        return _tmpl$$s();
       }
     }), _el$3);
     insert(_el$3, () => mergedProps.children);
     effect(_p$ => {
-      const _v$ = cs('ant-relative ant-cursor-pointer', mergedProps.class, sizeClassMap[mergedProps.size], typeClassMap[mergedProps.type](props.danger ?? false), loading() && 'ant-opacity-65', 'ant-[--color:--light-primary-color]'),
+      const _v$ = cs(`ant-btn ant-btn-${mergedProps.type}`, 'ant-relative ant-cursor-pointer', 'focus-visible:ant-[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:ant-[outline-offset:1px]', mergedProps.class, sizeClassMap[mergedProps.size], typeClassMap[mergedProps.type](props.danger ?? false), loading() && 'ant-opacity-65', 'ant-[--color:--ant-color-primary-hover]', Compact.compactItemRounded0Class, Compact.compactItemZIndexClass, Compact.compactItemClass),
         _v$2 = mergedProps.style;
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _p$._v$2 = style(_el$, _v$2, _p$._v$2);
@@ -123,26 +165,12 @@ function createControllableValue(props, options = {}) {
   return [value, setValue];
 }
 
-const _tmpl$$p = /*#__PURE__*/template(`<div class="ant-compact ant-flex">`);
-function Compact(props) {
-  return (() => {
-    const _el$ = _tmpl$$p();
-    insert(_el$, () => props.children);
-    return _el$;
-  })();
-}
-Compact.compactItemClass = 'p[.ant-compact]:ant-ml--1px';
-Compact.compactItemRounded0Class = 'p[.ant-compact>*]:ant-rounded-0';
-Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-l-6px';
-Compact.compactItemRoundedRightClass = 'p[.ant-compact>:last-child]:ant-rounded-r-6px';
-Compact.compactItemZIndexClass = 'p[.ant-compact>*]:focus:ant-z-10 p[.ant-compact>*]:focus-within:ant-z-10';
-
-const _tmpl$$o = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$c = /*#__PURE__*/template(`<div class="ant-mr-4px">`),
-  _tmpl$3$9 = /*#__PURE__*/template(`<div class="ant-ml-4px">`),
-  _tmpl$4$5 = /*#__PURE__*/template(`<div class="ant-[display:var(--input-after-display)] ant-absolute ant-top-0 ant-bottom-0 ant-right-0 ant-h-[calc(100%-2px)] ant-translate-y-1px -ant-translate-x-1px">`);
+const _tmpl$$r = /*#__PURE__*/template(`<div>`),
+  _tmpl$2$e = /*#__PURE__*/template(`<div class="ant-mr-4px">`),
+  _tmpl$3$a = /*#__PURE__*/template(`<div class="ant-ml-4px">`),
+  _tmpl$4$6 = /*#__PURE__*/template(`<div class="ant-[display:var(--input-after-display)] ant-absolute ant-top-0 ant-bottom-0 ant-right-0 ant-h-[calc(100%-2px)] ant-translate-y-1px -ant-translate-x-1px">`);
 const statusClassDict = {
-  default: disabled => cs('ant-[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:ant-border-[var(--primary-color)] focus-within:ant-border-[var(--primary-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]'),
+  default: disabled => cs('ant-[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:ant-border-[var(--ant-color-primary)] focus-within:ant-border-[var(--ant-color-primary)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]'),
   error: disabled => cs('ant-[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:ant-border-[var(--light-error-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
   warning: disabled => cs('ant-[border:1px_solid_var(--warning-color)]', !disabled && 'hover:ant-border-[var(--color-warning-border-hover)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
 };
@@ -186,13 +214,13 @@ function CommonInput(props) {
     }
   }));
   return (() => {
-    const _el$ = _tmpl$$o();
+    const _el$ = _tmpl$$r();
     insert(_el$, createComponent(Show, {
       get when() {
         return props.addonBefore;
       },
       get children() {
-        const _el$2 = _tmpl$$o();
+        const _el$2 = _tmpl$$r();
         insert(_el$2, () => props.addonBefore);
         effect(() => className(_el$2, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-r-0 ant-rounded-l-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedLeftClass)));
         return _el$2;
@@ -204,13 +232,13 @@ function CommonInput(props) {
       },
       fallback: inputJSX,
       get children() {
-        const _el$3 = _tmpl$$o();
+        const _el$3 = _tmpl$$r();
         insert(_el$3, createComponent(Show, {
           get when() {
             return props.prefix;
           },
           get children() {
-            const _el$4 = _tmpl$2$c();
+            const _el$4 = _tmpl$2$e();
             insert(_el$4, () => props.prefix);
             return _el$4;
           }
@@ -221,7 +249,7 @@ function CommonInput(props) {
             return props.suffix;
           },
           get children() {
-            const _el$5 = _tmpl$3$9();
+            const _el$5 = _tmpl$3$a();
             insert(_el$5, () => props.suffix);
             return _el$5;
           }
@@ -231,12 +259,12 @@ function CommonInput(props) {
             return props.actions;
           },
           get children() {
-            const _el$6 = _tmpl$4$5();
+            const _el$6 = _tmpl$4$6();
             insert(_el$6, () => props.actions);
             return _el$6;
           }
         }), null);
-        effect(() => className(_el$3, cs('ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--primary-color)]', inputWrapClass())));
+        effect(() => className(_el$3, cs('ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--ant-color-primary)]', inputWrapClass())));
         return _el$3;
       }
     }), null);
@@ -245,7 +273,7 @@ function CommonInput(props) {
         return props.addonAfter;
       },
       get children() {
-        const _el$7 = _tmpl$$o();
+        const _el$7 = _tmpl$$r();
         insert(_el$7, () => props.addonAfter);
         effect(() => className(_el$7, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-l-0 ant-rounded-r-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedRightClass)));
         return _el$7;
@@ -318,8 +346,15 @@ function dispatchEventHandlerUnion(handler, e) {
 function unwrapStringOrJSXElement(value) {
   return typeof value === 'function' ? value() : value;
 }
+function setRef(props, value) {
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      props.ref?.(value);
+    }
+  });
+}
 
-const _tmpl$$n = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]"><div class="ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:up-outlined"></div></div><div class="ant-[border-top:1px_solid_var(--ant-color-border)] ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:down-outlined">`);
+const _tmpl$$q = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]"><div class="ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--ant-color-primary)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:up-outlined"></div></div><div class="ant-[border-top:1px_solid_var(--ant-color-border)] ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--ant-color-primary)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:down-outlined">`);
 const isEmptyValue = value => isNil(value) || value === '';
 const InputNumber = _props => {
   const props = mergeProps({
@@ -362,7 +397,7 @@ const InputNumber = _props => {
   return createComponent(CommonInput, mergeProps$1(inputProps, {
     get actions() {
       return (() => {
-        const _el$ = _tmpl$$n(),
+        const _el$ = _tmpl$$q(),
           _el$2 = _el$.firstChild,
           _el$3 = _el$2.nextSibling;
         _el$2.$$click = up;
@@ -404,23 +439,23 @@ const InputNumber = _props => {
 };
 delegateEvents(["click"]);
 
-const _tmpl$$m = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-gap-[16px]">`),
-  _tmpl$2$b = /*#__PURE__*/template(`<div class="ant-flex ant-relative"><div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--primary-color)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]"></div><div class="ant-ml-[8px]">`),
-  _tmpl$3$8 = /*#__PURE__*/template(`<div class="ant-absolute ant-top-[8px] ant-bottom-[-24px] ant-left-[4px] ant-w-[2px] ant-bg-[rgba(5,5,5,.06)]">`);
+const _tmpl$$p = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-gap-[16px]">`),
+  _tmpl$2$d = /*#__PURE__*/template(`<div class="ant-flex ant-relative"><div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--ant-color-primary)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]"></div><div class="ant-ml-[8px]">`),
+  _tmpl$3$9 = /*#__PURE__*/template(`<div class="ant-absolute ant-top-[8px] ant-bottom-[-24px] ant-left-[4px] ant-w-[2px] ant-bg-[rgba(5,5,5,.06)]">`);
 const Timeline = props => {
   return (() => {
-    const _el$ = _tmpl$$m();
+    const _el$ = _tmpl$$p();
     insert(_el$, createComponent(For, {
       get each() {
         return props.items;
       },
       children: (item, i) => (() => {
-        const _el$2 = _tmpl$2$b(),
+        const _el$2 = _tmpl$2$d(),
           _el$3 = _el$2.firstChild,
           _el$4 = _el$3.nextSibling;
         insert(_el$2, (() => {
           const _c$ = memo(() => i() !== props.items.length - 1);
-          return () => _c$() && _tmpl$3$8();
+          return () => _c$() && _tmpl$3$9();
         })(), _el$3);
         insert(_el$4, () => item.children?.());
         return _el$2;
@@ -430,10 +465,10 @@ const Timeline = props => {
   })();
 };
 
-const _tmpl$$l = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
-  _tmpl$2$a = /*#__PURE__*/template(`<div class="ant-flex ant-gap-8px ant-justify-end">`),
-  _tmpl$3$7 = /*#__PURE__*/template(`<div class="ant-mt-12px">`),
-  _tmpl$4$4 = /*#__PURE__*/template(`<div><div class="ant-text-[rgba(0,0,0,.88)] ant-text-16px ant-font-600 ant-mb-8px"></div><div class="ant-grow">`),
+const _tmpl$$o = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
+  _tmpl$2$c = /*#__PURE__*/template(`<div class="ant-flex ant-gap-8px ant-justify-end">`),
+  _tmpl$3$8 = /*#__PURE__*/template(`<div class="ant-mt-12px">`),
+  _tmpl$4$5 = /*#__PURE__*/template(`<div><div class="ant-text-[rgba(0,0,0,.88)] ant-text-16px ant-font-600 ant-mb-8px"></div><div class="ant-grow">`),
   _tmpl$5$1 = /*#__PURE__*/template(`<div>`),
   _tmpl$6$1 = /*#__PURE__*/template(`<span class="i-ant-design:exclamation-circle ant-text-22px ant-mr-12px ant-text-[var(--warning-color)]">`),
   _tmpl$7 = /*#__PURE__*/template(`<div class="ant-ml-34px">`);
@@ -443,10 +478,23 @@ function Modal(_props) {
   }, _props);
   const [open, setOpen] = createSignal(props.defaultOpen ?? false);
   const [hide, setHide] = createSignal(false);
+  let cleanup;
   const instance = {
     open() {
       setOpen(true);
       setHide(false);
+      const originOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      const onKeyup = e => {
+        if (e.key === 'Escape') {
+          instance.close();
+        }
+      };
+      document.addEventListener('keyup', onKeyup);
+      cleanup = () => {
+        document.body.style.overflow = originOverflow;
+        document.removeEventListener('keyup', onKeyup);
+      };
     },
     close() {
       untrack(() => {
@@ -455,6 +503,8 @@ function Modal(_props) {
         } else {
           setHide(true);
         }
+        cleanup();
+        props.afterClose?.();
       });
     }
   };
@@ -463,10 +513,6 @@ function Modal(_props) {
       props.ref?.(instance);
     }
   });
-  const close = () => {
-    instance.close();
-    props.afterClose?.();
-  };
   const [confirmLoading, setConfirmLoading] = createSignal(false);
   return createComponent(Show, {
     get when() {
@@ -478,7 +524,7 @@ function Modal(_props) {
           const _el$ = _tmpl$5$1();
           _el$.$$click = () => {
             if (props.maskClosable ?? true) {
-              close();
+              instance.close();
             }
           };
           insert(_el$, createComponent(Show, {
@@ -489,7 +535,7 @@ function Modal(_props) {
               return props.modalRender();
             },
             get children() {
-              const _el$2 = _tmpl$4$4(),
+              const _el$2 = _tmpl$4$5(),
                 _el$4 = _el$2.firstChild,
                 _el$5 = _el$4.nextSibling;
               _el$2.$$click = e => {
@@ -505,9 +551,11 @@ function Modal(_props) {
                     get ["class"]() {
                       return cs('ant-rm-size-btn !ant-w-22px !ant-h-22px !ant-flex !ant-justify-center !ant-items-center ant-text-center ant-text-18px !ant-absolute !ant-top-16px !ant-right-16px ant-z-1000 ant-text-[rgba(0,0,0,.45)] hover:!ant-text-[rgba(0,0,0,.88)]');
                     },
-                    onClick: close,
+                    onClick: () => {
+                      instance.close();
+                    },
                     get children() {
-                      return _tmpl$$l();
+                      return _tmpl$$o();
                     }
                   });
                 }
@@ -519,7 +567,7 @@ function Modal(_props) {
                   return props.footer !== false;
                 },
                 get children() {
-                  const _el$6 = _tmpl$3$7();
+                  const _el$6 = _tmpl$3$8();
                   insert(_el$6, createComponent(Show, {
                     get when() {
                       return typeof props.footer !== 'function';
@@ -528,9 +576,11 @@ function Modal(_props) {
                       return memo(() => typeof props.footer === 'function')() && props.footer(instance);
                     },
                     get children() {
-                      const _el$7 = _tmpl$2$a();
+                      const _el$7 = _tmpl$2$c();
                       insert(_el$7, createComponent(Button, {
-                        onClick: close,
+                        onClick: () => {
+                          instance.close();
+                        },
                         children: "\u53D6\u6D88"
                       }), null);
                       insert(_el$7, createComponent(Button, {
@@ -619,10 +669,201 @@ Modal.warning = props => {
 };
 delegateEvents(["click"]);
 
-const _tmpl$$k = /*#__PURE__*/template(`<div role="ReactToSolid">`);
+var css_248z = ".ant-drawer-content-right {\n  top: 0;\n  bottom: 0;\n  right: 0;\n}\n\n.ant-drawer-content-left {\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.ant-drawer-content-top {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-content-bottom {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-fade-enter-active,\n.ant-drawer-fade-exit-active {\n  transition: opacity 0.3s;\n}\n.ant-drawer-fade-enter-active .ant-drawer-content,\n.ant-drawer-fade-exit-active .ant-drawer-content {\n  transition: transform 0.3s;\n}\n\n.ant-drawer-fade-enter,\n.ant-drawer-fade-exit-to {\n  opacity: 0;\n}\n.ant-drawer-fade-enter .ant-drawer-content-right,\n.ant-drawer-fade-exit-to .ant-drawer-content-right {\n  transform: translateX(100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-left,\n.ant-drawer-fade-exit-to .ant-drawer-content-left {\n  transform: translateX(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-top,\n.ant-drawer-fade-exit-to .ant-drawer-content-top {\n  transform: translateY(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-bottom,\n.ant-drawer-fade-exit-to .ant-drawer-content-bottom {\n  transform: translateY(100%);\n}";
+styleInject(css_248z);
+
+/**
+ * dom 节点显示或隐藏时的动画
+ * @param target
+ * @param when
+ * @param className 动画类名
+ */
+function createTransition(target, when, className) {
+  createEffect(on(when, input => {
+    const targetValue = target();
+    if (!targetValue) return;
+    if (input) {
+      targetValue.style.display = '';
+      targetValue.classList.add(`${className}-enter-active`, `${className}-enter`, `${className}-enter-to`);
+      requestAnimationFrame(() => {
+        targetValue.classList.remove(`${className}-enter`);
+      });
+      const onTransitionEnd = () => {
+        targetValue.classList.remove(`${className}-enter-active`, `${className}-enter-to`);
+        targetValue.removeEventListener('transitionend', onTransitionEnd);
+      };
+      targetValue.addEventListener('transitionend', onTransitionEnd);
+    } else {
+      targetValue.classList.add(`${className}-exit-active`, `${className}-exit`, `${className}-exit-to`);
+      requestAnimationFrame(() => {
+        targetValue.classList.remove(`${className}-exit`);
+      });
+      const onTransitionEnd = () => {
+        targetValue.style.display = 'none';
+        targetValue.classList.remove(`${className}-exit-active`, `${className}-exit-to`);
+        targetValue.removeEventListener('transitionend', onTransitionEnd);
+      };
+      targetValue.addEventListener('transitionend', onTransitionEnd);
+    }
+  }));
+}
+
+const _tmpl$$n = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
+  _tmpl$2$b = /*#__PURE__*/template(`<div><div><div class="ant-px-[var(--ant-padding-lg)] ant-py-[var(--ant-padding)] ant-flex ant-justify-between ant-items-center ant-[border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)]"><div class="ant-flex ant-items-center"><span class="ant-text-[var(--ant-color-text)] ant-text-size-[var(--ant-font-size-lg)] ant-[font-weight:var(--ant-font-weight-strong)] ant-leading-[var(--ant-line-height-lg)]"></span></div><div></div></div><div class="ant-p-[var(--ant-padding-lg)] ant-overflow-auto">`);
+const Drawer = _props => {
+  const props = mergeProps({
+    width: '378px',
+    height: '378px',
+    maskClosable: true,
+    placement: 'right',
+    getContainer: document.body
+  }, _props);
+  /**
+   * 控制是否打开/销毁
+   */
+  const [open, setOpen] = createSignal(false);
+  /**
+   * 控制显隐
+   */
+  const [hide, setHide] = createSignal(false);
+  let cleanup;
+  const container = createMemo(() => {
+    if (typeof props.getContainer === 'function') {
+      return props.getContainer();
+    }
+    if (props.getContainer instanceof HTMLElement) {
+      return props.getContainer;
+    }
+    return undefined;
+  });
+  const isBody = createMemo(() => container() === document.body);
+  const instance = {
+    open() {
+      setOpen(true);
+      setHide(false);
+      untrack(() => {
+        if (!isBody()) return;
+        const originOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        const onKeyup = e => {
+          if (e.key === 'Escape') {
+            instance.close();
+          }
+        };
+        document.addEventListener('keyup', onKeyup);
+        cleanup = () => {
+          document.body.style.overflow = originOverflow;
+          document.removeEventListener('keyup', onKeyup);
+        };
+      });
+    },
+    close() {
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false);
+        } else {
+          setHide(true);
+        }
+        cleanup?.();
+      });
+    }
+  };
+  setRef(props, instance);
+  let drawer;
+  createTransition(() => drawer, () => !hide(), 'ant-drawer-fade');
+  const direction = createMemo(() => ['top', 'bottom'].includes(props.placement) ? 'vertical' : 'horizontal');
+  const children = createComponent(Transition, {
+    name: "ant-drawer-fade",
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return open();
+        },
+        get children() {
+          const _el$ = _tmpl$2$b(),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.firstChild,
+            _el$4 = _el$3.firstChild,
+            _el$6 = _el$4.firstChild,
+            _el$7 = _el$4.nextSibling,
+            _el$8 = _el$3.nextSibling;
+          _el$.$$click = () => {
+            if (props.maskClosable) {
+              instance.close();
+            }
+          };
+          const _ref$ = drawer;
+          typeof _ref$ === "function" ? use(_ref$, _el$) : drawer = _el$;
+          _el$2.$$click = e => {
+            e.stopPropagation();
+          };
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return props.closeIcon !== false;
+            },
+            get children() {
+              return createComponent(Button, {
+                type: "text",
+                "class": "ant-mr-[var(--ant-margin-sm)] ant-text-size-[var(--ant-font-size-lg)] ant-h-[var(--ant-font-size-lg)] ant-leading-[var(--ant-font-size-lg)] hover:!ant-bg-transparent !ant-text-[var(--ant-color-icon)] hover:!ant-text-[var(--ant-color-icon-hover)] !ant-p-0",
+                onClick: () => {
+                  instance?.close();
+                },
+                get children() {
+                  return _tmpl$$n();
+                }
+              });
+            }
+          }), _el$6);
+          insert(_el$6, () => props.title);
+          insert(_el$7, () => props.extra);
+          insert(_el$8, () => props.children);
+          effect(_p$ => {
+            const _v$ = cs('ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-z-1000', isBody() ? 'ant-fixed' : 'ant-absolute'),
+              _v$2 = cs('ant-drawer-content', {
+                left: 'ant-drawer-content-left',
+                right: 'ant-drawer-content-right',
+                top: 'ant-drawer-content-top',
+                bottom: 'ant-drawer-content-bottom'
+              }[props.placement], 'ant-absolute ant-bg-white ant-grid ant-[grid-template-rows:auto_1fr]'),
+              _v$3 = direction() === 'horizontal' ? props.width : undefined,
+              _v$4 = direction() === 'vertical' ? props.height : undefined;
+            _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);
+            _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("width", _v$3) : _el$2.style.removeProperty("width"));
+            _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("height", _v$4) : _el$2.style.removeProperty("height"));
+            return _p$;
+          }, {
+            _v$: undefined,
+            _v$2: undefined,
+            _v$3: undefined,
+            _v$4: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return props.getContainer !== false;
+    },
+    fallback: children,
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return container();
+        },
+        children: children
+      });
+    }
+  });
+};
+delegateEvents(["click"]);
+
+const _tmpl$$m = /*#__PURE__*/template(`<div role="ReactToSolid">`);
 function ReactToSolid(props) {
   let root;
-  const rootEle = createMemo(() => props.container ?? _tmpl$$k());
+  const rootEle = createMemo(() => props.container ?? _tmpl$$m());
   onMount(() => {
     root = createRoot(rootEle());
     onCleanup(() => {
@@ -894,22 +1135,6 @@ function replaceClassName(C) {
     return createComponent(C, mergeProps$1(props));
   };
 }
-/**
- * 将组件 props 中的 children 替换为 JSXElement
- * @param C
- * @returns
- */
-function replaceChildren(C) {
-  return function (_props) {
-    const props = createMemo(() => {
-      return {
-        ..._props,
-        children: solidToReact(_props.children)
-      };
-    });
-    return createComponent(C, mergeProps$1(props));
-  };
-}
 function reactToSolidComponent(component, container) {
   return function (props) {
     return createComponent(ReactToSolid, {
@@ -963,7 +1188,7 @@ function useClickAway(onClickAway, target) {
   });
 }
 
-const _tmpl$$j = /*#__PURE__*/template(`<div>`);
+const _tmpl$$l = /*#__PURE__*/template(`<div>`);
 const Content = props => {
   return createComponent(Show, {
     get when() {
@@ -1201,7 +1426,7 @@ const Tooltip = _props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          const _el$ = _tmpl$$j();
+          const _el$ = _tmpl$$l();
           _el$.$$click = e => {
             e.stopPropagation();
           };
@@ -1218,7 +1443,7 @@ const Tooltip = _props => {
               return props.arrow;
             },
             get children() {
-              const _el$2 = _tmpl$$j();
+              const _el$2 = _tmpl$$l();
               effect(_p$ => {
                 const _v$ = cs('ant-w-8px ant-h-8px ant-absolute ant-border-solid ant-border-4px ant-border-transparent'),
                   _v$2 = {
@@ -1256,10 +1481,10 @@ const Tooltip = _props => {
 };
 delegateEvents(["click"]);
 
-const _tmpl$$i = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$9 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-cursor-pointer ant-text-[var(--ant-clear-color)] hover:ant-text-[var(--ant-clear-color-hover)]">`),
-  _tmpl$3$6 = /*#__PURE__*/template(`<div tabindex="0"><div class="ant-relative ant-h-full"><div class="ant-absolute ant-top-0 ant-bottom-0 ant-right-0">`),
-  _tmpl$4$3 = /*#__PURE__*/template(`<div class="ant-bg-white ant-w-200px">`),
+const _tmpl$$k = /*#__PURE__*/template(`<div>`),
+  _tmpl$2$a = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-cursor-pointer ant-text-[var(--ant-clear-color)] hover:ant-text-[var(--ant-clear-color-hover)]">`),
+  _tmpl$3$7 = /*#__PURE__*/template(`<div tabindex="0"><div class="ant-relative ant-h-full"><div class="ant-absolute ant-top-0 ant-bottom-0 ant-right-0">`),
+  _tmpl$4$4 = /*#__PURE__*/template(`<div class="ant-bg-white ant-w-200px">`),
   _tmpl$5 = /*#__PURE__*/template(`<input class="ant-h-full ant-w-full ant-float-left ant-[outline:none]" readonly>`),
   _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined ant-text-[var(--ant-allow-color)]">`);
 const Select = props => {
@@ -1285,19 +1510,19 @@ const Select = props => {
       padding: 0
     },
     content: close => (() => {
-      const _el$6 = _tmpl$4$3();
+      const _el$6 = _tmpl$4$4();
       insert(_el$6, createComponent(For, {
         get each() {
           return props.options;
         },
         children: item => (() => {
-          const _el$7 = _tmpl$$i();
+          const _el$7 = _tmpl$$k();
           _el$7.$$click = () => {
             setValue(item.value);
             close();
           };
           insert(_el$7, () => item.label);
-          effect(() => className(_el$7, cs('ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]', selectedValue(item.value) ? '!ant-bg-[var(--active-bg-color)]' : '')));
+          effect(() => className(_el$7, cs('ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]', selectedValue(item.value) ? '!ant-bg-[var(--ant-select-option-selected-bg)]' : '')));
           return _el$7;
         })()
       }));
@@ -1305,7 +1530,7 @@ const Select = props => {
       return _el$6;
     })(),
     get children() {
-      const _el$ = _tmpl$3$6(),
+      const _el$ = _tmpl$3$7(),
         _el$2 = _el$.firstChild,
         _el$4 = _el$2.firstChild;
       _el$.addEventListener("mouseleave", () => setHover(false));
@@ -1332,7 +1557,7 @@ const Select = props => {
           })();
         },
         get children() {
-          const _el$3 = _tmpl$$i();
+          const _el$3 = _tmpl$$k();
           insert(_el$3, () => selectedOption().label ?? value());
           return _el$3;
         }
@@ -1345,7 +1570,7 @@ const Select = props => {
           return _tmpl$6();
         },
         get children() {
-          const _el$5 = _tmpl$2$9();
+          const _el$5 = _tmpl$2$a();
           _el$5.$$click = e => {
             e.stopPropagation();
             setValue(undefined);
@@ -1353,17 +1578,17 @@ const Select = props => {
           return _el$5;
         }
       }));
-      effect(() => className(_el$, cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--primary-color)]', props.class)));
+      effect(() => className(_el$, cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--ant-color-primary)]', props.class)));
       return _el$;
     }
   });
 };
 delegateEvents(["click"]);
 
-const _tmpl$$h = /*#__PURE__*/template(`<span class="i-ant-design:minus-square-outlined">`),
-  _tmpl$2$8 = /*#__PURE__*/template(`<div><div class="flex-shrink-0" role="indent"></div><div class="ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center"><span class="i-ant-design:holder-outlined"></span></div><div></div><div>`),
-  _tmpl$3$5 = /*#__PURE__*/template(`<span class="ant-inline-block ant-w-24px">`),
-  _tmpl$4$2 = /*#__PURE__*/template(`<span class="i-ant-design:plus-square-outlined">`);
+const _tmpl$$j = /*#__PURE__*/template(`<span class="i-ant-design:minus-square-outlined">`),
+  _tmpl$2$9 = /*#__PURE__*/template(`<div><div class="flex-shrink-0" role="indent"></div><div class="ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center"><span class="i-ant-design:holder-outlined"></span></div><div></div><div>`),
+  _tmpl$3$6 = /*#__PURE__*/template(`<span class="ant-inline-block ant-w-24px">`),
+  _tmpl$4$3 = /*#__PURE__*/template(`<span class="i-ant-design:plus-square-outlined">`);
 const TreeContext = createContext({});
 /**
  * 单层级 tree
@@ -1393,7 +1618,7 @@ function SingleLevelTree(props) {
     children: (item, i) => {
       const indexes = [...(props.parentIndexes ?? []), i];
       return [(() => {
-        const _el$ = _tmpl$2$8(),
+        const _el$ = _tmpl$2$9(),
           _el$2 = _el$.firstChild,
           _el$3 = _el$2.nextSibling,
           _el$4 = _el$3.nextSibling,
@@ -1427,21 +1652,21 @@ function SingleLevelTree(props) {
           setDraggableIndexes(indexes);
         });
         setAttribute(_el$, "draggable", draggable);
-        insert(_el$2, () => Array(props.indent).fill(0).map(() => _tmpl$3$5()));
+        insert(_el$2, () => Array(props.indent).fill(0).map(() => _tmpl$3$6()));
         insert(_el$4, createComponent(Show, {
           get when() {
             return expanded();
           },
           get fallback() {
             return (() => {
-              const _el$8 = _tmpl$4$2();
+              const _el$8 = _tmpl$4$3();
               _el$8.$$click = setExpanded;
               _el$8.$$clickData = true;
               return _el$8;
             })();
           },
           get children() {
-            const _el$5 = _tmpl$$h();
+            const _el$5 = _tmpl$$j();
             _el$5.$$click = setExpanded;
             _el$5.$$clickData = false;
             return _el$5;
@@ -1455,9 +1680,9 @@ function SingleLevelTree(props) {
           indexes
         }));
         effect(_p$ => {
-          const _v$ = cs('ant-flex ant-items-center ant-h-28px ant-pb-4px', isDraggable(item()) && 'ant-[border:1px_solid_var(--primary-color)] ant-bg-white', draggableNode() && 'child[]:ant-pointer-events-none'),
+          const _v$ = cs('ant-flex ant-items-center ant-h-28px ant-pb-4px', isDraggable(item()) && 'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-white', draggableNode() && 'child[]:ant-pointer-events-none'),
             _v$2 = cs('ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center ant-cursor-pointer', isEmpty(props.children(item())) && 'opacity-0'),
-            _v$3 = cs('ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative', props.blockNode && 'w-full', selectedNodes()?.includes(item()) && '!ant-bg-[var(--active-bg-color)]', isTarget(item()) && "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--primary-color)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--primary-color)]");
+            _v$3 = cs('ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative', props.blockNode && 'w-full', selectedNodes()?.includes(item()) && '!ant-bg-[var(--ant-tree-node-selected-bg)]', isTarget(item()) && "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--ant-color-primary)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--ant-color-primary)]");
           _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
           _v$2 !== _p$._v$2 && className(_el$4, _p$._v$2 = _v$2);
           _v$3 !== _p$._v$3 && className(_el$6, _p$._v$3 = _v$3);
@@ -1552,21 +1777,21 @@ function Tree(props) {
 }
 delegateEvents(["click"]);
 
-const _tmpl$$g = /*#__PURE__*/template(`<div class="ant-mb-8px ant-flex ant-items-center"><span class="ant-text-[rgba(0,0,0,0.88)] ant-font-600">`),
-  _tmpl$2$7 = /*#__PURE__*/template(`<div><div class="ant-text-[rgba(0,0,0,0.88)]">`);
+const _tmpl$$i = /*#__PURE__*/template(`<div class="ant-mb-8px ant-flex ant-items-center"><span class="ant-text-[rgba(0,0,0,0.88)] ant-font-600">`),
+  _tmpl$2$8 = /*#__PURE__*/template(`<div><div class="ant-text-[rgba(0,0,0,0.88)]">`);
 const Popover = props => {
   return createComponent(Tooltip, mergeProps$1({
     mode: "light"
   }, props, {
     content: close => (() => {
-      const _el$ = _tmpl$2$7(),
+      const _el$ = _tmpl$2$8(),
         _el$4 = _el$.firstChild;
       insert(_el$, createComponent(Show, {
         get when() {
           return props.title;
         },
         get children() {
-          const _el$2 = _tmpl$$g(),
+          const _el$2 = _tmpl$$i(),
             _el$3 = _el$2.firstChild;
           insert(_el$3, () => props.title);
           return _el$2;
@@ -1585,16 +1810,16 @@ const Popover = props => {
 
 var ColorPicker = reactToSolidComponent(ColorPicker$1);
 
-const _tmpl$$f = /*#__PURE__*/template(`<div class="ant-text-center ant-px-32px ant-py-48px"><div class="ant-mb-24px"><span></span></div><div class="ant-my-8px ant-text-[rgba(0,0,0,.88)] ant-text-24px"></div><div class="ant-text-[rgba(0,0,0,.45)] ant-text-14px"></div><div class="ant-mt-24px"></div><div class="ant-mt-24px">`);
+const _tmpl$$h = /*#__PURE__*/template(`<div class="ant-text-center ant-px-32px ant-py-48px"><div class="ant-mb-24px"><span></span></div><div class="ant-my-8px ant-text-[rgba(0,0,0,.88)] ant-text-24px"></div><div class="ant-text-[rgba(0,0,0,.45)] ant-text-14px"></div><div class="ant-mt-24px"></div><div class="ant-mt-24px">`);
 const statusIconMap = {
   success: 'ant-text-#52c41a i-ant-design:check-circle-filled',
-  info: 'ant-text-[var(--primary-color)] i-ant-design:exclamation-circle-filled',
+  info: 'ant-text-[var(--ant-color-primary)] i-ant-design:exclamation-circle-filled',
   warning: 'ant-text-#faad14 i-ant-design:warning-filled',
   error: 'ant-text-#ff4d4f i-ant-design:close-circle-filled'
 };
 const Result = props => {
   return (() => {
-    const _el$ = _tmpl$$f(),
+    const _el$ = _tmpl$$h(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$2.nextSibling,
@@ -1610,9 +1835,83 @@ const Result = props => {
   })();
 };
 
-var Progress = replaceChildren(replaceClassName(reactToSolidComponent(Progress$1)));
+const _tmpl$$g = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled ant-text-[var(--ant-color-success)]">`),
+  _tmpl$2$7 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]">`),
+  _tmpl$3$5 = /*#__PURE__*/template(`<span class="ant-shrink-0 ant-min-w-40px ant-ml-8px ant-text-center">`),
+  _tmpl$4$2 = /*#__PURE__*/template(`<div class="ant-flex ant-items-center"><div>`);
+const Progress = _props => {
+  const props = mergeProps({
+    percent: 0,
+    height: 8,
+    showInfo: true
+  }, _props);
+  const status = createMemo(() => {
+    if (props.status) return props.status;
+    return props.percent >= 100 ? 'success' : 'normal';
+  });
+  return (() => {
+    const _el$ = _tmpl$4$2(),
+      _el$2 = _el$.firstChild;
+    _el$.style.setProperty("--ant-progress-remaining-color", "rgba(0, 0, 0, 0.06)");
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.showInfo;
+      },
+      get children() {
+        const _el$3 = _tmpl$3$5();
+        insert(_el$3, createComponent(Switch$1, {
+          get fallback() {
+            return `${props.percent}%`;
+          },
+          get children() {
+            return [createComponent(Match, {
+              get when() {
+                return status() === 'success';
+              },
+              get children() {
+                return _tmpl$$g();
+              }
+            }), createComponent(Match, {
+              get when() {
+                return status() === 'error';
+              },
+              get children() {
+                return _tmpl$2$7();
+              }
+            })];
+          }
+        }));
+        return _el$3;
+      }
+    }), null);
+    effect(_p$ => {
+      const _v$ = cs('ant-w-full ant-bg-[var(--ant-progress-remaining-color)]', 'before:ant-content-empty before:ant-block before:ant-bg-[var(--color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit'),
+        _v$2 = `${props.height}px`,
+        _v$3 = `${props.height / 2}px`,
+        _v$4 = `${props.percent}%`,
+        _v$5 = {
+          normal: 'var(--ant-color-primary)',
+          success: 'var(--ant-color-success)',
+          error: 'var(--ant-color-error)'
+        }[status()];
+      _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("height", _v$2) : _el$2.style.removeProperty("height"));
+      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("border-radius", _v$3) : _el$2.style.removeProperty("border-radius"));
+      _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("--percent", _v$4) : _el$2.style.removeProperty("--percent"));
+      _v$5 !== _p$._v$5 && ((_p$._v$5 = _v$5) != null ? _el$2.style.setProperty("--color", _v$5) : _el$2.style.removeProperty("--color"));
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined,
+      _v$5: undefined
+    });
+    return _el$;
+  })();
+};
 
-const _tmpl$$e = /*#__PURE__*/template(`<div>`),
+const _tmpl$$f = /*#__PURE__*/template(`<div>`),
   _tmpl$2$6 = /*#__PURE__*/template(`<div><div>`);
 const unWarpValue = value => typeof value === 'object' ? value.value : value;
 const Segmented = props => {
@@ -1625,7 +1924,7 @@ const Segmented = props => {
     return typeof v === 'object' ? v.disabled : false;
   };
   return (() => {
-    const _el$ = _tmpl$$e();
+    const _el$ = _tmpl$$f();
     insert(_el$, createComponent(For, {
       get each() {
         return props.options;
@@ -1677,7 +1976,7 @@ const Segmented = props => {
 };
 delegateEvents(["click"]);
 
-const _tmpl$$d = /*#__PURE__*/template(`<div><div role="selected-bar" class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left">`),
+const _tmpl$$e = /*#__PURE__*/template(`<div><div role="selected-bar" class="ant-absolute ant-bottom-0 ant-bg-[var(--ant-color-primary)] ant-h-2px ant-transition-left">`),
   _tmpl$2$5 = /*#__PURE__*/template(`<div><div>`),
   _tmpl$3$4 = /*#__PURE__*/template(`<div>`);
 const Tabs = _props => {
@@ -1721,7 +2020,7 @@ const Tabs = _props => {
             return props.type === 'line';
           },
           get children() {
-            const _el$2 = _tmpl$$d(),
+            const _el$2 = _tmpl$$e(),
               _el$3 = _el$2.firstChild;
             const _ref$ = nav;
             typeof _ref$ === "function" ? use(_ref$, _el$2) : nav = _el$2;
@@ -1736,7 +2035,7 @@ const Tabs = _props => {
                   updateSelectedBarStyle();
                 };
                 insert(_el$5, () => unwrapStringOrJSXElement(item.label));
-                effect(() => className(_el$5, cs('ant-py-12px ant-cursor-pointer', props.navItemClass, isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected')));
+                effect(() => className(_el$5, cs('ant-py-12px ant-cursor-pointer', props.navItemClass, isSelectedItem(item.key) && 'ant-text-[var(--ant-color-primary)] selected')));
                 return _el$5;
               })()
             }), _el$3);
@@ -1787,7 +2086,7 @@ const Tabs = _props => {
 };
 delegateEvents(["click"]);
 
-const _tmpl$$c = /*#__PURE__*/template(`<div><div class="ant-mb-8px ant-flex ant-items-center"><span class="i-ant-design:exclamation-circle-fill ant-text-#faad14"></span><span class="ant-ml-8px ant-text-[rgba(0,0,0,0.88)] ant-font-600"></span></div><div class="ant-ml-22px ant-mb-8px ant-text-[rgba(0,0,0,0.88)]"></div><div class="ant-text-right">`);
+const _tmpl$$d = /*#__PURE__*/template(`<div><div class="ant-mb-8px ant-flex ant-items-center"><span class="i-ant-design:exclamation-circle-fill ant-text-#faad14"></span><span class="ant-ml-8px ant-text-[rgba(0,0,0,0.88)] ant-font-600"></span></div><div class="ant-ml-22px ant-mb-8px ant-text-[rgba(0,0,0,0.88)]"></div><div class="ant-text-right">`);
 const Popconfirm = props => {
   const mergedProps = mergeProps({
     okText: '确定',
@@ -1804,7 +2103,7 @@ const Popconfirm = props => {
     onOpenChange: setOpen,
     get content() {
       return (() => {
-        const _el$ = _tmpl$$c(),
+        const _el$ = _tmpl$$d(),
           _el$2 = _el$.firstChild,
           _el$3 = _el$2.firstChild,
           _el$4 = _el$3.nextSibling,
@@ -1845,9 +2144,98 @@ const Popconfirm = props => {
   }));
 };
 
-const Upload = replaceChildren(replaceClassName(reactToSolidComponent(Upload$1)));
+const _tmpl$$c = /*#__PURE__*/template(`<span><input class="hidden" type="file">`);
+function request(file, customRequest) {
+  const id = `upload-${nanoid()}`;
+  // eslint-disable-next-line solid/reactivity
+  const uploadFileSignal = createSignal({
+    id,
+    file,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    status: 'pending',
+    percent: 0
+  });
+  const [, setUploadFile] = uploadFileSignal;
+  customRequest?.({
+    file,
+    onProgress(event) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'uploading',
+        percent: event.percent ?? 0
+      }));
+    },
+    onSuccess(response) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'finished',
+        response
+      }));
+    },
+    onError() {
+      setUploadFile(value => ({
+        ...value,
+        status: 'error'
+      }));
+    }
+  });
+  return uploadFileSignal;
+}
+const Upload = _props => {
+  let input;
+  const props = mergeProps({
+    customRequest: ({
+      file,
+      onSuccess,
+      onError
+    }) => {
+      if (!_props.action) return;
+      const formData = new FormData();
+      formData.append('file', file);
+      fetch(_props.action, {
+        method: _props.method ?? 'post',
+        body: formData
+      }).then(onSuccess).catch(onError);
+    }
+  }, _props);
+  return (() => {
+    const _el$ = _tmpl$$c(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = () => input?.click();
+    insert(_el$, () => props.children, _el$2);
+    _el$2.$$input = e => {
+      const fileList = [];
+      for (const file of e.target.files ?? []) {
+        const uploadFileSignal = request(file, props.customRequest);
+        fileList.push(uploadFileSignal);
+      }
+      props.onAdd?.(fileList);
+      e.target.value = '';
+    };
+    const _ref$ = input;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : input = _el$2;
+    effect(_p$ => {
+      const _v$ = props.class,
+        _v$2 = props.accept,
+        _v$3 = props.multiple;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$2, "accept", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && (_el$2.multiple = _p$._v$3 = _v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+    return _el$;
+  })();
+};
+Upload.request = request;
+delegateEvents(["click", "input"]);
 
-const _tmpl$$b = /*#__PURE__*/template(`<label class="ant-inline-flex ant-gap-4px"><input type="radio">`),
+const _tmpl$$b = /*#__PURE__*/template(`<label class="ant-inline-flex ant-gap-4px ant-cursor-pointer ant-inline-flex ant-items-center"><span><input class="ant-m-0 ant-hidden" type="radio">`),
   _tmpl$2$4 = /*#__PURE__*/template(`<label><input class="ant-w-0 ant-h-0" type="radio">`),
   _tmpl$3$3 = /*#__PURE__*/template(`<div>`);
 const Radio = props => {
@@ -1855,18 +2243,20 @@ const Radio = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined
+    trigger: null
   });
   return (() => {
     const _el$ = _tmpl$$b(),
-      _el$2 = _el$.firstChild;
-    _el$2.$$input = e => {
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
+    _el$3.$$input = e => {
       setChecked(e.target.checked);
       untrack(() => props.onChange?.(e));
     };
     insert(_el$, () => props.children, null);
-    effect(() => _el$2.checked = checked());
-    effect(() => _el$2.value = props.value ?? '');
+    effect(() => className(_el$2, cs('ant-w-16px ant-h-16px ant-rounded-50% ant-[border:1px_solid_var(--ant-color-border)]', checked() && 'ant-[border:5px_solid_var(--ant-color-primary)]')));
+    effect(() => _el$3.checked = checked());
+    effect(() => _el$3.value = props.value ?? '');
     return _el$;
   })();
 };
@@ -1875,20 +2265,20 @@ Radio.Button = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined
+    trigger: null
   });
   return (() => {
-    const _el$3 = _tmpl$2$4(),
-      _el$4 = _el$3.firstChild;
-    _el$4.$$input = e => {
+    const _el$4 = _tmpl$2$4(),
+      _el$5 = _el$4.firstChild;
+    _el$5.$$input = e => {
       setChecked(e.target.checked);
       untrack(() => props.onChange?.(e));
     };
-    insert(_el$3, () => props.children, null);
-    effect(() => className(_el$3, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--primary-color)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--primary-color)] ant-[border:1px_solid_var(--primary-color)] !ant-border-r-[var(--primary-color)]')));
-    effect(() => _el$4.checked = checked());
-    effect(() => _el$4.value = props.value ?? '');
-    return _el$3;
+    insert(_el$4, () => props.children, null);
+    effect(() => className(_el$4, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--ant-color-primary)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--ant-color-primary)] ant-[border:1px_solid_var(--ant-color-primary)] !ant-border-r-[var(--ant-color-primary)]')));
+    effect(() => _el$5.checked = checked());
+    effect(() => _el$5.value = props.value ?? '');
+    return _el$4;
   })();
 };
 Radio.Group = _props => {
@@ -1896,12 +2286,12 @@ Radio.Group = _props => {
     optionType: 'default'
   }, _props);
   const [value, setValue] = createControllableValue(props, {
-    trigger: undefined
+    trigger: null
   });
   const isChecked = createSelector(value);
   return (() => {
-    const _el$5 = _tmpl$3$3();
-    insert(_el$5, createComponent(For, {
+    const _el$6 = _tmpl$3$3();
+    insert(_el$6, createComponent(For, {
       get each() {
         return props.options;
       },
@@ -1917,15 +2307,17 @@ Radio.Group = _props => {
         },
         onChange: e => {
           setValue(option.value);
-          untrack(() => props.onChange?.(e));
+          untrack(() => {
+            props.onChange?.(e);
+          });
         },
         get children() {
           return option.label;
         }
       })
     }));
-    effect(() => className(_el$5, cs(props.block ? 'ant-flex' : 'ant-inline-flex', props.optionType === 'default' ? 'ant-gap-8px' : '')));
-    return _el$5;
+    effect(() => className(_el$6, cs(props.block ? 'ant-flex' : 'ant-inline-flex', props.optionType === 'default' ? 'ant-gap-8px' : '')));
+    return _el$6;
   })();
 };
 delegateEvents(["input"]);
@@ -2143,7 +2535,7 @@ const Switch = props => {
       _el$2 = _el$.firstChild;
     _el$.$$click = () => setChecked(c => !c);
     effect(_p$ => {
-      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--primary-color)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
+      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--ant-color-primary)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
         _v$2 = cs('ant-w-18px ant-h-18px ant-rounded-50% ant-bg-white ant-absolute ant-top-1/2 -ant-translate-y-1/2 ant-transition-left', checked() ? 'ant-left-[calc(100%-20px)]' : 'ant-left-2px');
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);
@@ -2162,9 +2554,12 @@ const Image$1 = replaceClassName(reactToSolidComponent(Skeleton$1.Image));
 const Skeleton = _Skeleton;
 Skeleton.Image = Image$1;
 
-const _tmpl$$7 = /*#__PURE__*/template(`<div class="ant-absolute ant-inset-0 ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]"><span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-32px ant-text-[var(--primary-color)]">`),
-  _tmpl$2$2 = /*#__PURE__*/template(`<div class="ant-relative ant-min-h-32px">`);
-const Spin = props => {
+const _tmpl$$7 = /*#__PURE__*/template(`<div class="ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]"><span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-[var(--ant-color-primary)]">`),
+  _tmpl$2$2 = /*#__PURE__*/template(`<div>`);
+const Spin = _props => {
+  const props = mergeProps({
+    size: 20
+  }, _props);
   return (() => {
     const _el$ = _tmpl$2$2();
     insert(_el$, () => props.children, null);
@@ -2173,7 +2568,10 @@ const Spin = props => {
         return props.spinning;
       },
       get children() {
-        return _tmpl$$7();
+        const _el$2 = _tmpl$$7(),
+          _el$3 = _el$2.firstChild;
+        effect(() => `${props.size}px` != null ? _el$3.style.setProperty("font-size", `${props.size}px`) : _el$3.style.removeProperty("font-size"));
+        return _el$2;
       }
     }), null);
     return _el$;
@@ -2211,10 +2609,15 @@ const _tmpl$$3 = /*#__PURE__*/template(`<svg width="184" height="100" viewBox="0
 const EmptySvg = () => _tmpl$$3();
 
 const _tmpl$$2 = /*#__PURE__*/template(`<div><div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center"></div><div class="ant-text-[var(--ant-color-text)] ant-text-center">暂无数据`);
-const Empty = () => {
+const Empty = props => {
   return (() => {
     const _el$ = _tmpl$$2(),
       _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps$1(props, {
+      get style() {
+        return props.style;
+      }
+    }), false, true);
     insert(_el$2, createComponent(EmptySvg, {}));
     return _el$;
   })();
@@ -2353,4 +2756,4 @@ const Collapse = props => {
 };
 delegateEvents(["click"]);
 
-export { Button, Collapse, ColorPicker, Compact, DatePicker, Empty, Form, Image, Input, InputNumber, Modal, Popconfirm, Popover, Progress, Radio, Result, Segmented, Select, Skeleton, Spin, Switch, Table, Tabs, Timeline, Tooltip, Tree, Upload, createControllableValue };
+export { Button, Collapse, ColorPicker, Compact, DatePicker, Drawer, Empty, Form, Image, Input, InputNumber, Modal, Popconfirm, Popover, Progress, Radio, Result, Segmented, Select, Skeleton, Spin, Switch, Table, Tabs, Timeline, Tooltip, Tree, Upload, createControllableValue };