antd-solid 0.0.9 → 0.0.11

package/dist/index.esm.js

@@ -3,14 +3,14 @@ import { mergeProps, createSignal, createMemo, Show, createEffect, on, splitProp
 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, Upload as Upload$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$$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',
@@ -19,7 +19,7 @@ const sizeClassMap = {
 };
 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)]'),
+  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(--primary-color)] ant-bg-[var(--primary-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-[border-color:var(--dark-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)]'),
   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)]')
@@ -32,7 +32,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);
@@ -58,12 +58,12 @@ const Button = props => {
         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-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:--light-primary-color]'),
         _v$2 = mergedProps.style;
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _p$._v$2 = style(_el$, _v$2, _p$._v$2);
@@ -123,10 +123,10 @@ function createControllableValue(props, options = {}) {
   return [value, setValue];
 }
 
-const _tmpl$$p = /*#__PURE__*/template(`<div class="ant-compact ant-flex">`);
+const _tmpl$$r = /*#__PURE__*/template(`<div class="ant-compact ant-flex">`);
 function Compact(props) {
   return (() => {
-    const _el$ = _tmpl$$p();
+    const _el$ = _tmpl$$r();
     insert(_el$, () => props.children);
     return _el$;
   })();
@@ -137,10 +137,10 @@ Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-
 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$$q = /*#__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)]'),
   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)]'),
@@ -186,13 +186,13 @@ function CommonInput(props) {
     }
   }));
   return (() => {
-    const _el$ = _tmpl$$o();
+    const _el$ = _tmpl$$q();
     insert(_el$, createComponent(Show, {
       get when() {
         return props.addonBefore;
       },
       get children() {
-        const _el$2 = _tmpl$$o();
+        const _el$2 = _tmpl$$q();
         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 +204,13 @@ function CommonInput(props) {
       },
       fallback: inputJSX,
       get children() {
-        const _el$3 = _tmpl$$o();
+        const _el$3 = _tmpl$$q();
         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 +221,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,7 +231,7 @@ 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;
           }
@@ -245,7 +245,7 @@ function CommonInput(props) {
         return props.addonAfter;
       },
       get children() {
-        const _el$7 = _tmpl$$o();
+        const _el$7 = _tmpl$$q();
         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 +318,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$$p = /*#__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 isEmptyValue = value => isNil(value) || value === '';
 const InputNumber = _props => {
   const props = mergeProps({
@@ -362,7 +369,7 @@ const InputNumber = _props => {
   return createComponent(CommonInput, mergeProps$1(inputProps, {
     get actions() {
       return (() => {
-        const _el$ = _tmpl$$n(),
+        const _el$ = _tmpl$$p(),
           _el$2 = _el$.firstChild,
           _el$3 = _el$2.nextSibling;
         _el$2.$$click = up;
@@ -404,23 +411,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$$o = /*#__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(--primary-color)] 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$$o();
     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 +437,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$$n = /*#__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,19 +450,33 @@ 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(() => {
-        if (props.destroyOnClose) {
-          setOpen(false);
-        } else {
-          setHide(true);
-        }
-      });
+      setHide(true);
+      cleanup();
+      props.afterClose?.();
+    },
+    destroy() {
+      setOpen(false);
+      cleanup();
+      props.afterClose?.();
     }
   };
   untrack(() => {
@@ -463,10 +484,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 +495,7 @@ function Modal(_props) {
           const _el$ = _tmpl$5$1();
           _el$.$$click = () => {
             if (props.maskClosable ?? true) {
-              close();
+              instance.close();
             }
           };
           insert(_el$, createComponent(Show, {
@@ -489,7 +506,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 +522,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$$n();
                     }
                   });
                 }
@@ -519,7 +538,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 +547,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 +640,227 @@ Modal.warning = props => {
 };
 delegateEvents(["click"]);
 
-const _tmpl$$k = /*#__PURE__*/template(`<div role="ReactToSolid">`);
+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 = ".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$$m = /*#__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",
+                size: "plain",
+                "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)]",
+                onClick: () => {
+                  instance?.close();
+                },
+                get children() {
+                  return _tmpl$$m();
+                }
+              });
+            }
+          }), _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$$l = /*#__PURE__*/template(`<div role="ReactToSolid">`);
 function ReactToSolid(props) {
   let root;
-  const rootEle = createMemo(() => props.container ?? _tmpl$$k());
+  const rootEle = createMemo(() => props.container ?? _tmpl$$l());
   onMount(() => {
     root = createRoot(rootEle());
     onCleanup(() => {
@@ -963,7 +1201,7 @@ function useClickAway(onClickAway, target) {
   });
 }
 
-const _tmpl$$j = /*#__PURE__*/template(`<div>`);
+const _tmpl$$k = /*#__PURE__*/template(`<div>`);
 const Content = props => {
   return createComponent(Show, {
     get when() {
@@ -1201,7 +1439,7 @@ const Tooltip = _props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          const _el$ = _tmpl$$j();
+          const _el$ = _tmpl$$k();
           _el$.$$click = e => {
             e.stopPropagation();
           };
@@ -1218,7 +1456,7 @@ const Tooltip = _props => {
               return props.arrow;
             },
             get children() {
-              const _el$2 = _tmpl$$j();
+              const _el$2 = _tmpl$$k();
               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 +1494,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$$j = /*#__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,13 +1523,13 @@ 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$$j();
           _el$7.$$click = () => {
             setValue(item.value);
             close();
@@ -1305,7 +1543,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 +1570,7 @@ const Select = props => {
           })();
         },
         get children() {
-          const _el$3 = _tmpl$$i();
+          const _el$3 = _tmpl$$j();
           insert(_el$3, () => selectedOption().label ?? value());
           return _el$3;
         }
@@ -1345,7 +1583,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);
@@ -1360,10 +1598,10 @@ const Select = props => {
 };
 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$$i = /*#__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 +1631,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 +1665,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$$i();
             _el$5.$$click = setExpanded;
             _el$5.$$clickData = false;
             return _el$5;
@@ -1552,21 +1790,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$$h = /*#__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$$h(),
             _el$3 = _el$2.firstChild;
           insert(_el$3, () => props.title);
           return _el$2;
@@ -1585,7 +1823,7 @@ 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$$g = /*#__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',
@@ -1594,7 +1832,7 @@ const statusIconMap = {
 };
 const Result = props => {
   return (() => {
-    const _el$ = _tmpl$$f(),
+    const _el$ = _tmpl$$g(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$2.nextSibling,
@@ -1610,7 +1848,71 @@ const Result = props => {
   })();
 };
 
-var Progress = replaceChildren(replaceClassName(reactToSolidComponent(Progress$1)));
+const _tmpl$$f = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled ant-text-[var(--primary-color)]">`),
+  _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,
+    status: 'default',
+    height: 8,
+    showInfo: true
+  }, _props);
+  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 props.status === 'success' || props.percent >= 100;
+              },
+              get children() {
+                return _tmpl$$f();
+              }
+            }), createComponent(Match, {
+              get when() {
+                return props.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(--primary-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$ !== _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"));
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined
+    });
+    return _el$;
+  })();
+};
 
 const _tmpl$$e = /*#__PURE__*/template(`<div>`),
   _tmpl$2$6 = /*#__PURE__*/template(`<div><div>`);
@@ -1847,7 +2149,7 @@ const Popconfirm = props => {
 
 const Upload = replaceChildren(replaceClassName(reactToSolidComponent(Upload$1)));
 
-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 +2157,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(--primary-color)]')));
+    effect(() => _el$3.checked = checked());
+    effect(() => _el$3.value = props.value ?? '');
     return _el$;
   })();
 };
@@ -1875,20 +2179,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(--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$5.checked = checked());
+    effect(() => _el$5.value = props.value ?? '');
+    return _el$4;
   })();
 };
 Radio.Group = _props => {
@@ -1896,12 +2200,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 +2221,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"]);
@@ -2353,4 +2659,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 };