antd-solid 0.0.21 → 0.0.23

package/es/Input/index.js

@@ -1,8 +1,9 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrElement, mergeProps } from 'solid-js/web';
+import { delegateEvents, createComponent, spread, mergeProps, insert, use, template } from 'solid-js/web';
 import { isNil, omit } from 'lodash-es';
 import { useContext, splitProps, onMount, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
+import { setRef } from '../utils/solid.js';
 import Element from '../Element/index.js';
 import TextArea from './TextArea.js';
 import useComponentSize from '../hooks/useComponentSize.js';
@@ -10,12 +11,10 @@ import './index.scss.js';
 import useFocus from '../hooks/useFocus.js';
 import CompactContext from '../Compact/context.js';
 
-var _tmpl$ = ["<div", ">", "</div>"],
-  _tmpl$2 = ["<div", " class=\"mr-4px\">", "</div>"],
-  _tmpl$3 = ["<span", " class=\"ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]\"></span>"],
-  _tmpl$4 = ["<div", " class=\"ml-4px\">", "</div>"],
-  _tmpl$5 = ["<div", " class=\"[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px\">", "</div>"],
-  _tmpl$6 = ["<div", "><!--$-->", "<!--/-->", "<!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div><input>`);
 const statusClassDict = {
   default: (disabled, foucs) => {
     if (disabled) {
@@ -54,8 +53,11 @@ function CommonInput(props) {
   let inputRef;
   const foucs = useFocus(() => inputRef);
   onMount(() => {
-    if (props.autoFocus) ;
+    if (props.autoFocus) {
+      inputRef?.focus();
+    }
   });
+  const isControlled = () => Object.keys(props).includes('value');
   const [value, setValue] = createControllableValue(props, {
     trigger: null
   });
@@ -100,49 +102,123 @@ function CommonInput(props) {
           return !isNil(addonBefore());
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0'), true), false), escape(addonBefore()));
-        }
-      }), ssr(_tmpl$6, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs())), true), false), escape(createComponent(Show, {
-        get when() {
-          return !isNil(prefix());
-        },
-        get children() {
-          return ssr(_tmpl$2, ssrHydrationKey(), escape(prefix()));
-        }
-      })), ssrElement("input", mergeProps(inputProps, {
-        get ["class"]() {
-          return cs('w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)] bg-transparent', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', props.class);
-        },
-        get value() {
-          return value() ?? '';
-        }
-      }), undefined, false), escape(createComponent(Show, {
-        get when() {
-          return showClearBtn();
-        },
-        get children() {
-          return ssr(_tmpl$3, ssrHydrationKey());
-        }
-      })), escape(createComponent(Show, {
-        get when() {
-          return !isNil(suffix());
-        },
-        get children() {
-          return ssr(_tmpl$4, ssrHydrationKey(), escape(suffix()));
-        }
-      })), escape(createComponent(Show, {
-        get when() {
-          return !isNil(actions());
-        },
-        get children() {
-          return ssr(_tmpl$5, ssrHydrationKey(), escape(actions()));
+          var _el$ = _tmpl$();
+          spread(_el$, mergeProps(() => props.addonBeforeHTMLAttributes, {
+            get ["class"]() {
+              return cs(props.addonBeforeHTMLAttributes?.class, 'ant-input-addon ant-input-addon-before', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0');
+            }
+          }), false, true);
+          insert(_el$, addonBefore);
+          return _el$;
         }
-      }))), createComponent(Show, {
+      }), (() => {
+        var _el$2 = _tmpl$4(),
+          _el$4 = _el$2.firstChild;
+        spread(_el$2, mergeProps(() => props.affixWrapperHTMLAttributes, {
+          get ["class"]() {
+            return cs(props.affixWrapperHTMLAttributes?.class, 'ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs()));
+          }
+        }), false, true);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(prefix());
+          },
+          get children() {
+            var _el$3 = _tmpl$();
+            spread(_el$3, mergeProps(() => props.prefixHTMLAttributes, {
+              get ["class"]() {
+                return cs(props.prefixHTMLAttributes?.class, 'mr-4px');
+              }
+            }), false, true);
+            insert(_el$3, prefix);
+            return _el$3;
+          }
+        }), _el$4);
+        use(el => {
+          setRef(props, el);
+          inputRef = el;
+        }, _el$4);
+        spread(_el$4, mergeProps(inputProps, {
+          get ["class"]() {
+            return cs('w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)] bg-transparent', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', props.class);
+          },
+          get value() {
+            return value() ?? '';
+          },
+          "onInput": e => {
+            setValue(e.target.value);
+            try {
+              props.onChange?.(e);
+            } finally {
+              if (isControlled() && e.target.value !== props.value) {
+                e.target.value = props.value ?? '';
+              }
+            }
+          },
+          "onKeyDown": e => {
+            if (e.key === 'Enter') {
+              props.onPressEnter?.(e);
+            }
+            props.onKeyDown?.(e);
+          }
+        }), false, false);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return showClearBtn();
+          },
+          get children() {
+            var _el$5 = _tmpl$2();
+            _el$5.$$click = e => {
+              e.stopPropagation();
+              inputRef.value = '';
+              const inputEvent = new InputEvent('input', {
+                bubbles: true
+              });
+              inputRef.dispatchEvent(inputEvent);
+              inputRef?.focus();
+            };
+            return _el$5;
+          }
+        }), null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(suffix());
+          },
+          get children() {
+            var _el$6 = _tmpl$();
+            spread(_el$6, mergeProps(() => props.suffixHTMLAttributes, {
+              get ["class"]() {
+                return cs(props.suffixHTMLAttributes?.class, 'ml-4px');
+              }
+            }), false, true);
+            insert(_el$6, suffix);
+            return _el$6;
+          }
+        }), null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(actions());
+          },
+          get children() {
+            var _el$7 = _tmpl$3();
+            insert(_el$7, actions);
+            return _el$7;
+          }
+        }), null);
+        return _el$2;
+      })(), createComponent(Show, {
         get when() {
           return !isNil(addonAfter());
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0'), true), false), escape(addonAfter()));
+          var _el$8 = _tmpl$();
+          spread(_el$8, mergeProps(() => props.addonAfterHTMLAttributes, {
+            get ["class"]() {
+              return cs(props.addonAfterHTMLAttributes?.class, 'ant-input-addon ant-input-addon-after', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0');
+            }
+          }), false, true);
+          insert(_el$8, addonAfter);
+          return _el$8;
         }
       })];
     }
