@uzum-tech/ui 2.0.0-beta.8 → 2.0.0

package/dist/index.js

@@ -5792,7 +5792,7 @@
     });
     wrapped.__wrapped__ = true;
     for (const key of Object.keys(component)) {
-      if (/^__.*__$/.test(key) || key.endsWith("_FLAG")) {
+      if (/^__.*__$/.test(key) || key.endsWith("_FLAG") || key === "alias") {
         wrapped[key] = component[key];
       }
     }
@@ -5809,6 +5809,7 @@
       inlineThemeDisabled: UConfigProvider?.inlineThemeDisabled,
       mergedRtlRef: UConfigProvider?.mergedRtlRef,
       mergedComponentPropsRef: UConfigProvider?.mergedComponentPropsRef,
+      mergedIconPacksRef: UConfigProvider?.mergedIconPacksRef,
       mergedBreakpointsRef: UConfigProvider?.mergedBreakpointsRef,
       mergedBorderedRef: vue.computed(() => {
         const {
@@ -13049,6 +13050,28 @@
     }
   });
 
+  var style$1U = cB("icon", `
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  fill: currentColor;
+  transform: translateZ(0);
+`, [cM("color-transition", {
+    transition: "color .3s var(--u-bezier)"
+  }), cM("depth", {
+    color: "var(--u-color)"
+  }, [c$1("svg", {
+    opacity: "var(--u-opacity)",
+    transition: "opacity .3s var(--u-bezier)"
+  })]), c$1("svg", {
+    height: "100%",
+    width: "100%",
+    display: "block"
+  })]);
+
   const derived$1 = {
     name: "common",
     ...commonVariables$6,
@@ -13213,6 +13236,154 @@
     boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
   };
 
+  function self$1B(vars) {
+    const {
+      elementsPrimary
+    } = vars;
+    return {
+      color: elementsPrimary,
+      opacity1Depth: "0.82",
+      opacity2Depth: "0.72",
+      opacity3Depth: "0.38",
+      opacity4Depth: "0.24",
+      opacity5Depth: "0.18"
+    };
+  }
+  const iconLight = {
+    name: "Icon",
+    common: derived,
+    self: self$1B
+  };
+
+  const iconDark$1 = {
+    name: "Icon",
+    common: derived$1,
+    self: self$1B
+  };
+
+  const iconProps = {
+    ...useTheme.props,
+    depth: [String, Number],
+    size: [Number, String],
+    color: String,
+    component: Object,
+    name: String,
+    pack: String,
+    onClick: Function
+  };
+  const UIconImpl = vue.defineComponent({
+    _n_icon__: true,
+    name: "Icon",
+    props: iconProps,
+    setup(props) {
+      const {
+        mergedClsPrefixRef,
+        mergedIconPacksRef,
+        inlineThemeDisabled
+      } = useConfig(props);
+      const themeRef = useTheme("Icon", "-icon", style$1U, iconLight, props, mergedClsPrefixRef);
+      const cssVarsRef = vue.computed(() => {
+        const {
+          depth
+        } = props;
+        const {
+          common: {
+            cubicBezierEaseInOut
+          },
+          self
+        } = themeRef.value;
+        if (depth !== void 0) {
+          const {
+            color,
+            [`opacity${depth}Depth`]: opacity
+          } = self;
+          return {
+            "--u-bezier": cubicBezierEaseInOut,
+            "--u-color": color,
+            "--u-opacity": opacity
+          };
+        }
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-color": "",
+          "--u-opacity": ""
+        };
+      });
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass("icon", vue.computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
+      const resolvedPackedIconRef = vue.computed(() => {
+        const {
+          name,
+          pack
+        } = props;
+        if (!name) return null;
+        const config = mergedIconPacksRef?.value;
+        if (!config) {
+          warn("icon", "no icon packs configured on `u-config-provider`");
+          return null;
+        }
+        const targetName = pack ?? config.defaultPackName;
+        const target = config.packs.find(p => p.name === targetName);
+        if (!target) {
+          warn("icon", `icon pack "${targetName}" not found`);
+          return null;
+        }
+        if (config.async) {
+          return target.renderAsyncIcon(name);
+        }
+        if (!("renderIcon" in target)) {
+          warn("icon", `pack "${target.name}" is async-only, set \`async: true\` on \`u-config-provider :icon-packs\``);
+          return null;
+        }
+        return target.renderIcon(name);
+      });
+      return {
+        mergedClsPrefix: mergedClsPrefixRef,
+        resolvedPackedIcon: resolvedPackedIconRef,
+        mergedStyle: vue.computed(() => {
+          const {
+            size,
+            color
+          } = props;
+          return {
+            fontSize: formatLength(size),
+            color
+          };
+        }),
+        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender
+      };
+    },
+    render() {
+      const {
+        $parent,
+        depth,
+        mergedClsPrefix,
+        component,
+        onRender,
+        themeClass,
+        resolvedPackedIcon
+      } = this;
+      if ($parent?.$options?._n_icon__) {
+        warn("icon", "don't wrap `u-icon` inside `u-icon`");
+      }
+      onRender?.();
+      return vue.h(UBaseIcon, {
+        clsPrefix: mergedClsPrefix,
+        role: "img",
+        class: [`${mergedClsPrefix}-icon`, themeClass, {
+          [`${mergedClsPrefix}-icon--depth`]: depth,
+          [`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
+        }],
+        style: [this.cssVars, this.mergedStyle],
+        onClick: this.onClick
+      }, {
+        default: () => resolvedPackedIcon ?? (component ? vue.h(component) : this.$slots.default?.())
+      });
+    }
+  });
+  const UIcon$1 = UIconImpl;
+
   var commonVars$b = {
     iconWidth: "44px",
     iconHeight: "44px",
@@ -13225,7 +13396,7 @@
     avatarSize: "16px"
   };
 
-  function self$1B(vars) {
+  function self$1A(vars) {
     const {
       heightHuge,
       fontBodyLarge,
@@ -13255,16 +13426,16 @@
   const accountOptionLight = {
     name: "AccountOption",
     common: derived,
-    self: self$1B
+    self: self$1A
   };
 
   const accountOptionDark = {
     name: "AccountOption",
     common: derived$1,
-    self: self$1B
+    self: self$1A
   };
 
-  var style$1U = cB("base-account-option", `
+  var style$1T = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -13319,7 +13490,7 @@
       const themeRef = useTheme(
         "AccountOption",
         "-base-account-option",
-        style$1U,
+        style$1T,
         accountOptionLight,
         props,
         mergedClsPrefixRef
@@ -14758,7 +14929,7 @@
     })];
   }
 
-  var style$1T = cB("base-clear", `
+  var style$1S = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -14799,7 +14970,7 @@
       onClear: Function
     },
     setup(props) {
-      useStyle("-base-clear", style$1T, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-clear", style$1S, vue.toRef(props, "clsPrefix"));
       return {
         handleMouseDown(e) {
           e.preventDefault();
@@ -14830,7 +15001,7 @@
     }
   });
 
-  var style$1S = cB("base-close", `
+  var style$1R = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14902,7 +15073,7 @@
       absolute: Boolean
     },
     setup(props) {
-      useStyle("-base-close", style$1S, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-close", style$1R, vue.toRef(props, "clsPrefix"));
       return () => {
         const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
         const Tag = isButtonTag ? "button" : "div";
@@ -15061,7 +15232,7 @@
     }
   });
 
-  var style$1R = c$1([c$1("@keyframes loading-container-rotate", `
+  var style$1Q = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -15231,7 +15402,7 @@
       ...exposedLoadingProps
     },
     setup(props) {
-      useStyle("-base-loading", style$1R, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-loading", style$1Q, vue.toRef(props, "clsPrefix"));
     },
     render() {
       const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -15361,7 +15532,7 @@
     })];
   }
 
-  var style$1Q = cB("base-menu-mask", `
+  var style$1P = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -15384,7 +15555,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-menu-mask", style$1Q, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-menu-mask", style$1P, vue.toRef(props, "clsPrefix"));
       const messageRef = vue.ref(null);
       let timerId = null;
       const uncontrolledShowRef = vue.ref(false);
@@ -15572,7 +15743,7 @@
     railColor: "transparent"
   };
 
-  function self$1A(vars) {
+  function self$1z(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -15592,13 +15763,13 @@
   const safeTopScrollbarLight = {
     name: "SafeTopScrollbar",
     common: derived,
-    self: self$1A
+    self: self$1z
   };
 
   const safeTopScrollbarDark = {
     name: "SafeTopScrollbar",
     common: derived$1,
-    self: self$1A
+    self: self$1z
   };
 
   cB("scrollbar", [cM("rtl", `
@@ -15611,7 +15782,7 @@
           right: unset;
         `)])])])]);
 
-  var style$1P = cB("safe-top-scrollbar", `
+  var style$1O = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -15760,7 +15931,7 @@
       const themeRef = useTheme(
         "SafeTopScrollbar",
         "-safe-top-scrollbar",
-        style$1P,
+        style$1O,
         safeTopScrollbarLight,
         props,
         mergedClsPrefixRef
@@ -16494,7 +16665,7 @@
     railColor: "transparent"
   };
 
-  function self$1z(vars) {
+  function self$1y(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -16514,13 +16685,13 @@
   const scrollbarLight = {
     name: "Scrollbar",
     common: derived,
-    self: self$1z
+    self: self$1y
   };
 
   const scrollbarDark = {
     name: "Scrollbar",
     common: derived$1,
-    self: self$1z
+    self: self$1y
   };
 
   var rtlStyle$t = cB("scrollbar", [cM("rtl", `
@@ -16538,7 +16709,7 @@
     style: rtlStyle$t
   };
 
-  var style$1O = cB("scrollbar", `
+  var style$1N = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -16681,7 +16852,7 @@
       const themeRef = useTheme(
         "Scrollbar",
         "-scrollbar",
-        style$1O,
+        style$1N,
         scrollbarLight,
         props,
         mergedClsPrefixRef
@@ -18053,7 +18224,7 @@
     return treemate;
   }
 
-  function self$1y(vars) {
+  function self$1x(vars) {
     const {
       fontBodyMedium,
       fontTitleLarge,
@@ -18085,16 +18256,16 @@
   const emptyLight = {
     name: "Empty",
     common: derived,
-    self: self$1y
+    self: self$1x
   };
 
   const emptyDark$1 = {
     name: "Empty",
     common: derived$1,
-    self: self$1y
+    self: self$1x
   };
 
-  var style$1N = cB("empty", `
+  var style$1M = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -18172,7 +18343,7 @@
       const themeRef = useTheme(
         "Empty",
         "-empty",
-        style$1N,
+        style$1M,
         emptyLight,
         props,
         mergedClsPrefixRef
@@ -18260,7 +18431,7 @@
     }
   });
 
-  function self$1x(vars) {
+  function self$1w(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -18317,7 +18488,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$1x
+    self: self$1w
   });
 
   const internalSelectMenuDark = {
@@ -18327,7 +18498,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$1x
+    self: self$1w
   };
 
   cB("base-select-menu", [cM("rtl", `
@@ -18427,27 +18598,31 @@
       } = vue.inject(internalSelectionMenuInjectionKey);
       const isPendingRef = useMemo(() => {
         const { value: pendingTmNode } = pendingTmNodeRef;
-        if (!pendingTmNode)
+        if (!pendingTmNode) {
           return false;
+        }
         return props.tmNode.key === pendingTmNode.key;
       });
       function handleClick(e) {
         const { tmNode } = props;
-        if (tmNode.disabled)
+        if (tmNode.disabled) {
           return;
+        }
         handleOptionClick(e, tmNode);
       }
       function handleMouseEnter(e) {
         const { tmNode } = props;
-        if (tmNode.disabled)
+        if (tmNode.disabled) {
           return;
+        }
         handleOptionMouseEnter(e, tmNode);
       }
       function handleMouseMove(e) {
         const { tmNode } = props;
         const { value: isPending } = isPendingRef;
-        if (tmNode.disabled || isPending)
+        if (tmNode.disabled || isPending) {
           return;
+        }
         handleOptionMouseEnter(e, tmNode);
       }
       return {
@@ -18564,7 +18739,7 @@
     })];
   }
 
-  var style$1M = cB("base-select-menu", `
+  var style$1L = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -18752,7 +18927,7 @@
       const themeRef = useTheme(
         "InternalSelectMenu",
         "-internal-select-menu",
-        style$1M,
+        style$1L,
         internalSelectMenuLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -19220,7 +19395,7 @@
     }
   });
 
-  function self$1w(vars) {
+  function self$1v(vars) {
     const {
       fontBodyMedium,
       containerPrimary,
@@ -19247,13 +19422,13 @@
   const popoverLight = {
     name: "Popover",
     common: derived,
-    self: self$1w
+    self: self$1v
   };
 
   const popoverDark = {
     name: "Popover",
     common: derived$1,
-    self: self$1w
+    self: self$1v
   };
 
   cB("popover", [cM("rtl", `
@@ -19268,7 +19443,7 @@
     right: "left"
   };
   const arrowSize = "var(--u-arrow-height) * 1.414";
-  var style$1L = c$1([cB("popover", `
+  var style$1K = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -19487,7 +19662,7 @@
       const themeRef = useTheme(
         "Popover",
         "-popover",
-        style$1L,
+        style$1K,
         popoverLight,
         props,
         mergedClsPrefixRef
@@ -20314,7 +20489,7 @@
     }
   });
 
-  function self$1v(vars) {
+  function self$1u(vars) {
     const {
       opacityDisabled,
       borderRadiusSmall: borderRadius,
@@ -20412,13 +20587,13 @@
   const tagLight = {
     name: "Tag",
     common: derived,
-    self: self$1v
+    self: self$1u
   };
 
   const tagDark = {
     name: "Tag",
     common: derived$1,
-    self: self$1v
+    self: self$1u
   };
 
   var rtlStyle$s = cB("tag", [cM("rtl", `
@@ -20465,7 +20640,7 @@
     }
   };
 
-  var style$1K = cB("tag", `
+  var style$1J = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -20632,7 +20807,7 @@
       const themeRef = useTheme(
         "Tag",
         "-tag",
-        style$1K,
+        style$1J,
         tagLight,
         props,
         mergedClsPrefixRef
@@ -20996,7 +21171,7 @@
     }
   });
 
-  function self$1u(vars) {
+  function self$1t(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -21016,10 +21191,10 @@
   }
   const skeletonLight$1 = {
     common: derived,
-    self: self$1u
+    self: self$1t
   };
 
-  var style$1J = c$1([cB("skeleton", `
+  var style$1I = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -21075,7 +21250,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1J,
+        style$1I,
         skeletonLight$1,
         props,
         mergedClsPrefixRef
@@ -21191,7 +21366,7 @@
     }
   });
 
-  function self$1t(vars) {
+  function self$1s(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -21349,7 +21524,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1t
+    self: self$1s
   });
 
   const internalSelectionDark = {
@@ -21358,7 +21533,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1t
+    self: self$1s
   };
 
   cB("base-selection", [cM("rtl", `
@@ -21391,7 +21566,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
   }
-  var style$1I = c$1([cB("base-selection", `
+  var style$1H = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -21742,7 +21917,7 @@
       const themeRef = useTheme(
         "InternalSelection",
         "-internal-selection",
-        style$1I,
+        style$1H,
         internalSelectionLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -22823,7 +22998,7 @@
     })];
   }
 
-  var style$1H = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+  var style$1G = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -22942,7 +23117,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-slot-machine", style$1H, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-slot-machine", style$1G, vue.toRef(props, "clsPrefix"));
       const oldValueRef = vue.ref();
       const newValueRef = vue.ref();
       const numbersRef = vue.computed(() => {
@@ -22997,7 +23172,7 @@
     }
   });
 
-  function self$1s(vars) {
+  function self$1r(vars) {
     const {
       borderRadiusSmall,
       brandPrimary500,
@@ -23033,10 +23208,10 @@
   }
   const typographyLight$1 = {
     common: derived,
-    self: self$1s
+    self: self$1r
   };
 
-  var style$1G = cB("text", `
+  var style$1F = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -23344,7 +23519,7 @@
       const themeRef = useTheme(
         "Typography",
         "-text",
-        style$1G,
+        style$1F,
         typographyLight$1,
         props,
         mergedClsPrefixRef
@@ -23432,7 +23607,7 @@
     }
   });
 
-  var style$1F = cB("base-wave", `
+  var style$1E = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -23450,7 +23625,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-wave", style$1F, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-wave", style$1E, vue.toRef(props, "clsPrefix"));
       const selfRef = vue.ref(null);
       const activeRef = vue.ref(false);
       let animationTimerId = null;
@@ -23495,142 +23670,6 @@
     }
   });
 
-  function self$1r(vars) {
-    const {
-      elementsPrimary
-    } = vars;
-    return {
-      color: elementsPrimary,
-      opacity1Depth: "0.82",
-      opacity2Depth: "0.72",
-      opacity3Depth: "0.38",
-      opacity4Depth: "0.24",
-      opacity5Depth: "0.18"
-    };
-  }
-  const iconLight = {
-    name: "Icon",
-    common: derived,
-    self: self$1r
-  };
-
-  const iconDark$1 = {
-    name: "Icon",
-    common: derived$1,
-    self: self$1r
-  };
-
-  var style$1E = cB("icon", `
-  height: 1em;
-  width: 1em;
-  line-height: 1em;
-  text-align: center;
-  display: inline-block;
-  position: relative;
-  fill: currentColor;
-  transform: translateZ(0);
-`, [cM("color-transition", {
-    transition: "color .3s var(--u-bezier)"
-  }), cM("depth", {
-    color: "var(--u-color)"
-  }, [c$1("svg", {
-    opacity: "var(--u-opacity)",
-    transition: "opacity .3s var(--u-bezier)"
-  })]), c$1("svg", {
-    height: "100%",
-    width: "100%",
-    display: "block"
-  })]);
-
-  const iconProps = {
-    ...useTheme.props,
-    depth: [String, Number],
-    size: [Number, String],
-    color: String,
-    component: Object,
-    onClick: Function
-  };
-  const UIcon$1 = vue.defineComponent({
-    _n_icon__: true,
-    name: "Icon",
-    inheritAttrs: false,
-    props: iconProps,
-    setup(props) {
-      const {
-        mergedClsPrefixRef,
-        inlineThemeDisabled
-      } = useConfig(props);
-      const themeRef = useTheme("Icon", "-icon", style$1E, iconLight, props, mergedClsPrefixRef);
-      const cssVarsRef = vue.computed(() => {
-        const {
-          depth
-        } = props;
-        const {
-          common: {
-            cubicBezierEaseInOut
-          },
-          self
-        } = themeRef.value;
-        if (depth !== void 0) {
-          const {
-            color,
-            [`opacity${depth}Depth`]: opacity
-          } = self;
-          return {
-            "--u-bezier": cubicBezierEaseInOut,
-            "--u-color": color,
-            "--u-opacity": opacity
-          };
-        }
-        return {
-          "--u-bezier": cubicBezierEaseInOut,
-          "--u-color": "",
-          "--u-opacity": ""
-        };
-      });
-      const themeClassHandle = inlineThemeDisabled ? useThemeClass("icon", vue.computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
-      return {
-        mergedClsPrefix: mergedClsPrefixRef,
-        mergedStyle: vue.computed(() => {
-          const {
-            size,
-            color
-          } = props;
-          return {
-            fontSize: formatLength(size),
-            color
-          };
-        }),
-        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
-        themeClass: themeClassHandle?.themeClass,
-        onRender: themeClassHandle?.onRender
-      };
-    },
-    render() {
-      const {
-        $parent,
-        depth,
-        mergedClsPrefix,
-        component,
-        onRender,
-        themeClass
-      } = this;
-      if ($parent?.$options?._n_icon__) {
-        warn("icon", "don't wrap `u-icon` inside `u-icon`");
-      }
-      onRender?.();
-      return vue.h("i", vue.mergeProps(this.$attrs, {
-        role: "img",
-        class: [`${mergedClsPrefix}-icon`, themeClass, {
-          [`${mergedClsPrefix}-icon--depth`]: depth,
-          [`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
-        }],
-        style: [this.cssVars, this.mergedStyle],
-        onClick: this.onClick
-      }), component ? vue.h(component) : this.$slots);
-    }
-  });
-
   function self$1q(vars) {
     const {
       borderRadius,
@@ -25753,6 +25792,7 @@
       containerPrimary,
       elementsQuaternary,
       elementsPrimary,
+      staticGreen,
       staticOrange,
       staticRed,
       elementsQuinary,
@@ -25806,6 +25846,16 @@
       alpha: 0.1
     })}`,
       loadingColor: elementsPrimary,
+      // success
+      loadingColorSuccess: staticGreen,
+      borderSuccess: `2px solid ${staticGreen}`,
+      borderHoverSuccess: `2px solid ${staticGreen}`,
+      colorFocusSuccess: containerPrimary,
+      borderFocusSuccess: `2px solid ${staticGreen}`,
+      boxShadowFocusSuccess: `0 0 0 4px ${changeColor(staticGreen, {
+      alpha: 0.1
+    })}`,
+      caretColorSuccess: elementsPrimary,
       // warning
       loadingColorWarning: staticOrange,
       borderWarning: `2px solid ${staticOrange}`,
@@ -26108,7 +26158,7 @@
     transition: color .3s var(--u-bezier);
     margin-left: 4px;
     font-variant: tabular-nums;
-  `), ["warning", "error"].map(status => cM(`${status}-status`, [cNotM("disabled", [cB("base-loading", `
+  `), ["warning", "error", "success"].map(status => cM(`${status}-status`, [cNotM("disabled", [cB("base-loading", `
         color: var(--u-loading-color-${status})
       `), cE("input-el, textarea-el", `
         caret-color: var(--u-caret-color-${status});
@@ -28997,6 +29047,7 @@
             borderRadius,
             textColor,
             caretColor,
+            caretColorSuccess,
             caretColorError,
             caretColorWarning,
             textDecorationColor,
@@ -29012,6 +29063,11 @@
             textColorDisabled,
             boxShadowFocus,
             iconSize,
+            colorFocusSuccess,
+            boxShadowFocusSuccess,
+            borderSuccess,
+            borderFocusSuccess,
+            borderHoverSuccess,
             colorFocusWarning,
             boxShadowFocusWarning,
             borderWarning,
@@ -29034,6 +29090,7 @@
             iconColorHover,
             iconColorPressed,
             loadingColor,
+            loadingColorSuccess,
             loadingColorError,
             loadingColorWarning,
             selectionColor,
@@ -29072,6 +29129,14 @@
           "--u-text-color-disabled": textColorDisabled,
           "--u-box-shadow-focus": boxShadowFocus,
           "--u-loading-color": loadingColor,
+          // form success
+          "--u-caret-color-success": caretColorSuccess,
+          "--u-color-focus-success": colorFocusSuccess,
+          "--u-box-shadow-focus-success": boxShadowFocusSuccess,
+          "--u-border-success": borderSuccess,
+          "--u-border-focus-success": borderFocusSuccess,
+          "--u-border-hover-success": borderHoverSuccess,
+          "--u-loading-color-success": loadingColorSuccess,
           // form warning
           "--u-caret-color-warning": caretColorWarning,
           "--u-color-focus-warning": colorFocusWarning,
@@ -40288,8 +40353,9 @@
       const slideSizesTrigger = vue.ref(0);
       const slideSizesRef = vue.computed(() => {
         const { value: slidesEls } = slideElsRef;
-        if (!slidesEls.length)
+        if (!slidesEls.length) {
           return [];
+        }
         slideSizesTrigger.value;
         const { value: autoSlideSize } = autoSlideSizeRef;
         if (autoSlideSize) {
@@ -40310,8 +40376,9 @@
       });
       const slideTranlatesRef = vue.computed(() => {
         const { value: slideSizes } = slideSizesRef;
-        if (!slideSizes.length)
+        if (!slideSizes.length) {
           return [];
+        }
         const { centeredSlides, spaceBetween } = props;
         const { value: axis } = sizeAxisRef;
         const { [axis]: perViewSize } = perViewSizeRef.value;
@@ -40335,8 +40402,9 @@
       );
       const slideStylesRef = vue.computed(() => {
         const { value: slidesEls } = slideElsRef;
-        if (!slidesEls.length)
+        if (!slidesEls.length) {
           return [];
+        }
         const useComputedSize = !(autoSlideSizeRef.value || realSlidesPerViewRef.value === 1);
         const getSlideSize = (index) => {
           if (useComputedSize) {
@@ -40371,8 +40439,9 @@
         } else {
           const { value: slideSizes } = slideSizesRef;
           const { length } = slideSizes;
-          if (!length)
+          if (!length) {
             return totalSlides;
+          }
           const { value: translates } = slideTranlatesRef;
           const { value: axis } = sizeAxisRef;
           const perViewSize = perViewSizeRef.value[axis];
@@ -40461,21 +40530,25 @@
       }
       function prev() {
         const prevIndex = getRealPrevIndex();
-        if (prevIndex !== null)
+        if (prevIndex !== null) {
           toRealIndex(prevIndex);
+        }
       }
       function next() {
         const nextIndex = getRealNextIndex();
-        if (nextIndex !== null)
+        if (nextIndex !== null) {
           toRealIndex(nextIndex);
+        }
       }
       function prevIfSlideTransitionEnd() {
-        if (!inTransition || !duplicatedableRef.value)
+        if (!inTransition || !duplicatedableRef.value) {
           prev();
+        }
       }
       function nextIfSlideTransitionEnd() {
-        if (!inTransition || !duplicatedableRef.value)
+        if (!inTransition || !duplicatedableRef.value) {
           next();
+        }
       }
       let previousTranslate = 0;
       const translateStyleRef = vue.ref({});
@@ -40551,13 +40624,15 @@
       };
       provideCarouselContext(carouselContext);
       function addSlide(slide) {
-        if (!slide)
+        if (!slide) {
           return;
+        }
         slideElsRef.value.push(slide);
       }
       function removeSlide(slide) {
-        if (!slide)
+        if (!slide) {
           return;
+        }
         const index = getSlideIndex(slide);
         if (index !== -1) {
           slideElsRef.value.splice(index, 1);
@@ -40611,8 +40686,9 @@
       let dragOffset = 0;
       let dragStartTime = 0;
       function handleTouchstart(event) {
-        if (globalDragging)
+        if (globalDragging) {
           return;
+        }
         if (!slidesElRef.value?.contains(
           getPreciseEventTarget(event)
         )) {
@@ -40728,8 +40804,9 @@
       }
       function handleMousewheel(event) {
         event.preventDefault();
-        if (inTransition)
+        if (inTransition) {
           return;
+        }
         let { deltaX, deltaY } = event;
         if (event.shiftKey && !deltaX) {
           deltaX = deltaY;
@@ -40800,8 +40877,9 @@
       vue.watch(
         realIndexRef,
         (realIndex, lastRealIndex) => {
-          if (realIndex === lastRealIndex)
+          if (realIndex === lastRealIndex) {
             return;
+          }
           resetAutoplay();
           if (sequenceLayoutRef.value) {
             if (duplicatedableRef.value && displayTotalViewRef.value > 2) {
@@ -43991,6 +44069,7 @@
         ...originalInputSelf,
         color: elementsTertiary,
         colorFocus: elementsTertiary,
+        heightMedium: "45px",
         border: "none",
         borderFocus: "none",
         borderHover: "none",
@@ -53490,23 +53569,28 @@
             width: 100%;
             padding: 24px 20px 10px 24px;
             flex-shrink: 0;
+          `), cE("header-inner", `
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            align-items: flex-start;
+            gap: 8px;
+          `), cE("header-title-wrap", `
+            min-width: 0;
+            overflow: hidden;
           `), cE("header-title", `
             color: var(--u-header-title-color);
-            flex: 1;
-            min-width: 0;
+            display: block;
             overflow: hidden;
-            text-overflow: ellipsis;
             white-space: nowrap;
-            display: block;
-            margin-right: 16px;
+            text-overflow: ellipsis;
+            width: 100%;
           `), cE("header-subtitle", `
             display: block;
             color: var(--u-sidebar-item-subtitle-color);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            minWidth: 0;
-            maxWidth: 100%;
+            width: 100%;
           `), cE("header-actions", `
             padding: 4px;
             flex-shrink: 0;
@@ -53609,6 +53693,7 @@
               height: 44px;
             `)]), cE("message-text", `
             padding: 12px 16px;
+            white-space: pre-wrap;
           `), cE("message-attachment", `
             display: flex;
             align-items: center;
@@ -53685,6 +53770,7 @@
           `, [c$1(".u-input-wrapper", `
               flex-wrap: wrap;
               padding: 0 4px;
+              height: 100%;
             `, [c$1(".u-input__prefix", `
                 width: 100%;
                 margin: 0;
@@ -53695,13 +53781,20 @@
                   border-top-right-radius: 12px;
                 `), c$1("li", `
                   padding: 12px;
-                `)]), c$1(".u-input__input-el", `
-                padding: 8px;
+                `)]), c$1(".u-input__textarea-el", `
+                padding-top: 12px;
+                padding-left: 12px;
+                padding-right: 48px;
               `), c$1(".u-input__placeholder", `
-                margin: 8px;
+                padding-top: 12px;
+                padding-left: 12px;
+                padding-right: 48px;
               `)])]), cE("editing-block", `
             width: 100%;
           `), cE("input-suffix", `
+            position: absolute;
+            right: 12px;
+            bottom: 12px;
             color: var(--u-input-suffix-color) !important;
             cursor: pointer;
             margin-right: 4px;
@@ -54522,152 +54615,153 @@
         return value != null ? String(value) : "";
       };
       const renderHeader = () => {
-        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h(_UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
-          default: () => {
-            const chat = selectedChatRef.value;
-            const keyId = toKeyString(chat?.id);
-            const keyTitle = toKeyString(chat?.title);
-            return /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(_UFlex, { vertical: true, size: [0, 0], justify: "flex-start" }, {
-              default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
-                _UText,
-                {
-                  key: `${keyId}-${keyTitle}`,
-                  variant: "heading-s-bold",
-                  class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
-                  theme: mergedThemeRef.value.peers.Typography,
-                  themeOverrides: mergedThemeRef.value.peerOverrides.Typography
-                },
-                {
-                  default: () => selectedChatRef.value?.title ?? ""
-                }
-              ), isTyping.value && /* @__PURE__ */ vue.h(
-                _UText,
-                {
-                  class: [
-                    `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
-                    "typing"
-                  ],
-                  variant: "body-m-medium"
-                },
-                {
-                  default: () => typingTextRef.value ?? ""
-                }
-              ))
-            }), /* @__PURE__ */ vue.h(
-              _UFlex,
-              {
-                align: "center",
-                size: "small",
-                class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
-              },
-              {
-                default: () => resolveSlot(slots.headerActions, () => {
-                  const shareButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerShareButtonPropsRef.value
-                  };
-                  const profileButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerProfileButtonPropsRef.value
-                  };
-                  const closeButtonProps = {
-                    ...headerButtonPropsRef.value,
-                    ...headerCloseButtonPropsRef.value
-                  };
-                  const shareIconProps = {
-                    ...headerIconPropsRef.value,
-                    ...headerShareIconPropsRef.value
-                  };
-                  const profileIconProps = {
-                    ...headerIconPropsRef.value,
-                    ...headerProfileIconPropsRef.value
-                  };
-                  const buttons = [];
-                  buttons.push(
-                    /* @__PURE__ */ vue.h(_UTooltip, null, {
-                      trigger: () => /* @__PURE__ */ vue.h(
-                        Button,
+        const chat = selectedChatRef.value;
+        const keyId = toKeyString(chat?.id);
+        const keyTitle = toKeyString(chat?.title);
+        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` }, /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap`
+          },
+          /* @__PURE__ */ vue.h(
+            _UText,
+            {
+              key: `${keyId}-${keyTitle}`,
+              variant: "heading-s-bold",
+              class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
+              theme: mergedThemeRef.value.peers.Typography,
+              themeOverrides: mergedThemeRef.value.peerOverrides.Typography
+            },
+            {
+              default: () => selectedChatRef.value?.title ?? ""
+            }
+          ),
+          isTyping.value && /* @__PURE__ */ vue.h(
+            _UText,
+            {
+              class: [
+                `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                "typing"
+              ],
+              variant: "body-m-medium"
+            },
+            {
+              default: () => typingTextRef.value ?? ""
+            }
+          )
+        ), /* @__PURE__ */ vue.h(
+          _UFlex,
+          {
+            align: "center",
+            size: "small",
+            class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
+          },
+          {
+            default: () => resolveSlot(slots.headerActions, () => {
+              const shareButtonProps = {
+                ...headerButtonPropsRef.value,
+                ...headerShareButtonPropsRef.value
+              };
+              const profileButtonProps = {
+                ...headerButtonPropsRef.value,
+                ...headerProfileButtonPropsRef.value
+              };
+              const closeButtonProps = {
+                ...headerButtonPropsRef.value,
+                ...headerCloseButtonPropsRef.value
+              };
+              const shareIconProps = {
+                ...headerIconPropsRef.value,
+                ...headerShareIconPropsRef.value
+              };
+              const profileIconProps = {
+                ...headerIconPropsRef.value,
+                ...headerProfileIconPropsRef.value
+              };
+              const buttons = [];
+              buttons.push(
+                /* @__PURE__ */ vue.h(_UTooltip, null, {
+                  trigger: () => /* @__PURE__ */ vue.h(
+                    Button,
+                    {
+                      secondary: true,
+                      circle: true,
+                      size: "large",
+                      ...shareButtonProps,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                      onClick: () => onChatShare?.value?.()
+                    },
+                    {
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon$1,
                         {
-                          secondary: true,
-                          circle: true,
-                          size: "large",
-                          ...shareButtonProps,
-                          theme: mergedThemeRef.value.peers.Button,
-                          themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                          onClick: () => onChatShare?.value?.()
+                          size: 20,
+                          ...shareIconProps,
+                          theme: mergedThemeRef.value.peers.HeaderShareIcon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.HeaderShareIcon
                         },
                         {
-                          default: () => /* @__PURE__ */ vue.h(
-                            UIcon$1,
-                            {
-                              size: 20,
-                              ...shareIconProps,
-                              theme: mergedThemeRef.value.peers.HeaderShareIcon,
-                              themeOverrides: mergedThemeRef.value.peerOverrides.HeaderShareIcon
-                            },
-                            {
-                              default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
-                            }
-                          )
+                          default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
                         }
-                      ),
-                      default: () => shareButtonTooltipRef.value
-                    })
-                  );
-                  buttons.push(
-                    /* @__PURE__ */ vue.h(_UTooltip, null, {
-                      trigger: () => /* @__PURE__ */ vue.h(
-                        Button,
+                      )
+                    }
+                  ),
+                  default: () => shareButtonTooltipRef.value
+                })
+              );
+              buttons.push(
+                /* @__PURE__ */ vue.h(_UTooltip, null, {
+                  trigger: () => /* @__PURE__ */ vue.h(
+                    Button,
+                    {
+                      secondary: true,
+                      circle: true,
+                      size: "large",
+                      ...profileButtonProps,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                      onClick: () => onUserProfile?.value?.()
+                    },
+                    {
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon$1,
                         {
-                          secondary: true,
-                          circle: true,
-                          size: "large",
-                          ...profileButtonProps,
-                          theme: mergedThemeRef.value.peers.Button,
-                          themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                          onClick: () => onUserProfile?.value?.()
+                          size: 20,
+                          ...profileIconProps,
+                          theme: mergedThemeRef.value.peers.HeaderProfileIcon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.HeaderProfileIcon
                         },
                         {
-                          default: () => /* @__PURE__ */ vue.h(
-                            UIcon$1,
-                            {
-                              size: 20,
-                              ...profileIconProps,
-                              theme: mergedThemeRef.value.peers.HeaderProfileIcon,
-                              themeOverrides: mergedThemeRef.value.peerOverrides.HeaderProfileIcon
-                            },
-                            {
-                              default: () => /* @__PURE__ */ vue.h(PersonNote, null)
-                            }
-                          )
+                          default: () => /* @__PURE__ */ vue.h(PersonNote, null)
                         }
-                      ),
-                      default: () => profileButtonTooltipRef.value
-                    })
-                  );
-                  buttons.push(
-                    /* @__PURE__ */ vue.h(
-                      Button,
-                      {
-                        type: "primary",
-                        size: "large",
-                        round: true,
-                        ...closeButtonProps,
-                        theme: mergedThemeRef.value.peers.Button,
-                        themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                        onClick: () => onChatClose?.value?.()
-                      },
-                      {
-                        default: () => closeButtonTextRef.value
-                      }
-                    )
-                  );
-                  return buttons;
+                      )
+                    }
+                  ),
+                  default: () => profileButtonTooltipRef.value
                 })
-              }
-            ));
+              );
+              buttons.push(
+                /* @__PURE__ */ vue.h(
+                  Button,
+                  {
+                    type: "primary",
+                    size: "large",
+                    round: true,
+                    ...closeButtonProps,
+                    theme: mergedThemeRef.value.peers.Button,
+                    themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                    onClick: () => onChatClose?.value?.()
+                  },
+                  {
+                    default: () => closeButtonTextRef.value
+                  }
+                )
+              );
+              return buttons;
+            })
           }
-        }));
+        ));
       };
       const renderMessages = () => {
         return /* @__PURE__ */ vue.h(
@@ -54722,7 +54816,7 @@
         if (isSending.value) {
           return;
         }
-        const hasContent = inputValue.value.trim();
+        const hasContent = inputValue.value;
         const hasAttachments = attachmentFileList.value.length > 0;
         if (editMessageIdRef?.value && hasContent) {
           isSending.value = true;
@@ -54731,7 +54825,7 @@
             if (messageToEdit) {
               const updatedMessage = {
                 ...messageToEdit,
-                content: inputValue.value.trim()
+                content: inputValue.value
               };
               const bubbleActions = bubbleActionsRef?.value;
               if (bubbleActions) {
@@ -54784,7 +54878,7 @@
               }
               return result;
             })() : void 0;
-            handleMessageSend(inputValue.value.trim(), attachments);
+            handleMessageSend(inputValue.value, attachments);
             inputValue.value = "";
             attachmentFileList.value = [];
             chatInputs.value[selectedChatRef.value.id] = "";
@@ -54925,9 +55019,13 @@
                     value: inputValue.value,
                     placeholder: inputPlaceholderRef.value,
                     class: `${mergedClsPrefixRef.value}-chat-main__input`,
-                    ...footerInputPropsRef.value,
                     theme: mergedThemeRef.value.peers.Input,
                     themeOverrides: mergedThemeRef.value.peerOverrides.Input,
+                    type: "textarea",
+                    autosize: {
+                      minRows: 1,
+                      maxRows: 5
+                    },
                     onUpdateValue: (value) => {
                       inputValue.value = value;
                       if (selectedChatRef.value) {
@@ -54940,7 +55038,8 @@
                         e.stopPropagation();
                         void handleSendMessage();
                       }
-                    }
+                    },
+                    ...footerInputPropsRef.value
                   },
                   {
                     prefix: () => renderEditingBlock(),
@@ -59776,6 +59875,7 @@
     themeOverrides: Object,
     componentOptions: Object,
     icons: Object,
+    iconPacks: Object,
     breakpoints: Object,
     breakpointProps: Object,
     breakpointThemeOverrides: Object,
@@ -59918,6 +60018,12 @@
         } = props;
         return icons === void 0 ? UConfigProvider?.mergedIconsRef.value : icons;
       });
+      const mergedIconPacksRef = vue.computed(() => {
+        const {
+          iconPacks
+        } = props;
+        return iconPacks === void 0 ? UConfigProvider?.mergedIconPacksRef.value : iconPacks;
+      });
       const updateWindowWidth = () => {
         if (isBrowser$1) {
           windowWidthRef.value = window.innerWidth;
@@ -60026,6 +60132,7 @@
         mergedSsrBreakpointWidthRef,
         mergedRtlRef,
         mergedIconsRef,
+        mergedIconPacksRef,
         mergedComponentPropsRef,
         mergedBreakpointPropsRef,
         mergedBreakpointThemeOverridesRef,
@@ -80823,7 +80930,6 @@
   const presetProps = {
     // put dialog props after since I want the card to unbordered by default
     ...dialogProps,
-    presetDisabled: Boolean,
     size: {
       type: String,
       default: "medium"
@@ -81194,7 +81300,10 @@
       type: Boolean,
       default: true
     },
-    preset: String,
+    preset: {
+      type: String,
+      default: "dialog"
+    },
     to: [String, Object],
     displayDirective: {
       type: String,
@@ -81456,7 +81565,7 @@
                   ref: "bodyWrapper",
                   displayDirective: this.displayDirective,
                   show: this.show,
-                  preset: this.preset,
+                  preset: this.internalDialog ? void 0 : this.preset,
                   autoFocus: this.autoFocus,
                   trapFocus: this.trapFocus,
                   draggable: this.draggable,
@@ -81654,8 +81763,7 @@
           transformOrigin: this.transformOrigin,
           draggable: this.draggable,
           internalAppear: true,
-          internalDialog: true,
-          presetDisabled: true
+          internalDialog: true
         },
         {
           default: () => /* @__PURE__ */ vue.h(
@@ -95109,6 +95217,10 @@
       type: Boolean,
       default: false
     },
+    hideHeaderActions: {
+      type: Boolean,
+      default: false
+    },
     copyButtonProps: Object,
     copyIconProps: Object,
     headerEditButtonProps: Object,
@@ -95742,7 +95854,7 @@
             default: () => locale.copyTooltip
           }))
         }
-      ), /* @__PURE__ */ vue.h(_UFlex, { align: "center", size: "small" }, {
+      ), !props.hideHeaderActions && /* @__PURE__ */ vue.h(_UFlex, { align: "center", size: "small" }, {
         default: () => resolveSlot(slots.headerActions, () => {
           const buttons = [];
           buttons.push(
@@ -112286,7 +112398,7 @@
     });
   }
 
-  var version = "2.0.0-beta.8";
+  var version = "2.0.0";
 
   function create({
     componentPrefix = "U",