@uzum-tech/ui 1.8.0 → 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 = {
@@ -58045,6 +58069,12 @@
       ChatMessageType2["MARK"] = "mark";
       return ChatMessageType2;
     })(ChatMessageType || {});
+    var ChatMarkType = /* @__PURE__ */(ChatMarkType2 => {
+      ChatMarkType2["SYSTEM"] = "system";
+      ChatMarkType2["EVENT"] = "event";
+      ChatMarkType2["DIVIDER"] = "divider";
+      return ChatMarkType2;
+    })(ChatMarkType || {});
     const chatInjectionKey = createInjectionKey("chat");
 
     var commonVars = {
@@ -59737,10 +59767,7 @@
 
     var style$12 = cB("chat", `
   height: 100%;
-  max-height: 100%;
-  min-height: 0;
-  display: flex;
-  overflow: hidden;
+  background-color: transparent;
   box-sizing: border-box;
   .u-list-item__text {
     grid-template-columns: 1fr !important;
@@ -59749,7 +59776,6 @@
     height: 100%;
     max-height: 100%;
     min-height: 0;
-    overflow: hidden;
   }
 `, [cB("chat-sidebar", `
     max-width: 388px;
@@ -59760,7 +59786,6 @@
     background-color: var(--u-sidebar-background-color);
     border: 1px solid var(--u-sidebar-border-color);
     border-radius: 20px;
-    overflow: hidden;
   `, [cE("header", `
       flex-shrink: 0;
     `), cE("header-container", `
@@ -59874,7 +59899,6 @@
       `), cE("item-status sup", `
         padding: 2px 6px 2px 5px;
         height: 22px;
-        --u-color: var(--u-unread-notification-background-color);
       `), cE("item-status-icon", `
         color: var(--u-sidebar-item-time-color);
       `, [cM("read", `
@@ -59896,7 +59920,6 @@
           height: 100%;
           max-height: 100%;
           min-height: 0;
-          overflow: hidden;
         `, [cE("header", `
             border-bottom: 1px solid var(--u-border-color);
             width: 100%;
@@ -59912,7 +59935,7 @@
             color: var(--u-unread-notification-text-color);
             padding: 6px 12px;
             text-align: center;
-            font-size: 12px;
+            font-size: 14px;
             font-weight: 500;
             margin: 8px 0;
             display: flex;
@@ -59946,8 +59969,19 @@
               color: var(--u-date-separator-color);
               padding: 4px 12px;
               border-radius: 12px;
-              font-size: 12px;
+              font-size: 14px;
               font-weight: 500;
+            `)]), cE("mark", `
+            display: flex;
+            justify-content: center;
+            margin: 12px 0;
+            width: 100%;
+          `, [c$1("span", `
+              padding: 6px 12px;
+              border-radius: 8px;
+              color: var(--u-text-color-secondary);
+              background-color: var(--u-date-separator-background-color);
+              text-align: center;
             `)]), cE("message", `
             display: flex;
             margin-bottom: 8px;
@@ -60063,13 +60097,6 @@
           `), cE("input", `
             flex: 1;
             margin-right: 4px;
-            --u-color: #F3F4F6 !important;
-            --u-color-focus: #F3F4F6 !important;
-            --u-border: none !important;
-            --u-border-focus: none !important;
-            --u-border-hover: none !important;
-            --u-box-shadow: none !important;
-            --u-box-shadow-focus: none !important;
           `), cE("attach-btn", `
             margin-left: 4px;
             flex-shrink: 0;
@@ -60086,6 +60113,40 @@
     background-color: var(--u-attachment-background-color-other);
   `)]);
 
+    const chatInputLight = {
+      ...inputLight,
+      self(vars) {
+        const originalInputSelf = self$1e(vars);
+        const {
+          elementsTertiary
+        } = vars;
+        return {
+          ...originalInputSelf,
+          color: elementsTertiary,
+          colorFocus: elementsTertiary,
+          border: "none",
+          borderFocus: "none",
+          borderHover: "none",
+          boxShadow: "none",
+          boxShadowFocus: "none"
+        };
+      }
+    };
+    const chatBadgeLight = {
+      ...badgeLight,
+      self(vars) {
+        const originalBadgeSelf = self$19(vars);
+        const {
+          brandPrimary400,
+          elementsSecondary
+        } = vars;
+        return {
+          ...originalBadgeSelf,
+          color: brandPrimary400,
+          textColor: elementsSecondary
+        };
+      }
+    };
     const self$6 = vars => {
       const {
         borderRadiusLarge,
@@ -60135,7 +60196,7 @@
         unreadNotificationTextColor: elementsSecondary,
         typingIndicatorColor: textSecondary,
         dateSeparatorColor: textTertiary,
-        dateSeparatorBackgroundColor: elementsTertiary,
+        dateSeparatorBackgroundColor: "transparent",
         borderRadius: borderRadiusLarge,
         errorColor: staticRed
       };
@@ -60144,11 +60205,11 @@
       name: "Chat",
       common: derived,
       peers: {
-        Input: inputLight,
+        Input: chatInputLight,
         Empty: emptyLight,
         Select: selectLight,
         Avatar: avatarLight,
-        Badge: badgeLight,
+        Badge: chatBadgeLight,
         Button: buttonLight,
         Icon: iconLight,
         List: listLight,
@@ -60235,17 +60296,10 @@
     var UChatListItems = vue.defineComponent({
       name: "ChatListItems",
       props: chatListItemsProps,
-      emits: ["chat-select"],
-      setup(props, { slots, emit }) {
+      setup(props, { slots }) {
+        const UChat = vue.inject(chatInjectionKey, null);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme(
-          "Chat",
-          "-chat",
-          style$12,
-          chatLight,
-          props,
-          mergedClsPrefixRef
-        );
+        const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$12, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale("Chat");
         const cssVarsRef = vue.computed(() => {
           const {
@@ -60307,7 +60361,6 @@
           () => props.typingText ?? localeRef.value.typingText
         );
         const handleChatSelect = (chatId) => {
-          emit("chat-select", chatId);
           props.onChatSelect?.(chatId);
         };
         const renderChatItem = (item) => {
@@ -60333,7 +60386,9 @@
                 {
                   size: "medium",
                   src: typeof item.avatar === "string" ? item.avatar : void 0,
-                  ...props.avatarProps
+                  ...props.avatarProps,
+                  theme: themeRef.value.peers.Avatar,
+                  themeOverrides: themeRef.value.peerOverrides.Avatar
                 },
                 {
                   default: () => typeof item.avatar === "function" ? item.avatar() : typeof item.title === "string" ? item.title.charAt(0)?.toUpperCase() : "?"
@@ -60393,14 +60448,18 @@
                         class: [
                           `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon`,
                           `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon--${item.messageStatus}`
-                        ]
+                        ],
+                        theme: themeRef.value.peers.Icon,
+                        themeOverrides: themeRef.value.peerOverrides.Icon
                       }
                     ) : null),
                     !lastMessageIsOwn && hasUnreadIncoming && /* @__PURE__ */ vue.h(
                       UBadge,
                       {
                         value: displayUnreadCount,
-                        ...props.badgeProps
+                        ...props.badgeProps,
+                        theme: themeRef.value.peers.Badge,
+                        themeOverrides: themeRef.value.peerOverrides.Badge
                       }
                     )
                   )
@@ -60411,6 +60470,7 @@
         };
         return {
           mergedClsPrefixRef,
+          mergedTheme: themeRef,
           renderChatItem,
           cssVars: cssVarsRef,
           themeClass: themeClassHandle?.themeClass,
@@ -60422,26 +60482,51 @@
         const { mergedClsPrefixRef, renderChatItem } = this;
         const content = (() => {
           if (this.loading) {
-            return /* @__PURE__ */ vue.h(UList, { loading: true }, {
-              default: () => Array.from({ length: this.loadingCount || 10 }).map(
-                (_, index) => /* @__PURE__ */ vue.h(
-                  UListItem,
-                  {
-                    key: index,
-                    avatar: { icon: PersonOutline },
-                    description: { text: "Loading..." },
-                    header: { text: "Loading..." }
-                  }
+            return /* @__PURE__ */ vue.h(
+              UList,
+              {
+                loading: true,
+                theme: this.mergedTheme.peers.List,
+                themeOverrides: this.mergedTheme.peerOverrides.List
+              },
+              {
+                default: () => Array.from({ length: this.loadingCount || 10 }).map(
+                  (_, index) => /* @__PURE__ */ vue.h(
+                    UListItem,
+                    {
+                      key: index,
+                      avatar: { icon: PersonOutline },
+                      description: { text: "Loading..." },
+                      header: { text: "Loading..." }
+                    }
+                  )
                 )
-              )
-            });
+              }
+            );
           }
           if (this.chatItems?.length) {
-            return /* @__PURE__ */ vue.h(UList, { showIcon: false }, {
-              default: () => this.chatItems?.map((item) => renderChatItem(item))
-            });
+            return /* @__PURE__ */ vue.h(
+              UList,
+              {
+                showIcon: false,
+                theme: this.mergedTheme.peers.List,
+                themeOverrides: this.mergedTheme.peerOverrides.List
+              },
+              {
+                default: () => this.chatItems?.map((item) => renderChatItem(item))
+              }
+            );
           }
-          return /* @__PURE__ */ vue.h(UEmpty, { ...this.emptyProps });
+          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",
@@ -60485,6 +60570,7 @@
         const { slots } = this;
         const {
           mergedClsPrefixRef,
+          mergedThemeRef,
           chatItemsRef,
           chatItemsLoadingRef,
           chatItemsLoadingCountRef,
@@ -60513,7 +60599,15 @@
                 {
                   class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main`
                 },
-                slots.sidebarHeaderMain?.() || /* @__PURE__ */ vue.h(USelect, { round: true, size: "small" })
+                slots.sidebarHeaderMain?.() || /* @__PURE__ */ vue.h(
+                  USelect,
+                  {
+                    round: true,
+                    size: "tiny",
+                    theme: mergedThemeRef.value.peers.Select,
+                    themeOverrides: mergedThemeRef.value.peerOverrides.Select
+                  }
+                )
               ), /* @__PURE__ */ vue.h(
                 "div",
                 {
@@ -61111,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",
@@ -62485,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,
@@ -63464,6 +63563,7 @@
               draggerColor,
               draggerBorder,
               draggerBorderHover,
+              draggerShadowFocus,
               itemColorHover,
               itemColorHoverError,
               itemTextColorError,
@@ -63493,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,
@@ -64450,17 +64551,10 @@
     var UChatMessages = vue.defineComponent({
       name: "ChatMessages",
       props: chatMessagesProps,
-      emits: ["message-retry"],
-      setup(props, { slots, emit }) {
+      setup(props, { slots }) {
+        const UChat = vue.inject(chatInjectionKey, null);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme(
-          "Chat",
-          "-chat",
-          style$12,
-          chatLight,
-          props,
-          mergedClsPrefixRef
-        );
+        const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$12, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale("Chat");
         const cssVarsRef = vue.computed(() => {
           const {
@@ -64549,7 +64643,6 @@
           ).length;
         });
         const handleMessageRetry = (message) => {
-          emit("message-retry", message);
           props.onMessageRetry?.(message);
         };
         const renderDateSeparator = (date) => {
@@ -64565,6 +64658,20 @@
             /* @__PURE__ */ vue.h("span", null, count, " ", mergedUnreadNotificationTextRef.value)
           );
         };
+        const renderMarkMessage = (message) => {
+          const markTypeClass = message.markType === ChatMarkType.SYSTEM ? "system" : message.markType === ChatMarkType.EVENT ? "event" : "divider";
+          return /* @__PURE__ */ vue.h(
+            "div",
+            {
+              key: message.id,
+              class: [
+                `${mergedClsPrefixRef.value}-chat-main__mark`,
+                `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
+              ]
+            },
+            message.content && /* @__PURE__ */ vue.h("span", null, message.content)
+          );
+        };
         const renderMessage = (message) => {
           const isOwn = message.isOwn;
           const attachments = message.attachment ? Array.isArray(message.attachment) ? message.attachment : [message.attachment] : [];
@@ -64641,7 +64748,9 @@
                   {
                     size: 16,
                     component: statusIconMapper[MessageStatus.RETRY],
-                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`
+                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`,
+                    theme: themeRef.value.peers.Icon,
+                    themeOverrides: themeRef.value.peerOverrides.Icon
                   }
                 ),
                 /* @__PURE__ */ vue.h(
@@ -64672,7 +64781,9 @@
                       `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(
                     message.status
                   )}`
-                    ]
+                    ],
+                    theme: themeRef.value.peers.Icon,
+                    themeOverrides: themeRef.value.peerOverrides.Icon
                   }
                 )
               ))
@@ -64759,7 +64870,9 @@
         };
         return {
           mergedClsPrefixRef,
+          mergedTheme: themeRef,
           renderMessage,
+          renderMarkMessage,
           renderTypingIndicator,
           renderSkeletonMessage,
           renderDateSeparator,
@@ -64774,6 +64887,7 @@
         const {
           mergedClsPrefixRef,
           renderMessage,
+          renderMarkMessage,
           renderTypingIndicator,
           renderSkeletonMessage,
           renderDateSeparator,
@@ -64879,7 +64993,11 @@
                 if (item.type === "unread-notification") {
                   return renderUnreadNotification();
                 }
-                return renderMessage(item);
+                const message = item;
+                if (message.type === ChatMessageType.MARK) {
+                  return renderMarkMessage(message);
+                }
+                return renderMessage(message);
               }
             ), isTyping && renderTypingIndicator())
           )
@@ -64894,6 +65012,7 @@
       setup(_, { slots }) {
         const {
           mergedClsPrefixRef,
+          mergedThemeRef,
           selectedChatRef,
           messagesRef,
           typingChatIdsRef,
@@ -65030,7 +65149,9 @@
               UText,
               {
                 variant: "heading-s-bold",
-                class: `${mergedClsPrefixRef.value}-chat-main__header-title`
+                class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
+                theme: mergedThemeRef.value.peers.Typography,
+                themeOverrides: mergedThemeRef.value.peerOverrides.Typography
               },
               {
                 default: () => selectedChatRef.value?.title || "Select a chat"
@@ -65051,12 +65172,23 @@
                       circle: true,
                       size: "large",
                       ...headerButtonPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                       onClick: () => onChatShare?.value?.()
                     },
                     {
-                      default: () => /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, {
-                        default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
-                      })
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon,
+                        {
+                          size: 20,
+                          ...headerIconPropsRef.value,
+                          theme: mergedThemeRef.value.peers.Icon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.Icon
+                        },
+                        {
+                          default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ vue.h(
@@ -65066,12 +65198,23 @@
                       circle: true,
                       size: "large",
                       ...headerButtonPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                       onClick: () => onUserProfile?.value?.()
                     },
                     {
-                      default: () => /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, {
-                        default: () => /* @__PURE__ */ vue.h(PersonNote, null)
-                      })
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon,
+                        {
+                          size: 20,
+                          ...headerIconPropsRef.value,
+                          theme: mergedThemeRef.value.peers.Icon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.Icon
+                        },
+                        {
+                          default: () => /* @__PURE__ */ vue.h(PersonNote, null)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ vue.h(
@@ -65081,6 +65224,8 @@
                       size: "large",
                       round: true,
                       ...headerButtonPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                       onClick: () => onChatClose?.value?.()
                     },
                     {
@@ -65232,6 +65377,8 @@
                         size: "large",
                         class: `${mergedClsPrefixRef.value}-chat-main__attach-btn`,
                         ...footerButtonPropsRef.value,
+                        theme: mergedThemeRef.value.peers.Button,
+                        themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                         onClick: handleClick
                       },
                       {
@@ -65239,7 +65386,9 @@
                           UIcon,
                           {
                             size: 24,
-                            ...footerIconPropsRef.value
+                            ...footerIconPropsRef.value,
+                            theme: mergedThemeRef.value.peers.Icon,
+                            themeOverrides: mergedThemeRef.value.peerOverrides.Icon
                           },
                           {
                             default: () => /* @__PURE__ */ vue.h(AttachIcon, null)
@@ -65255,6 +65404,8 @@
                       placeholder: inputPlaceholderRef.value,
                       class: `${mergedClsPrefixRef.value}-chat-main__input`,
                       ...footerInputPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Input,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Input,
                       onUpdateValue: (value) => {
                         inputValue.value = value;
                         if (selectedChatRef.value) {
@@ -65435,9 +65586,9 @@
         type: Number,
         default: 10
       },
-      maxHeight: {
+      height: {
         type: [String, Number],
-        default: void 0
+        default: 800
       },
       onChatSelect: {
         type: Function,
@@ -65708,6 +65859,7 @@
         );
         vue.provide(chatInjectionKey, {
           mergedClsPrefixRef,
+          mergedThemeRef: themeRef,
           chatItemsRef: vue.toRef(props, "chatItems"),
           selectedChatIdRef: mergedSelectedChatIdRef,
           selectedChatRef,
@@ -65765,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
             }
           },
@@ -65783,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
               })
@@ -117911,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;
@@ -117951,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(
@@ -117975,7 +118134,8 @@
         };
       },
       render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, cssVars } = this;
+        const { iconColor, iconWrapperColor, iconWrapperPulseColor } = cssVars;
         this.onRender?.();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -117999,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,
               {
@@ -118281,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);
@@ -118290,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);
@@ -118308,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);
@@ -118318,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);
@@ -118338,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);
@@ -129355,6 +129530,9 @@
 
     var components = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        ChatMarkType: ChatMarkType,
+        ChatMessageType: ChatMessageType,
+        MessageStatus: MessageStatus,
         NA: a,
         NP: p,
         UActionCard: ActionCard,
@@ -129645,7 +129823,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.8.0";
+    var version = "1.8.2";
 
     function create({
       componentPrefix = "U",
@@ -130450,6 +130628,9 @@
       };
     }
 
+    exports.ChatMarkType = ChatMarkType;
+    exports.ChatMessageType = ChatMessageType;
+    exports.MessageStatus = MessageStatus;
     exports.NA = a;
     exports.NP = p;
     exports.UActionCard = ActionCard;