@@ -152,5 +228,6 @@ const Input = props => {
   return createComponent(CommonInput, mergeProps(() => omit(props, ['actions'])));
 };
 Input.TextArea = TextArea;
+delegateEvents(["click"]);
 
 export { CommonInput, Input as default, statusClassDict };

package/es/InputNumber/index.js

@@ -1,13 +1,12 @@
-import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { delegateEvents, createComponent, mergeProps as mergeProps$1, memo, template } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, untrack, createMemo, createRenderEffect, on } from 'solid-js';
 import { isNumber, isNil, clamp, floor } from 'lodash-es';
 import NP from 'number-precision';
 import { CommonInput } from '../Input/index.js';
 import { dispatchEventHandlerUnion } from '../utils/solid.js';
 
-var _tmpl$ = ["<div", " class=\"flex flex-col h-full w-[--ant-input-number-handle-width] [border-left:1px_solid_var(--ant-color-border)] bg-[--ant-color-bg-container]\"><div", "><div class=\"i-ant-design:up-outlined\"></div></div><div class=\"", "\"><div class=\"i-ant-design:down-outlined\"></div></div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex flex-col h-full w-[--ant-input-number-handle-width] [border-left:1px_solid_var(--ant-color-border)] bg-[--ant-color-bg-container]"><div class="text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:up-outlined></div></div><div class="[border-top:1px_solid_var(--ant-color-border)] text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:down-outlined>`);
 const isEmptyValue = value => isNil(value) || value === '';
-const actionBtnClass = 'text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500';
 const InputNumber = _props => {
   const props = mergeProps({
     min: -Infinity,
@@ -76,7 +75,14 @@ const InputNumber = _props => {
       };
     },
     get actions() {
-      return props.controls ? ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("class", escape(actionBtnClass, true), false), `[border-top:1px_solid_var(--ant-color-border)] ${escape(actionBtnClass, true)}`) : undefined;
+      return memo(() => !!props.controls)() ? (() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$2.$$click = up;
+        _el$3.$$click = down;
+        return _el$;
+      })() : undefined;
     },
     get value() {
       return `${(focusing() ? value() : displayValue()) ?? ''}`;
@@ -111,5 +117,6 @@ const InputNumber = _props => {
     }
   }));
 };
+delegateEvents(["click"]);
 
 export { InputNumber as default };

package/es/Menu/InternalMenu.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle, mergeProps } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, mergeProps, effect, className, style, template } from 'solid-js/web';
 import { For, createMemo, Show, Switch, Match } from 'solid-js';
 import { isEmpty } from 'lodash-es';
 import cs from 'classnames';
@@ -6,13 +6,12 @@ import Popover from '../Popover/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 import DelayShow from '../DelayShow/index.js';
 
-var _tmpl$ = ["<div", " class=\"h-1px bg-[var(--ant-color-split)] my-[var(--ant-margin-xxs)]\"></div>"],
-  _tmpl$2 = ["<div", "><div", " style=\"", "\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div>"],
-  _tmpl$3 = ["<div", " style=\"", "\">", "</div>"],
-  _tmpl$4 = ["<div", "><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
-  _tmpl$5 = ["<span", " class=\"i-ant-design:right-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"],
-  _tmpl$6 = ["<span", " class=\"i-ant-design:up-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"],
-  _tmpl$7 = ["<span", " class=\"i-ant-design:down-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="h-1px bg-[var(--ant-color-split)] my-[var(--ant-margin-xxs)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div>`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:right-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:up-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
+  _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`);
 function isMenuDividerType(value) {
   return value.type === 'divider';
 }
@@ -22,18 +21,54 @@ function InternalMenu(props) {
       return props.items;
     },
     children: item => {
-      if (isMenuDividerType(item)) return ssr(_tmpl$, ssrHydrationKey());
+      if (isMenuDividerType(item)) return _tmpl$();
       const keyPath = createMemo(() => [...(props.parentKeys ?? []), item.key]);
       const expanded = createMemo(() => props.expandedKeys?.includes(item.key));
       const hasChildren = createMemo(() => !isEmpty(item.children));
-      const getLabel = options => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs(item.disabled && 'cursor-not-allowed'), true), false), ssrAttribute("class", escape(cs('relative rounded-[var(--ant-border-radius-lg)] cursor-pointer flex items-center m-[--ant-menu-item-margin] min-h-[--ant-menu-item-height]', item.disabled ? 'text-[--ant-color-text-disabled]' : props.selectedKeys.includes(item.key) ? 'bg-[--ant-control-item-bg-active] text-[--ant-color-primary]' : 'text-[--ant-color-text] hover:bg-[var(--ant-color-bg-text-hover)]', !hasChildren() ? ['px-[--ant-padding-sm]', props.selectable && 'active:bg-[var(--ant-control-item-bg-active)]'] : 'pl-[var(--ant-padding)] pr-[calc(var(--ant-padding)+0.7em+var(--ant-margin-xs))]', item.disabled && 'pointer-events-none'), true), false), "padding-left:" + (props.mode === 'inline' ? `calc(${escape(keyPath().length, true)} * var(--ant-padding))` : escape(undefined, true)), escape(unwrapStringOrJSXElement(item.label)), escape(createComponent(Show, {
-        get when() {
-          return hasChildren();
-        },
-        get children() {
-          return options?.expandIcon;
-        }
-      })));
+      const getLabel = options => (() => {
+        var _el$2 = _tmpl$2(),
+          _el$3 = _el$2.firstChild;
+        _el$3.$$click = () => {
+          options?.onClick?.();
+          if (!hasChildren()) {
+            const info = {
+              key: item.key,
+              keyPath: keyPath()
+            };
+            item.onClick?.(info);
+            props.onClick?.(info);
+            if (props.selectable) {
+              props.onSelect?.({
+                ...info,
+                selectedKeys: [item.key]
+              });
+            }
+          }
+        };
+        insert(_el$3, () => unwrapStringOrJSXElement(item.label), null);
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return hasChildren();
+          },
+          get children() {
+            return options?.expandIcon;
+          }
+        }), null);
+        effect(_p$ => {
+          var _v$ = cs(item.disabled && 'cursor-not-allowed'),
+            _v$2 = cs('relative rounded-[var(--ant-border-radius-lg)] cursor-pointer flex items-center m-[--ant-menu-item-margin] min-h-[--ant-menu-item-height]', item.disabled ? 'text-[--ant-color-text-disabled]' : props.selectedKeys.includes(item.key) ? 'bg-[--ant-control-item-bg-active] text-[--ant-color-primary]' : 'text-[--ant-color-text] hover:bg-[var(--ant-color-bg-text-hover)]', !hasChildren() ? ['px-[--ant-padding-sm]', props.selectable && 'active:bg-[var(--ant-control-item-bg-active)]'] : 'pl-[var(--ant-padding)] pr-[calc(var(--ant-padding)+0.7em+var(--ant-margin-xs))]', item.disabled && 'pointer-events-none'),
+            _v$3 = props.mode === 'inline' ? `calc(${keyPath().length} * var(--ant-padding))` : undefined;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("padding-left", _v$3) : _el$3.style.removeProperty("padding-left"));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$2;
+      })();
       return createComponent(Show, {
         get when() {
           return hasChildren();
@@ -64,24 +99,40 @@ function InternalMenu(props) {
                     },
                     placement: "rightTop",
                     arrow: false,
-                    content: () => ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), ssrStyle(props.style), escape(createComponent(InternalMenu, mergeProps(props, {
-                      get items() {
-                        return item.children;
-                      },
-                      get parentKeys() {
-                        return keyPath();
-                      },
-                      onClick: info => {
-                        props.onExpandedKeysChange([]);
-                        props.onClick?.(info);
+                    content: () => (() => {
+                      var _el$6 = _tmpl$3();
+                      insert(_el$6, createComponent(InternalMenu, mergeProps(props, {
+                        get items() {
+                          return item.children;
+                        },
+                        get parentKeys() {
+                          return keyPath();
+                        },
+                        onClick: info => {
+                          props.onExpandedKeysChange([]);
+                          props.onClick?.(info);
+                        }
+                      })));
+                      effect(_p$ => {
+                        var _v$4 = props.class,
+                          _v$5 = props.style;
+                        _v$4 !== _p$.e && className(_el$6, _p$.e = _v$4);
+                        _p$.t = style(_el$6, _v$5, _p$.t);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined
+                      });
+                      return _el$6;
+                    })(),
+                    contentHTMLAttributes: {
+                      style: {
+                        padding: 0
                       }
-                    })))),
-                    contentStyle: {
-                      padding: 0
                     },
                     get children() {
                       return getLabel({
-                        expandIcon: ssr(_tmpl$5, ssrHydrationKey())
+                        expandIcon: _tmpl$4()
                       });
                     }
                   });
@@ -91,7 +142,8 @@ function InternalMenu(props) {
                   return props.mode === 'inline';
                 },
                 get children() {
-                  return ssr(_tmpl$4, ssrHydrationKey(), escape(getLabel({
+                  var _el$4 = _tmpl$3();
+                  insert(_el$4, () => getLabel({
                     onClick() {
                       if (hasChildren()) {
                         if (expanded()) {
@@ -106,27 +158,32 @@ function InternalMenu(props) {
                         return expanded();
                       },
                       get fallback() {
-                        return ssr(_tmpl$7, ssrHydrationKey());
+                        return _tmpl$6();
                       },
                       get children() {
-                        return ssr(_tmpl$6, ssrHydrationKey());
+                        return _tmpl$5();
                       }
                     })
-                  })), escape(createComponent(DelayShow, {
+                  }), null);
+                  insert(_el$4, createComponent(DelayShow, {
                     get when() {
                       return expanded();
                     },
                     get children() {
-                      return ssr(_tmpl$3, ssrHydrationKey(), "display:" + (expanded() ? "block" : "none"), escape(createComponent(InternalMenu, mergeProps(props, {
+                      var _el$5 = _tmpl$3();
+                      insert(_el$5, createComponent(InternalMenu, mergeProps(props, {
                         get items() {
                           return item.children;
                         },
                         get parentKeys() {
                           return keyPath();
                         }
-                      }))));
+                      })));
+                      effect(() => (expanded() ? 'block' : 'none') != null ? _el$5.style.setProperty("display", expanded() ? 'block' : 'none') : _el$5.style.removeProperty("display"));
+                      return _el$5;
                     }
-                  })));
+                  }), null);
+                  return _el$4;
                 }
               })];
             }
@@ -136,5 +193,6 @@ function InternalMenu(props) {
     }
   });
 }
+delegateEvents(["click"]);
 
 export { InternalMenu as default };

package/es/Message/Message.js

@@ -1,12 +1,12 @@
-import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, memo, insert, template } from 'solid-js/web';
 import { onMount } from 'solid-js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<div", ">", "</div>"],
-  _tmpl$2 = ["<span", " class=\"i-ant-design:info-circle-filled text-[--ant-color-primary] text-18px\"></span>"],
-  _tmpl$3 = ["<span", " class=\"i-ant-design:check-circle-filled text-[--ant-color-success] text-18px\"></span>"],
-  _tmpl$4 = ["<span", " class=\"i-ant-design:close-circle-filled text-[--ant-color-error] text-18px\"></span>"],
-  _tmpl$5 = ["<span", " class=\"i-ant-design:exclamation-circle-filled text-[--ant-color-warning] text-18px\"></span>"];
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:info-circle-filled text-[--ant-color-primary] text-18px">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled text-[--ant-color-success] text-18px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled text-[--ant-color-error] text-18px">`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:exclamation-circle-filled text-[--ant-color-warning] text-18px">`);
 const Message = props => {
   onMount(() => {
     const duration = props.duration ?? 3;
@@ -22,7 +22,11 @@ const Message = props => {
       '--ant-message-content-padding': '9px 12px'
     },
     get children() {
-      return [props.type === 'info' && ssr(_tmpl$2, ssrHydrationKey()), props.type === 'success' && ssr(_tmpl$3, ssrHydrationKey()), props.type === 'error' && ssr(_tmpl$4, ssrHydrationKey()), props.type === 'warning' && ssr(_tmpl$5, ssrHydrationKey()), ssr(_tmpl$, ssrHydrationKey(), escape(props.content))];
+      return [memo(() => memo(() => props.type === 'info')() && _tmpl$2()), memo(() => memo(() => props.type === 'success')() && _tmpl$3()), memo(() => memo(() => props.type === 'error')() && _tmpl$4()), memo(() => memo(() => props.type === 'warning')() && _tmpl$5()), (() => {
+        var _el$ = _tmpl$();
+        insert(_el$, () => props.content);
+        return _el$;
+      })()];
     }
   });
 };