@uzum-tech/ui 1.8.1 → 1.8.2

package/dist/index.js

@@ -31800,7 +31800,7 @@
         const scrollTo = (options, y) => {
           if (!props.scrollable) return;
           if (typeof options === "number") {
-            scrollToPosition(y ?? 0, options, 0, false, "auto");
+            scrollToPosition(options, y ?? 0, 0, false, "auto");
             return;
           }
           const {
@@ -37880,8 +37880,8 @@
       const successPress = "#0f9b42";
       const warningHover = "#f79942";
       const warningPress = "#df7a1d";
-      const errorHover = "#f75e4d";
-      const errorPress = "#e53a27";
+      const errorHover = "#cb0000";
+      const errorDisable = "#f8a39a";
       return {
         ...commonVariables$5,
         heightTiny: heightMini,
@@ -37903,20 +37903,28 @@
         colorOpacitySecondaryPressed: "0.28",
         colorOpacitySecondaryFocus: "0.27",
         colorSecondary: elementsTertiary,
-        colorSecondaryHover: elementsTertiary,
+        colorSecondaryHover: elementsQuaternary,
         colorSecondaryPressed: elementsTertiary,
+        colorSecondaryFocus: elementsTertiary,
+        colorSecondaryDisabled: elementsTertiary,
+        textColorSecondaryDisabled: elementsQuinary,
         waveColorSecondary: elementsQuinary,
         // tertiary
         colorTertiary: elementsPrimary,
         colorTertiaryHover: elementsSenary,
         colorTertiaryPressed: elementsPrimary,
-        colorTertiaryDisalbed: elementsTertiary,
-        waveColorTertiary: elementsTertiary,
+        colorTertiaryFocus: elementsPrimary,
+        colorTertiaryDisalbed: elementsQuinary,
+        waveColorTertiary: elementsQuinary,
         textColorTextTertiary: textQuaternary,
+        rippleColorTertiary: elementsQuinary,
         // quaternary
         colorQuaternary: "#0000",
-        colorQuaternaryHover: elementsTertiary,
-        colorQuaternaryPressed: elementsQuaternary,
+        colorQuaternaryHover: elementsQuaternary,
+        colorQuaternaryPressed: "#0000",
+        colorQuaternaryFocus: "#0000",
+        rippleColorQuaternary: elementsQuinary,
+        waveColorQuaternary: elementsQuinary,
         // default type
         color: "#0000",
         colorHover: "#0000",
@@ -37948,10 +37956,10 @@
         rippleColor: brandPrimary500,
         // primary
         colorPrimary: brandPrimary500,
-        colorHoverPrimary: brandPrimary400,
-        colorPressedPrimary: brandPrimary600,
-        colorFocusPrimary: brandPrimary400,
-        colorDisabledPrimary: brandPrimary500,
+        colorHoverPrimary: brandPrimary600,
+        colorPressedPrimary: brandPrimary500,
+        colorFocusPrimary: brandPrimary500,
+        colorDisabledPrimary: brandPrimary300,
         waveColorPrimary: brandPrimary300,
         textColorPrimary: staticWhite,
         textColorHoverPrimary: staticWhite,
@@ -37959,21 +37967,21 @@
         textColorFocusPrimary: staticWhite,
         textColorDisabledPrimary: staticWhite,
         textColorTextPrimary: brandPrimary500,
-        textColorTextHoverPrimary: brandPrimary400,
-        textColorTextPressedPrimary: brandPrimary600,
-        textColorTextFocusPrimary: brandPrimary400,
-        textColorTextDisabledPrimary: textTertiary,
+        textColorTextHoverPrimary: brandPrimary600,
+        textColorTextPressedPrimary: brandPrimary300,
+        textColorTextFocusPrimary: brandPrimary300,
+        textColorTextDisabledPrimary: brandPrimary300,
         textColorGhostPrimary: brandPrimary500,
-        textColorGhostHoverPrimary: brandPrimary400,
-        textColorGhostPressedPrimary: brandPrimary600,
-        textColorGhostFocusPrimary: brandPrimary400,
-        textColorGhostDisabledPrimary: brandPrimary500,
+        textColorGhostHoverPrimary: brandPrimary600,
+        textColorGhostPressedPrimary: brandPrimary500,
+        textColorGhostFocusPrimary: brandPrimary500,
+        textColorGhostDisabledPrimary: brandPrimary300,
         borderPrimary: `2px solid ${brandPrimary500}`,
-        borderHoverPrimary: `2px solid ${brandPrimary400}`,
-        borderPressedPrimary: `2px solid ${brandPrimary600}`,
-        borderFocusPrimary: `2px solid ${brandPrimary400}`,
-        borderDisabledPrimary: `2px solid ${brandPrimary500}`,
-        rippleColorPrimary: brandPrimary500,
+        borderHoverPrimary: `2px solid ${brandPrimary600}`,
+        borderPressedPrimary: `2px solid ${brandPrimary500}`,
+        borderFocusPrimary: `2px solid ${brandPrimary500}`,
+        borderDisabledPrimary: `2px solid ${brandPrimary300}`,
+        rippleColorPrimary: brandPrimary300,
         // info
         colorInfo: brandQuaternary500,
         colorHoverInfo: brandQuaternary300,
@@ -38058,9 +38066,9 @@
         // error
         colorError: staticRed,
         colorHoverError: errorHover,
-        colorPressedError: errorPress,
-        colorFocusError: errorHover,
-        colorDisabledError: staticRed,
+        colorPressedError: staticRed,
+        colorFocusError: staticRed,
+        colorDisabledError: errorDisable,
         textColorError: staticWhite,
         textColorHoverError: staticWhite,
         textColorPressedError: staticWhite,
@@ -38068,20 +38076,20 @@
         textColorDisabledError: staticWhite,
         textColorTextError: staticRed,
         textColorTextHoverError: errorHover,
-        textColorTextPressedError: errorPress,
-        textColorTextFocusError: errorHover,
-        textColorTextDisabledError: textTertiary,
+        textColorTextPressedError: staticRed,
+        textColorTextFocusError: staticRed,
+        textColorTextDisabledError: errorDisable,
         textColorGhostError: staticRed,
         textColorGhostHoverError: errorHover,
-        textColorGhostPressedError: errorPress,
-        textColorGhostFocusError: errorHover,
-        textColorGhostDisabledError: staticRed,
+        textColorGhostPressedError: staticRed,
+        textColorGhostFocusError: staticRed,
+        textColorGhostDisabledError: errorDisable,
         borderError: `2px solid ${staticRed}`,
         borderHoverError: `2px solid ${errorHover}`,
-        borderPressedError: `2px solid ${errorPress}`,
-        borderFocusError: `2px solid ${errorHover}`,
-        borderDisabledError: `2px solid ${staticRed}`,
-        rippleColorError: staticRed,
+        borderPressedError: `2px solid ${staticRed}`,
+        borderFocusError: `2px solid ${staticRed}`,
+        borderDisabledError: `2px solid ${errorDisable}`,
+        rippleColorError: errorDisable,
         waveOpacity: "0.6",
         fontWeight,
         fontWeightStrong
@@ -38129,6 +38137,7 @@
         borderRadiusLarge,
         closeMedium,
         iconMedium,
+        iconLarge,
         fontWeight,
         staticBlack,
         staticWhite,
@@ -38138,10 +38147,10 @@
         brandPrimary500,
         brandSecondary600,
         staticRed,
-        elementsTertiary,
-        textPrimary,
+        elementsQuinary,
         transparencySecondary,
-        transparencyPrimary
+        transparencyPrimary,
+        elementsDarkQuinary
       } = vars;
       return {
         ...commonVars$5,
@@ -38158,47 +38167,53 @@
         borderRadius: borderRadiusLarge,
         closeSize: closeMedium,
         closeIconSize: iconMedium,
-        avatarSize: iconMedium,
+        avatarSize: iconLarge,
         closeMargin: "12px",
         // Default
-        color: staticBlack,
-        iconColor: staticWhite,
-        textColor: staticWhite,
-        closeIconColor: staticWhite,
-        closeIconColorHover: staticWhite,
-        closeIconColorPressed: staticWhite,
+        color: staticWhite,
+        iconColor: elementsDarkQuinary,
+        textColor: staticBlack,
+        closeIconColor: staticBlack,
+        closeIconColorHover: staticBlack,
+        closeIconColorPressed: staticBlack,
         closeColorHover: transparencyTertiary,
         closeColorPressed: transparencyQuinary,
-        titleTextColor: staticWhite,
-        descriptionTextColor: staticWhite,
-        actionTextColor: staticWhite,
+        titleTextColor: staticBlack,
+        descriptionTextColor: staticBlack,
+        actionTextColor: staticBlack,
+        iconWrapperColor: "rgb(16 16 16 / 8%)",
+        iconWrapperPulseColor: "rgb(16 16 16 / 4%)",
         // Success
-        colorSuccess: staticGreen,
-        iconColorSuccess: staticWhite,
-        textColorSuccess: staticWhite,
-        closeIconColorSuccess: staticWhite,
-        closeIconColorHoverSuccess: staticWhite,
-        closeIconColorPressedSuccess: staticWhite,
+        colorSuccess: staticWhite,
+        iconColorSuccess: staticGreen,
+        textColorSuccess: staticBlack,
+        closeIconColorSuccess: staticBlack,
+        closeIconColorHoverSuccess: staticBlack,
+        closeIconColorPressedSuccess: staticBlack,
         closeColorHoverSuccess: transparencyTertiary,
         closeColorPressedSuccess: transparencyQuinary,
-        titleTextColorSuccess: staticWhite,
-        descriptionTextColorSuccess: staticWhite,
-        actionTextColorSuccess: staticWhite,
+        titleTextColorSuccess: staticBlack,
+        descriptionTextColorSuccess: staticBlack,
+        actionTextColorSuccess: staticBlack,
+        iconWrapperColorSuccess: derived.brandTertiary300,
+        iconWrapperPulseColorSuccess: derived.brand350,
         // Info
-        colorInfo: elementsTertiary,
-        iconColorInfo: textPrimary,
-        textColorInfo: textPrimary,
-        closeIconColorInfo: textPrimary,
-        closeIconColorHoverInfo: textPrimary,
-        closeIconColorPressedInfo: textPrimary,
+        colorInfo: staticWhite,
+        iconColorInfo: elementsQuinary,
+        textColorInfo: staticBlack,
+        closeIconColorInfo: staticBlack,
+        closeIconColorHoverInfo: staticBlack,
+        closeIconColorPressedInfo: staticBlack,
         closeColorHoverInfo: transparencySecondary,
         closeColorPressedInfo: transparencyPrimary,
-        titleTextColorInfo: textPrimary,
-        descriptionTextColorInfo: textPrimary,
-        actionTextColorInfo: textPrimary,
+        titleTextColorInfo: staticBlack,
+        descriptionTextColorInfo: staticBlack,
+        actionTextColorInfo: staticBlack,
+        iconWrapperColorInfo: "rgb(197 199 202 / 36%)",
+        iconWrapperPulseColorInfo: "rgb(197 199 202 / 14%)",
         // Warning
-        colorWarning: brandSecondary600,
-        iconColorWarning: staticBlack,
+        colorWarning: staticWhite,
+        iconColorWarning: brandSecondary600,
         textColorWarning: staticBlack,
         closeIconColorWarning: staticBlack,
         closeIconColorHoverWarning: staticBlack,
@@ -38208,30 +38223,36 @@
         titleTextColorWarning: staticBlack,
         descriptionTextColorWarning: staticBlack,
         actionTextColorWarning: staticBlack,
+        iconWrapperColorWarning: "rgb(249 222 109 / 28%)",
+        iconWrapperPulseColorWarning: "rgb(249 222 109 / 18%)",
         // Error
-        colorError: staticRed,
-        iconColorError: staticWhite,
-        textColorError: staticWhite,
-        closeIconColorError: staticWhite,
-        closeIconColorHoverError: staticWhite,
-        closeIconColorPressedError: staticWhite,
+        colorError: staticWhite,
+        iconColorError: staticRed,
+        textColorError: staticBlack,
+        closeIconColorError: staticBlack,
+        closeIconColorHoverError: staticBlack,
+        closeIconColorPressedError: staticBlack,
         closeColorHoverError: transparencyTertiary,
         closeColorPressedError: transparencyQuinary,
-        titleTextColorError: staticWhite,
-        descriptionTextColorError: staticWhite,
-        actionTextColorError: staticWhite,
+        titleTextColorError: staticBlack,
+        descriptionTextColorError: staticBlack,
+        actionTextColorError: staticBlack,
+        iconWrapperColorError: derived.brandQuinary100,
+        iconWrapperPulseColorError: derived.brand550,
         // Primary
-        colorPrimary: brandPrimary500,
-        iconColorPrimary: staticWhite,
-        textColorPrimary: staticWhite,
-        closeIconColorPrimary: staticWhite,
-        closeIconColorHoverPrimary: staticWhite,
-        closeIconColorPressedPrimary: staticWhite,
+        colorPrimary: staticWhite,
+        iconColorPrimary: brandPrimary500,
+        textColorPrimary: staticBlack,
+        closeIconColorPrimary: staticBlack,
+        closeIconColorHoverPrimary: staticBlack,
+        closeIconColorPressedPrimary: staticBlack,
         closeColorHoverPrimary: transparencyTertiary,
         closeColorPressedPrimary: transparencyQuinary,
-        titleTextColorPrimary: staticWhite,
-        descriptionTextColorPrimary: staticWhite,
-        actionTextColorPrimary: staticWhite
+        titleTextColorPrimary: staticBlack,
+        descriptionTextColorPrimary: staticBlack,
+        actionTextColorPrimary: staticBlack,
+        iconWrapperColorPrimary: derived.brandPrimary100,
+        iconWrapperPulseColorPrimary: derived.brandPrimary50
       };
     };
     const notificationLight = createTheme$1({
@@ -41869,9 +41890,9 @@
         fontBodyMedium,
         lineHeightBodyMedium,
         borderRadiusLarge,
-        elementsQuinary,
         containerSecondary,
-        brandPrimary300
+        brandPrimary300,
+        brandPrimary500
       } = vars;
       return {
         baseColor: containerPrimary,
@@ -41879,8 +41900,9 @@
         lineHeight: lineHeightBodyMedium,
         borderRadius: borderRadiusLarge,
         draggerColor: elementsTertiary,
-        draggerBorder: `2px dashed ${elementsQuaternary}`,
-        draggerBorderHover: `2px dashed ${elementsQuinary}`,
+        draggerBorder: `1px dashed ${brandPrimary500}`,
+        draggerBorderHover: `1px solid ${brandPrimary500}`,
+        draggerShadowFocus: `0 0 0 4px ${brandPrimary500}1a`,
         itemColorHover: elementsTertiary,
         itemColorHoverError: changeColor(staticRed, {
           alpha: 0.05
@@ -41890,8 +41912,8 @@
         itemTextColorSuccess: staticGreen,
         itemIconColor: elementsPrimary,
         itemDisabledOpacity: opacityDisabled,
-        itemBorderImageCardError: `2px solid ${staticRed}`,
-        itemBorderImageCard: `2px solid ${elementsQuaternary}`,
+        itemBorderImageCardError: `1px solid ${staticRed}`,
+        itemBorderImageCard: `1px solid ${elementsQuaternary}`,
         draggerIconBgColor: elementsTertiary,
         draggerIconColor: elementsPrimary,
         draggerTitleColor: textPrimary,
@@ -44148,8 +44170,7 @@
     `), cM("dashed", [cE("border, state-border", {
       borderStyle: "dashed !important"
     })]), cM("disabled", {
-      cursor: "not-allowed",
-      opacity: "var(--u-opacity-disabled)"
+      cursor: "not-allowed"
     })]), c$1("@keyframes button-wave-spread", {
       from: {
         boxShadow: "0 0 0.5px 0 var(--u-ripple-color)"
@@ -44374,7 +44395,7 @@
               "--u-text-color": mergedTextColor,
               "--u-text-color-hover": propTextColor ? createHoverColor(propTextColor) : self[createKey("textColorTextHover", mergedType)],
               "--u-text-color-pressed": propTextColor ? createPressedColor(propTextColor) : self[createKey("textColorTextPressed", mergedType)],
-              "--u-text-color-focus": propTextColor ? createHoverColor(propTextColor) : self[createKey("textColorTextHover", mergedType)],
+              "--u-text-color-focus": propTextColor ? createHoverColor(propTextColor) : self[createKey("textColorTextFocus", mergedType)],
               "--u-text-color-disabled": propTextColor || self[createKey("textColorTextDisabled", mergedType)]
             };
           } else if (ghost || dashed) {
@@ -44390,7 +44411,7 @@
               "--u-text-color": mergedTextColor || self[createKey("textColorGhost", mergedType)],
               "--u-text-color-hover": mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey("textColorGhostHover", mergedType)],
               "--u-text-color-pressed": mergedTextColor ? createPressedColor(mergedTextColor) : self[createKey("textColorGhostPressed", mergedType)],
-              "--u-text-color-focus": mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey("textColorGhostHover", mergedType)],
+              "--u-text-color-focus": mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey("textColorGhostFocus", mergedType)],
               "--u-text-color-disabled": mergedTextColor || self[createKey("textColorGhostDisabled", mergedType)]
             };
           } else if (secondary) {
@@ -44409,7 +44430,7 @@
               }) : self.colorSecondaryPressed,
               "--u-color-focus": isColoredType ? changeColor(mergedTextColor, {
                 alpha: Number(self.colorOpacitySecondaryHover)
-              }) : self.colorSecondaryHover,
+              }) : self.colorSecondaryFocus,
               "--u-color-focus-visible": isColoredType ? changeColor(mergedTextColor, {
                 alpha: +self.colorOpacitySecondaryFocus
               }) : self.waveColorSecondary,
@@ -44419,12 +44440,12 @@
               "--u-text-color-hover": mergedTextColor,
               "--u-text-color-pressed": mergedTextColor,
               "--u-text-color-focus": mergedTextColor,
-              "--u-text-color-disabled": mergedTextColor
+              "--u-text-color-disabled": isColoredType ? mergedTextColor : self.textColorSecondaryDisabled
             };
           } else if (tertiary || quaternary) {
             const typeColor = typeIsDefault ? self.textColor : typeIsTertiary ? self.textColorTertiary : self[createKey("color", mergedType)];
             const mergedColor = color || typeColor;
-            colorProps["--u-ripple-color"] = "#0000";
+            colorProps["--u-text-color"] = mergedColor;
             colorProps["--u-text-color"] = mergedColor;
             colorProps["--u-text-color-hover"] = mergedColor;
             colorProps["--u-text-color-pressed"] = mergedColor;
@@ -44434,7 +44455,7 @@
               colorProps["--u-color"] = self.colorTertiary;
               colorProps["--u-color-hover"] = self.colorTertiaryHover;
               colorProps["--u-color-pressed"] = self.colorTertiaryPressed;
-              colorProps["--u-color-focus"] = self.colorTertiaryPressed;
+              colorProps["--u-color-focus"] = self.colorTertiaryFocus;
               colorProps["--u-color-disabled"] = self.colorTertiaryDisalbed;
               colorProps["--u-ripple-color"] = self.colorTertiary;
               colorProps["--u-text-color"] = self.textColorTextTertiary;
@@ -44443,12 +44464,15 @@
               colorProps["--u-text-color-focus"] = self.textColorTextTertiary;
               colorProps["--u-text-color-disabled"] = self.textColorTextTertiary;
               colorProps["--u-color-focus-visible"] = self.waveColorTertiary;
+              colorProps["--u-ripple-color"] = self.rippleColorTertiary;
             } else {
               colorProps["--u-color"] = self.colorQuaternary;
               colorProps["--u-color-hover"] = self.colorQuaternaryHover;
               colorProps["--u-color-pressed"] = self.colorQuaternaryPressed;
-              colorProps["--u-color-focus"] = self.colorQuaternaryHover;
+              colorProps["--u-color-focus"] = self.colorQuaternaryFocus;
               colorProps["--u-color-disabled"] = self.colorQuaternary;
+              colorProps["--u-ripple-color"] = self.rippleColorQuaternary;
+              colorProps["--u-color-focus-visible"] = self.waveColorQuaternary;
             }
           } else {
             colorProps = {
@@ -59743,9 +59767,7 @@
 
     var style$12 = cB("chat", `
   height: 100%;
-  max-height: 100%;
-  min-height: 0;
-  display: flex;
+  background-color: transparent;
   box-sizing: border-box;
   .u-list-item__text {
     grid-template-columns: 1fr !important;
@@ -60495,14 +60517,16 @@
               }
             );
           }
-          return /* @__PURE__ */ vue.h(
-            UEmpty,
-            {
-              ...this.emptyProps,
-              theme: this.mergedTheme.peers.Empty,
-              themeOverrides: this.mergedTheme.peerOverrides.Empty
-            }
-          );
+          return /* @__PURE__ */ vue.h(UFlex, { justify: "center", align: "center", vertical: true }, {
+            default: () => /* @__PURE__ */ vue.h(
+              UEmpty,
+              {
+                ...this.emptyProps,
+                theme: this.mergedTheme.peers.Empty,
+                themeOverrides: this.mergedTheme.peerOverrides.Empty
+              }
+            )
+          });
         })();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -61181,8 +61205,12 @@
         handleDownloadClick,
         capitalizeFirstLetter
       } = opts;
+      const getExt = (name) => {
+        const i = name.lastIndexOf(".");
+        return i === -1 || i === name.length - 1 ? "" : name.slice(i + 1);
+      };
       const isImageType = ["image", "image-card"].includes(listType);
-      const fileExt = file.name.split(".").at(-1) || "";
+      const fileExt = getExt(file.name);
       const capitalizedExt = capitalizeFirstLetter(fileExt);
       const icon = vue.h(
         "div",
@@ -62555,6 +62583,7 @@
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
         border: var(--u-dragger-border-hover);
+        box-shadow: var(--u-dragger-shadow-focus);
       `)]), cE("label", {
       marginBottom: "12px",
       marginTop: 0,
@@ -63534,6 +63563,7 @@
               draggerColor,
               draggerBorder,
               draggerBorderHover,
+              draggerShadowFocus,
               itemColorHover,
               itemColorHoverError,
               itemTextColorError,
@@ -63563,6 +63593,7 @@
             "--u-border-radius": borderRadius,
             "--u-dragger-border": draggerBorder,
             "--u-dragger-border-hover": draggerBorderHover,
+            "--u-dragger-shadow-focus": draggerShadowFocus,
             "--u-dragger-color": draggerColor,
             "--u-font-size": fontSize,
             "--u-item-color-hover": itemColorHover,
@@ -65555,9 +65586,9 @@
         type: Number,
         default: 10
       },
-      maxHeight: {
+      height: {
         type: [String, Number],
-        default: void 0
+        default: 800
       },
       onChatSelect: {
         type: Function,
@@ -65886,15 +65917,15 @@
       render() {
         const { $slots } = this;
         this.onRender?.();
-        const maxHeightStyle = this.maxHeight ? {
-          maxHeight: typeof this.maxHeight === "number" ? `${this.maxHeight}px` : this.maxHeight
+        const heightStyle = this.height ? {
+          height: typeof this.height === "number" ? `${this.height}px` : this.height
         } : {};
         return /* @__PURE__ */ vue.h(
           "div",
           {
             class: [`${this.mergedClsPrefix}-chat`, this.themeClass],
             style: {
-              ...maxHeightStyle,
+              ...heightStyle,
               ...this.cssVars
             }
           },
@@ -65904,7 +65935,7 @@
                 sidebarHeaderMain: $slots.sidebarHeaderMain,
                 sidebarHeaderActions: $slots.sidebarHeaderActions
               })
-            ]), resolveSlot($slots.default, () => [
+            ]), this.selectedChatId && resolveSlot($slots.default, () => [
               /* @__PURE__ */ vue.h(ChatMainArea, null, {
                 headerActions: $slots.headerActions
               })
@@ -118032,7 +118063,9 @@
               [createKey("closeIconColorPressed", type)]: closeIconColorPressed,
               [createKey("titleTextColor", type)]: titleTextColor,
               [createKey("descriptionTextColor", type)]: descriptionTextColor,
-              [createKey("actionTextColor", type)]: actionTextColor
+              [createKey("actionTextColor", type)]: actionTextColor,
+              [createKey("iconWrapperColor", type)]: iconWrapperColor,
+              [createKey("iconWrapperPulseColor", type)]: iconWrapperPulseColor
             },
             common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut }
           } = mergedThemeRef.value;
@@ -118072,7 +118105,12 @@
             "--u-padding-bottom": bottom,
             "--u-meta-font-size": metaFontSize,
             "--u-description-font-size": descriptionFontSize,
-            "--u-avatar-size": avatarSize
+            "--u-avatar-size": avatarSize,
+            "--u-icon-wrapper-color": iconWrapperColor,
+            "--u-icon-wrapper-pulse-color": iconWrapperPulseColor,
+            iconColor,
+            iconWrapperColor,
+            iconWrapperPulseColor
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass(
@@ -118096,7 +118134,8 @@
         };
       },
       render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, cssVars } = this;
+        const { iconColor, iconWrapperColor, iconWrapperPulseColor } = cssVars;
         this.onRender?.();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -118120,7 +118159,18 @@
               ],
               style: this.cssVars
             },
-            this.showAvatar ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-notification__avatar` }, this.avatar ? render$1(this.avatar) : /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => /* @__PURE__ */ vue.h(InfoOutlineIcon, null))) : null,
+            this.showAvatar ? this.avatar ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-notification__avatar` }, render$1(this.avatar)) : /* @__PURE__ */ vue.h(
+              UIconWrapper,
+              {
+                pulseSize: 52,
+                size: 36,
+                color: iconWrapperColor,
+                pulseColor: iconWrapperPulseColor,
+                variant: "pulse",
+                borderRadius: 60
+              },
+              /* @__PURE__ */ vue.h(UIcon, { color: iconColor, size: 24 }, () => this.type === "success" ? /* @__PURE__ */ vue.h(SuccessIcon, null) : /* @__PURE__ */ vue.h(InfoIcon, null))
+            ) : null,
             this.closable ? /* @__PURE__ */ vue.h(
               UBaseClose,
               {
@@ -118402,6 +118452,8 @@
       display: flex;
       overflow: hidden;
       flex-shrink: 0;
+      padding-top: var(--u-padding-top);
+      padding-bottom: var(--u-padding-bottom);
       padding-left: var(--u-padding-left);
       padding-right: var(--u-padding-right);
       width: var(--u-width);
@@ -118411,12 +118463,14 @@
       border-radius: var(--u-border-radius);
       box-sizing: border-box;
       opacity: 1;
-    `, [cE("avatar", [cB("icon", {
+      box-shadow: 0 0 20px 0 rgba(68, 83, 113, 0.10), 0 12px 20px 0 rgba(68, 83, 113, 0.05);
+    `, [cE("avatar", [cB("icon-wrapper", `
+        `), cB("icon", {
       color: "var(--u-icon-color)"
     }), cB("base-icon", {
       color: "var(--u-icon-color)"
     })]), cM("show-avatar", [cB("notification-main", `
-          margin-left: calc(var(--u-avatar-size) + 16px);
+          margin-left: 16px;
           width: calc(100% - var(--u-avatar-size) + 16px);  
         `)]), cM("closable", [cB("notification-main", [c$1("> *:first-child", `
             padding-right: var(--u-close-size);
@@ -118429,9 +118483,7 @@
             background-color .3s var(--u-bezier),
             color .3s var(--u-bezier);
         `)]), cE("avatar", `
-        position: absolute;
-        top: var(--u-padding-top);
-        left: var(--u-padding-left);
+        position: relative;
         width: var(--u-avatar-size);
         height: var(--u-avatar-size);
         font-size: var(--u-avatar-size);
@@ -118439,18 +118491,18 @@
         align-items: center;
         justify-content: center;
       `, [cB("icon", "transition: color .3s var(--u-bezier);")]), cB("notification-main", `
-        padding-top: var(--u-padding-top);
-        padding-bottom: var(--u-padding-bottom);
+        padding-top: 2px;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
         margin-left: 8px;
         width: calc(100% - 8px);
+        justify-content: center;
       `, [cB("notification-main-footer", `
           display: flex;
           align-items: center;
           justify-content: space-between;
-          margin-top: 12px;
+          margin-top: 8px;
         `, [cE("meta", `
             font-size: var(--u-meta-font-size);
             transition: color .3s var(--u-bezier-ease-out);
@@ -118459,6 +118511,8 @@
             cursor: pointer;
             transition: color .3s var(--u-bezier-ease-out);
             color: var(--u-action-text-color);
+            width: 100%;
+            margin-top: 16px;
           `)]), cE("header", `
           font-weight: var(--u-title-font-weight);
           font-size: var(--u-title-font-size);
@@ -129769,7 +129823,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.8.1";
+    var version = "1.8.2";
 
     function create({
       componentPrefix = "U",