@uzum-tech/ui 2.2.1 → 2.3.0

package/dist/index.js

@@ -3412,7 +3412,7 @@
   }
 
   /* eslint-disable @typescript-eslint/no-non-null-assertion */
-  const style$1Z = c([c('.v-binder-follower-container', {
+  const style$1_ = c([c('.v-binder-follower-container', {
     position: 'absolute',
     left: '0',
     right: '0',
@@ -3491,7 +3491,7 @@
         }
       });
       const ssrAdapter = useSsrAdapter();
-      style$1Z.mount({
+      style$1_.mount({
         id: 'vueuc/binder',
         head: true,
         anchorMetaName: cssrAnchorMetaName$1,
@@ -4951,7 +4951,7 @@
 
   /* eslint-disable @typescript-eslint/strict-boolean-expressions */
   const hiddenAttr = 'v-hidden';
-  const style$1Y = c('[v-hidden]', {
+  const style$1Z = c('[v-hidden]', {
     display: 'none!important'
   });
   var VOverflow = vue.defineComponent({
@@ -5064,7 +5064,7 @@
         }
       }
       const ssrAdapter = useSsrAdapter();
-      style$1Y.mount({
+      style$1Z.mount({
         id: 'vueuc/overflow',
         head: true,
         anchorMetaName: cssrAnchorMetaName$1,
@@ -14084,7 +14084,7 @@
     builtinThemeOverrides: Object
   };
 
-  var style$1X = cB("base-icon", `
+  var style$1Y = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14120,7 +14120,7 @@
       onMouseup: Function
     },
     setup(props) {
-      useStyle("-base-icon", style$1X, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-icon", style$1Y, vue.toRef(props, "clsPrefix"));
     },
     render() {
       return /* @__PURE__ */ vue.h(
@@ -14155,7 +14155,7 @@
     onClick: Function
   };
 
-  var style$1W = cB("icon", `
+  var style$1X = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14341,7 +14341,7 @@
     boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
   };
 
-  function self$1D(vars) {
+  function self$1E(vars) {
     const {
       elementsPrimary
     } = vars;
@@ -14357,13 +14357,13 @@
   const iconLight = {
     name: "Icon",
     common: derived,
-    self: self$1D
+    self: self$1E
   };
 
   const iconDark$1 = {
     name: "Icon",
     common: derived$1,
-    self: self$1D
+    self: self$1E
   };
 
   const FALLBACK_ICON = "&#65533";
@@ -14377,7 +14377,7 @@
         mergedIconPacksRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Icon", "-icon", style$1W, iconLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Icon", "-icon", style$1X, iconLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           depth
@@ -14518,7 +14518,7 @@
     avatarSize: "16px"
   };
 
-  function self$1C(vars) {
+  function self$1D(vars) {
     const {
       heightHuge,
       fontBodyLarge,
@@ -14548,16 +14548,16 @@
   const accountOptionLight = {
     name: "AccountOption",
     common: derived,
-    self: self$1C
+    self: self$1D
   };
 
   const accountOptionDark = {
     name: "AccountOption",
     common: derived$1,
-    self: self$1C
+    self: self$1D
   };
 
-  var style$1V = cB("base-account-option", `
+  var style$1W = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -14612,7 +14612,7 @@
       const themeRef = useTheme(
         "AccountOption",
         "-base-account-option",
-        style$1V,
+        style$1W,
         accountOptionLight,
         props,
         mergedClsPrefixRef
@@ -16092,7 +16092,7 @@
     })];
   }
 
-  var style$1U = cB("base-clear", `
+  var style$1V = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -16133,7 +16133,7 @@
       onClear: Function
     },
     setup(props) {
-      useStyle("-base-clear", style$1U, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-clear", style$1V, vue.toRef(props, "clsPrefix"));
       return {
         handleMouseDown(e) {
           e.preventDefault();
@@ -16164,7 +16164,7 @@
     }
   });
 
-  var style$1T = cB("base-close", `
+  var style$1U = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16236,7 +16236,7 @@
       absolute: Boolean
     },
     setup(props) {
-      useStyle("-base-close", style$1T, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-close", style$1U, vue.toRef(props, "clsPrefix"));
       return () => {
         const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
         const Tag = isButtonTag ? "button" : "div";
@@ -16395,7 +16395,7 @@
     }
   });
 
-  var style$1S = c$1([c$1("@keyframes loading-container-rotate", `
+  var style$1T = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -16565,7 +16565,7 @@
       ...exposedLoadingProps
     },
     setup(props) {
-      useStyle("-base-loading", style$1S, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-loading", style$1T, vue.toRef(props, "clsPrefix"));
     },
     render() {
       const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -16695,7 +16695,7 @@
     })];
   }
 
-  var style$1R = cB("base-menu-mask", `
+  var style$1S = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -16718,7 +16718,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-menu-mask", style$1R, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-menu-mask", style$1S, vue.toRef(props, "clsPrefix"));
       const messageRef = vue.ref(null);
       let timerId = null;
       const uncontrolledShowRef = vue.ref(false);
@@ -16906,7 +16906,7 @@
     railColor: "transparent"
   };
 
-  function self$1B(vars) {
+  function self$1C(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -16926,13 +16926,13 @@
   const safeTopScrollbarLight = {
     name: "SafeTopScrollbar",
     common: derived,
-    self: self$1B
+    self: self$1C
   };
 
   const safeTopScrollbarDark = {
     name: "SafeTopScrollbar",
     common: derived$1,
-    self: self$1B
+    self: self$1C
   };
 
   cB("scrollbar", [cM("rtl", `
@@ -16945,7 +16945,7 @@
           right: unset;
         `)])])])]);
 
-  var style$1Q = cB("safe-top-scrollbar", `
+  var style$1R = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -17094,7 +17094,7 @@
       const themeRef = useTheme(
         "SafeTopScrollbar",
         "-safe-top-scrollbar",
-        style$1Q,
+        style$1R,
         safeTopScrollbarLight,
         props,
         mergedClsPrefixRef
@@ -17828,7 +17828,7 @@
     railColor: "transparent"
   };
 
-  function self$1A(vars) {
+  function self$1B(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -17848,13 +17848,13 @@
   const scrollbarLight = {
     name: "Scrollbar",
     common: derived,
-    self: self$1A
+    self: self$1B
   };
 
   const scrollbarDark = {
     name: "Scrollbar",
     common: derived$1,
-    self: self$1A
+    self: self$1B
   };
 
   var rtlStyle$t = cB("scrollbar", [cM("rtl", `
@@ -17872,7 +17872,7 @@
     style: rtlStyle$t
   };
 
-  var style$1P = cB("scrollbar", `
+  var style$1Q = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -18015,7 +18015,7 @@
       const themeRef = useTheme(
         "Scrollbar",
         "-scrollbar",
-        style$1P,
+        style$1Q,
         scrollbarLight,
         props,
         mergedClsPrefixRef
@@ -19387,7 +19387,7 @@
     return treemate;
   }
 
-  function self$1z(vars) {
+  function self$1A(vars) {
     const {
       fontBodyMedium,
       fontTitleLarge,
@@ -19419,16 +19419,16 @@
   const emptyLight = {
     name: "Empty",
     common: derived,
-    self: self$1z
+    self: self$1A
   };
 
   const emptyDark$1 = {
     name: "Empty",
     common: derived$1,
-    self: self$1z
+    self: self$1A
   };
 
-  var style$1O = cB("empty", `
+  var style$1P = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19506,7 +19506,7 @@
       const themeRef = useTheme(
         "Empty",
         "-empty",
-        style$1O,
+        style$1P,
         emptyLight,
         props,
         mergedClsPrefixRef
@@ -19594,7 +19594,7 @@
     }
   });
 
-  function self$1y(vars) {
+  function self$1z(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -19651,7 +19651,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$1y
+    self: self$1z
   });
 
   const internalSelectMenuDark = {
@@ -19661,7 +19661,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$1y
+    self: self$1z
   };
 
   cB("base-select-menu", [cM("rtl", `
@@ -19902,7 +19902,7 @@
     })];
   }
 
-  var style$1N = cB("base-select-menu", `
+  var style$1O = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -20090,7 +20090,7 @@
       const themeRef = useTheme(
         "InternalSelectMenu",
         "-internal-select-menu",
-        style$1N,
+        style$1O,
         internalSelectMenuLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -20558,7 +20558,7 @@
     }
   });
 
-  function self$1x(vars) {
+  function self$1y(vars) {
     const {
       fontBodyMedium,
       containerPrimary,
@@ -20585,13 +20585,13 @@
   const popoverLight = {
     name: "Popover",
     common: derived,
-    self: self$1x
+    self: self$1y
   };
 
   const popoverDark = {
     name: "Popover",
     common: derived$1,
-    self: self$1x
+    self: self$1y
   };
 
   cB("popover", [cM("rtl", `
@@ -20606,7 +20606,7 @@
     right: "left"
   };
   const arrowSize = "var(--u-arrow-height) * 1.414";
-  var style$1M = c$1([cB("popover", `
+  var style$1N = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -20825,7 +20825,7 @@
       const themeRef = useTheme(
         "Popover",
         "-popover",
-        style$1M,
+        style$1N,
         popoverLight,
         props,
         mergedClsPrefixRef
@@ -21655,7 +21655,7 @@
     }
   });
 
-  function self$1w(vars) {
+  function self$1x(vars) {
     const {
       opacityDisabled,
       borderRadiusSmall: borderRadius,
@@ -21753,13 +21753,13 @@
   const tagLight = {
     name: "Tag",
     common: derived,
-    self: self$1w
+    self: self$1x
   };
 
   const tagDark = {
     name: "Tag",
     common: derived$1,
-    self: self$1w
+    self: self$1x
   };
 
   var rtlStyle$s = cB("tag", [cM("rtl", `
@@ -21806,7 +21806,7 @@
     }
   };
 
-  var style$1L = cB("tag", `
+  var style$1M = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -21973,7 +21973,7 @@
       const themeRef = useTheme(
         "Tag",
         "-tag",
-        style$1L,
+        style$1M,
         tagLight,
         props,
         mergedClsPrefixRef
@@ -22337,7 +22337,7 @@
     }
   });
 
-  function self$1v(vars) {
+  function self$1w(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -22357,10 +22357,10 @@
   }
   const skeletonLight$1 = {
     common: derived,
-    self: self$1v
+    self: self$1w
   };
 
-  var style$1K = c$1([cB("skeleton", `
+  var style$1L = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -22416,7 +22416,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1K,
+        style$1L,
         skeletonLight$1,
         props,
         mergedClsPrefixRef
@@ -22532,7 +22532,7 @@
     }
   });
 
-  function self$1u(vars) {
+  function self$1v(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -22690,7 +22690,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1u
+    self: self$1v
   });
 
   const internalSelectionDark = {
@@ -22699,7 +22699,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1u
+    self: self$1v
   };
 
   cB("base-selection", [cM("rtl", `
@@ -22732,7 +22732,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
   }
-  var style$1J = c$1([cB("base-selection", `
+  var style$1K = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -23083,7 +23083,7 @@
       const themeRef = useTheme(
         "InternalSelection",
         "-internal-selection",
-        style$1J,
+        style$1K,
         internalSelectionLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -24164,7 +24164,7 @@
     })];
   }
 
-  var style$1I = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+  var style$1J = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -24283,7 +24283,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-slot-machine", style$1I, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-slot-machine", style$1J, vue.toRef(props, "clsPrefix"));
       const oldValueRef = vue.ref();
       const newValueRef = vue.ref();
       const numbersRef = vue.computed(() => {
@@ -24338,7 +24338,7 @@
     }
   });
 
-  function self$1t(vars) {
+  function self$1u(vars) {
     const {
       borderRadiusSmall,
       brandPrimary500,
@@ -24374,10 +24374,10 @@
   }
   const typographyLight$1 = {
     common: derived,
-    self: self$1t
+    self: self$1u
   };
 
-  var style$1H = cB("text", `
+  var style$1I = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -24685,7 +24685,7 @@
       const themeRef = useTheme(
         "Typography",
         "-text",
-        style$1H,
+        style$1I,
         typographyLight$1,
         props,
         mergedClsPrefixRef
@@ -24773,7 +24773,7 @@
     }
   });
 
-  var style$1G = cB("base-wave", `
+  var style$1H = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -24791,7 +24791,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-wave", style$1G, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-wave", style$1H, vue.toRef(props, "clsPrefix"));
       const selfRef = vue.ref(null);
       const activeRef = vue.ref(false);
       let animationTimerId = null;
@@ -24836,7 +24836,7 @@
     }
   });
 
-  function self$1s(vars) {
+  function self$1t(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -24873,7 +24873,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1s
+    self: self$1t
   });
 
   const tooltipDark = {
@@ -24882,10 +24882,10 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1s
+    self: self$1t
   };
 
-  var style$1F = cB("tooltip", "", [cE("content", `
+  var style$1G = cB("tooltip", "", [cE("content", `
     display: flex;
     align-items: flex-start;
   `), cE("icon", `
@@ -25011,7 +25011,7 @@
       const themeRef = useTheme(
         "Tooltip",
         "-tooltip",
-        props.variant === "plain" ? void 0 : style$1F,
+        props.variant === "plain" ? void 0 : style$1G,
         tooltipLight,
         props,
         mergedClsPrefixRef
@@ -25141,7 +25141,7 @@
     }
   });
 
-  var style$1E = cB("ellipsis", {
+  var style$1F = cB("ellipsis", {
     overflow: "hidden"
   }, [cNotM("line-clamp", `
     white-space: nowrap;
@@ -25179,7 +25179,7 @@
       const mergedTheme = useTheme(
         "Ellipsis",
         "-ellipsis",
-        style$1E,
+        style$1F,
         ellipsisLight,
         props,
         mergedClsPrefixRef
@@ -25336,7 +25336,7 @@
     setup(props, { attrs, slots }) {
       const mouseEnteredRef = vue.ref(false);
       const mergedClsPrefixRef = useMergedClsPrefix();
-      useStyle("-ellipsis", style$1E, mergedClsPrefixRef);
+      useStyle("-ellipsis", style$1F, mergedClsPrefixRef);
       const renderTrigger = () => {
         const { lineClamp } = props;
         const mergedClsPrefix = mergedClsPrefixRef.value;
@@ -25376,7 +25376,7 @@
     }
   });
 
-  function self$1r(vars) {
+  function self$1s(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -25418,21 +25418,21 @@
   const actionCardLight = {
     name: "ActionCard",
     common: derived,
-    self: self$1r
+    self: self$1s
   };
 
   const actionCardDark = {
     name: "ActionCard",
     common: derived$1,
     self: vars => {
-      const lightVars = self$1r(vars);
+      const lightVars = self$1s(vars);
       return {
         ...lightVars
       };
     }
   };
 
-  var style$1D = cB("action-card", `
+  var style$1E = cB("action-card", `
   position: relative;
   width: var(--u-width);
   min-height: var(--u-min-height);
@@ -25553,7 +25553,7 @@
       const themeRef = useTheme(
         "ActionCard",
         "-action-card",
-        style$1D,
+        style$1E,
         actionCardLight,
         props,
         mergedClsPrefixRef
@@ -25684,7 +25684,7 @@
     }
   });
 
-  var style$1C = cB("affix", [cM("affixed", {
+  var style$1D = cB("affix", [cM("affixed", {
     position: "fixed"
   }, [cM("absolute-positioned", {
     position: "absolute"
@@ -25754,7 +25754,7 @@
     props: affixProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-affix", style$1C, mergedClsPrefixRef);
+      useStyle("-affix", style$1D, mergedClsPrefixRef);
       let scrollTarget = null;
       const stickToTopRef = vue.ref(false);
       const stickToBottomRef = vue.ref(false);
@@ -25890,7 +25890,7 @@
     descriptionSpaceBanner: "24px"
   };
 
-  function self$1q(vars) {
+  function self$1r(vars) {
     const {
       iconMedium,
       closeMedium,
@@ -25999,13 +25999,13 @@
   const alertLight = {
     name: "Alert",
     common: derived,
-    self: self$1q
+    self: self$1r
   };
 
   const alertDark = {
     name: "Alert",
     common: derived$1,
-    self: self$1q
+    self: self$1r
   };
 
   var rtlStyle$r = cB("alert", [cM("rtl", `
@@ -26081,7 +26081,7 @@
     `)];
   }
 
-  var style$1B = cB("alert", `
+  var style$1C = cB("alert", `
   line-height: var(--u-line-height);
   position: relative;
   transition: background-color .3s var(--u-bezier);
@@ -26260,7 +26260,7 @@
       const themeRef = useTheme(
         "Alert",
         "-alert",
-        style$1B,
+        style$1C,
         alertLight,
         props,
         mergedClsPrefixRef
@@ -26401,7 +26401,7 @@
     }
   });
 
-  function self$1p(vars) {
+  function self$1q(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -26431,13 +26431,13 @@
   const anchorLight = {
     name: "Anchor",
     common: derived,
-    self: self$1p
+    self: self$1q
   };
 
   const anchorDark = {
     name: "Anchor",
     common: derived$1,
-    self: self$1p
+    self: self$1q
   };
 
   const anchorInjectionKey = createInjectionKey("u-anchor");
@@ -26776,7 +26776,7 @@
     }
   });
 
-  var style$1A = cB("anchor", `
+  var style$1B = cB("anchor", `
   position: relative;
 `, [cNotM("block", `
     padding-left: var(--u-rail-width);
@@ -26866,7 +26866,7 @@
       const themeRef = useTheme(
         "Anchor",
         "-anchor",
-        style$1A,
+        style$1B,
         anchorLight,
         props,
         mergedClsPrefixRef
@@ -26946,7 +26946,7 @@
   isBrowser$1 && navigator.userAgent.includes("Firefox");
   const isSafari = isBrowser$1 && navigator.userAgent.includes("Safari") && !isChrome;
 
-  function self$1o(vars) {
+  function self$1p(vars) {
     const {
       iconMedium,
       textSecondary,
@@ -27057,13 +27057,13 @@
   const inputLight = {
     name: "Input",
     common: derived,
-    self: self$1o
+    self: self$1p
   };
 
   const inputDark = {
     name: "Input",
     common: derived$1,
-    self: self$1o
+    self: self$1p
   };
 
   var rtlStyle$q = cB("input", [cM("rtl", `
@@ -27089,7 +27089,7 @@
 
   const inputInjectionKey = createInjectionKey("u-input");
 
-  var style$1z = cB("input", `
+  var style$1A = cB("input", `
   max-width: 100%;
   cursor: text;
   line-height: 1.5;
@@ -27637,7 +27637,7 @@
     rippleDuration: ".6s"
   };
 
-  function self$1n(vars) {
+  function self$1o(vars) {
     const {
       heightMini,
       heightTiny,
@@ -27893,13 +27893,13 @@
   const buttonLight = {
     name: "Button",
     common: derived,
-    self: self$1n
+    self: self$1o
   };
 
   const buttonDark = {
     name: "Button",
     common: derived$1,
-    self: self$1n
+    self: self$1o
   };
 
   var rtlStyle$p = cB("button", [cM("rtl", `
@@ -27917,7 +27917,7 @@
     style: rtlStyle$p
   };
 
-  var style$1y = c$1([cB("button", `
+  var style$1z = c$1([cB("button", `
     margin: 0;
     font-weight: var(--u-font-weight);
     line-height: 1;
@@ -28248,7 +28248,7 @@
       const themeRef = useTheme(
         "Button",
         "-button",
-        style$1y,
+        style$1z,
         buttonLight,
         props,
         mergedClsPrefixRef
@@ -28682,7 +28682,7 @@
     iconMargin: "0 16px 0 0"
   };
 
-  function self$1m(vars) {
+  function self$1n(vars) {
     const {
       closeMedium,
       iconMedium,
@@ -28767,13 +28767,13 @@
   const messageLight = {
     name: "Message",
     common: derived,
-    self: self$1m
+    self: self$1n
   };
 
   const messageDark = {
     name: "Message",
     common: derived$1,
-    self: self$1m
+    self: self$1n
   };
 
   var rtlStyle$o = cB("message", [cM("rtl", `
@@ -28808,7 +28808,7 @@
     onMouseleave: Function
   };
 
-  var style$1x = c$1([cB("message-wrapper", `
+  var style$1y = c$1([cB("message-wrapper", `
     margin: var(--u-margin);
     z-index: 0;
     transform-origin: top center;
@@ -28929,7 +28929,7 @@
       const themeRef = useTheme(
         "Message",
         "-message",
-        style$1x,
+        style$1y,
         messageLight,
         messageProviderProps,
         mergedClsPrefixRef
@@ -29608,7 +29608,7 @@
       const themeRef = useTheme(
         "Input",
         "-input",
-        style$1z,
+        style$1A,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -30697,7 +30697,7 @@
     }
   });
 
-  var style$1w = cB("input-group", `
+  var style$1x = cB("input-group", `
   display: inline-flex;
   width: 100%;
   flex-wrap: nowrap;
@@ -30760,7 +30760,7 @@
     props: inputGroupProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-input-group", style$1w, mergedClsPrefixRef);
+      useStyle("-input-group", style$1x, mergedClsPrefixRef);
       return {
         mergedClsPrefix: mergedClsPrefixRef
       };
@@ -30771,7 +30771,7 @@
     }
   });
 
-  var style$1v = cB("input-group-label", `
+  var style$1w = cB("input-group-label", `
   position: relative;
   user-select: none;
   -webkit-user-select: none;
@@ -30819,7 +30819,7 @@
       const themeRef = useTheme(
         "Input",
         "-input-group-label",
-        style$1v,
+        style$1w,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -30945,7 +30945,7 @@
     return valOptMap;
   }
 
-  function self$1l(vars) {
+  function self$1m(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -30960,7 +30960,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$1l
+    self: self$1m
   });
 
   const autoCompleteDark = {
@@ -30970,10 +30970,10 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$1l
+    self: self$1m
   };
 
-  var style$1u = c$1([cB("auto-complete", `
+  var style$1v = c$1([cB("auto-complete", `
     z-index: auto;
     position: relative;
     display: inline-flex;
@@ -31103,7 +31103,7 @@
       const themeRef = useTheme(
         "AutoComplete",
         "-auto-complete",
-        style$1u,
+        style$1v,
         autoCompleteLight,
         props,
         mergedClsPrefixRef
@@ -31500,7 +31500,7 @@
     return unobserve;
   };
 
-  function self$1k(vars) {
+  function self$1l(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -31521,16 +31521,16 @@
   const skeletonLight = {
     name: "Skeleton",
     common: derived,
-    self: self$1k
+    self: self$1l
   };
 
   const skeletonDark = {
     name: "Skeleton",
     common: derived$1,
-    self: self$1k
+    self: self$1l
   };
 
-  var style$1t = c$1([cB("skeleton", `
+  var style$1u = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -31589,7 +31589,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1t,
+        style$1u,
         skeletonLight,
         props,
         mergedClsPrefixRef
@@ -31644,7 +31644,7 @@
     }
   });
 
-  function self$1j(vars) {
+  function self$1k(vars) {
     const {
       borderRadius,
       heightSmall,
@@ -31676,18 +31676,18 @@
   const avatarLight = {
     name: "Avatar",
     common: derived,
-    self: self$1j
+    self: self$1k
   };
 
   const avatarDark = {
     name: "Avatar",
     common: derived$1,
-    self: self$1j
+    self: self$1k
   };
 
   const avatarGroupInjectionKey = createInjectionKey("u-avatar-group");
 
-  var style$1s = cB("avatar", `
+  var style$1t = cB("avatar", `
   width: var(--u-merged-size);
   height: var(--u-merged-size);
   color: var(--u-text-color);
@@ -31799,7 +31799,7 @@
       const themeRef = useTheme(
         "Avatar",
         "-avatar",
-        style$1s,
+        style$1t,
         avatarLight,
         props,
         mergedClsPrefixRef
@@ -32010,7 +32010,7 @@
     }
   });
 
-  function self$1i() {
+  function self$1j() {
     return {
       gap: "-12px"
     };
@@ -32021,7 +32021,7 @@
     peers: {
       Avatar: avatarLight
     },
-    self: self$1i
+    self: self$1j
   });
 
   const avatarGroupDark = {
@@ -32030,7 +32030,7 @@
     peers: {
       Avatar: avatarDark
     },
-    self: self$1i
+    self: self$1j
   };
 
   var rtlStyle$n = cB("avatar-group", [cM("rtl", `
@@ -32047,7 +32047,7 @@
     style: rtlStyle$n
   };
 
-  var style$1r = cB("avatar-group", `
+  var style$1s = cB("avatar-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -32082,7 +32082,7 @@
       const mergedThemeRef = useTheme(
         "AvatarGroup",
         "-avatar-group",
-        style$1r,
+        style$1s,
         avatarGroupLight,
         props,
         mergedClsPrefixRef
@@ -32171,7 +32171,7 @@
     }
   });
 
-  function self$1h(vars) {
+  function self$1i(vars) {
     const {
       heightLarge,
       iconMedium,
@@ -32196,13 +32196,13 @@
   const backTopLight = {
     name: "BackTop",
     common: derived,
-    self: self$1h
+    self: self$1i
   };
 
   const backTopDark = {
     name: "BackTop",
     common: derived$1,
-    self: self$1h
+    self: self$1i
   };
 
   var BackTopIcon = /* @__PURE__ */ vue.h(
@@ -32216,7 +32216,7 @@
     /* @__PURE__ */ vue.h("g", { stroke: "none", "stroke-width": "1", "fill-rule": "evenodd" }, /* @__PURE__ */ vue.h("g", { transform: "translate(-139.000000, -4423.000000)", "fill-rule": "nonzero" }, /* @__PURE__ */ vue.h("g", { transform: "translate(120.000000, 4285.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(7.000000, 126.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(4.000000, 2.000000)" }, /* @__PURE__ */ vue.h("path", { d: "M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" }), /* @__PURE__ */ vue.h("path", { d: "M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" })))))))
   );
 
-  var style$1q = cB("back-top", `
+  var style$1r = cB("back-top", `
   position: fixed;
   right: 40px;
   bottom: 40px;
@@ -32355,7 +32355,7 @@
       const themeRef = useTheme(
         "BackTop",
         "-back-top",
-        style$1q,
+        style$1r,
         backTopLight,
         props,
         mergedClsPrefixRef
@@ -32506,7 +32506,7 @@
     }
   });
 
-  function self$1g(vars) {
+  function self$1h(vars) {
     const {
       brandQuaternary500,
       elementsPrimary,
@@ -32539,13 +32539,13 @@
   const badgeLight = {
     name: "Badge",
     common: derived,
-    self: self$1g
+    self: self$1h
   };
 
   const badgeDark = {
     name: "Badge",
     common: derived$1,
-    self: self$1g
+    self: self$1h
   };
 
   var rtlStyle$m = cB("badge", [cM("rtl", `
@@ -32562,7 +32562,7 @@
     style: rtlStyle$m
   };
 
-  var style$1p = c$1([c$1("@keyframes badge-wave-spread", {
+  var style$1q = c$1([c$1("@keyframes badge-wave-spread", {
     from: {
       boxShadow: "0 0 0.5px 0px var(--u-ripple-color)",
       opacity: 0.6
@@ -32676,7 +32676,7 @@
       const themeRef = useTheme(
         "Badge",
         "-badge",
-        style$1p,
+        style$1q,
         badgeLight,
         props,
         mergedClsPrefixRef
@@ -32812,7 +32812,7 @@
     }
   });
 
-  function self$1f(vars) {
+  function self$1g(vars) {
     const {
       fontWeightStrong,
       fontBodyMedium,
@@ -32835,16 +32835,16 @@
   const breadcrumbLight = {
     name: "Breadcrumb",
     common: derived,
-    self: self$1f
+    self: self$1g
   };
 
   const breadcrumbDark = {
     name: "Breadcrumb",
     common: derived$1,
-    self: self$1f
+    self: self$1g
   };
 
-  var style$1o = cB("breadcrumb", `
+  var style$1p = cB("breadcrumb", `
   white-space: nowrap;
   cursor: default;
   line-height: var(--u-item-line-height);
@@ -32914,7 +32914,7 @@
       const themeRef = useTheme(
         "Breadcrumb",
         "-breadcrumb",
-        style$1o,
+        style$1p,
         breadcrumbLight,
         props,
         mergedClsPrefixRef
@@ -33099,7 +33099,7 @@
       top: n1
     })])])])]);
   }
-  var style$1n = cB("button-group", `
+  var style$1o = cB("button-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -33148,7 +33148,7 @@
     props: buttonGroupProps,
     setup(props) {
       const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-      useStyle("-button-group", style$1n, mergedClsPrefixRef);
+      useStyle("-button-group", style$1o, mergedClsPrefixRef);
       vue.provide(buttonGroupInjectionKey, props);
       const rtlEnabledRef = useRtl(
         "ButtonGroup",
@@ -39092,7 +39092,7 @@
     return resultDate.getTime();
   }
 
-  function self$1e(vars) {
+  function self$1f(vars) {
     const {
       borderRadius,
       fontWeightStrong,
@@ -39136,7 +39136,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$1e
+    self: self$1f
   });
 
   const calendarDark = {
@@ -39145,10 +39145,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$1e
+    self: self$1f
   };
 
-  var style$1m = c$1([cB("calendar", `
+  var style$1n = c$1([cB("calendar", `
     line-height: var(--u-line-height);
     font-size: var(--u-font-size);
     color: var(--u-text-color);
@@ -39287,7 +39287,7 @@
       const themeRef = useTheme(
         "Calendar",
         "-calendar",
-        style$1m,
+        style$1n,
         calendarLight,
         props,
         mergedClsPrefixRef
@@ -39575,7 +39575,7 @@
     paddingHuge: "27px 40px 28px"
   };
 
-  function self$1d(vars) {
+  function self$1e(vars) {
     const {
       borderRadius,
       fontWeight,
@@ -39641,13 +39641,13 @@
   const cardLight = {
     name: "Card",
     common: derived,
-    self: self$1d
+    self: self$1e
   };
 
   const cardDark$1 = {
     name: "Card",
     common: derived$1,
-    self: self$1d
+    self: self$1e
   };
 
   var rtlStyle$l = cB("card", [cM("rtl", `
@@ -39670,7 +39670,7 @@
 `, [c$1("&:first-child", {
     paddingTop: "var(--u-padding-bottom)"
   })]);
-  var style$1l = c$1([cB("card", `
+  var style$1m = c$1([cB("card", `
     font-size: var(--u-font-size);
     line-height: var(--u-line-height);
     font-weight: var(--u-font-weight);
@@ -39853,7 +39853,7 @@
       const themeRef = useTheme(
         "Card",
         "-card",
-        style$1l,
+        style$1m,
         cardLight,
         props,
         mergedClsPrefixRef
@@ -40436,7 +40436,7 @@
     }
   });
 
-  function self$1c(vars) {
+  function self$1d(vars) {
     const {
       textSecondary,
       textPrimary,
@@ -40471,10 +40471,10 @@
   const cardListLight = {
     name: "CardList",
     common: derived,
-    self: self$1c
+    self: self$1d
   };
 
-  var style$1k = cB("card-list-item", [c$1("&", {
+  var style$1l = cB("card-list-item", [c$1("&", {
     padding: "16px",
     borderRadius: "var(--u-border-radius)",
     display: "flex",
@@ -40595,7 +40595,7 @@
     props: cardListItemProps,
     setup(props, { slots }) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-card-list-item", style$1k, mergedClsPrefixRef);
+      useStyle("-card-list-item", style$1l, mergedClsPrefixRef);
       const isOpen = vue.ref(false);
       const toggle = () => {
         isOpen.value = !isOpen.value;
@@ -40726,7 +40726,7 @@
       const themeRef = useTheme(
         "CardList",
         "-card-list",
-        style$1k,
+        style$1l,
         cardListLight,
         props,
         mergedClsPrefixRef
@@ -40823,7 +40823,7 @@
     }
   });
 
-  function self$1b() {
+  function self$1c() {
     return {
       dotSize: "8px",
       dotColor: "rgba(255, 255, 255, .3)",
@@ -40837,13 +40837,13 @@
   const carouselLight = {
     name: "Carousel",
     common: derived,
-    self: self$1b
+    self: self$1c
   };
 
   const carouselDark = {
     name: "Carousel",
     common: derived$1,
-    self: self$1b
+    self: self$1c
   };
 
   const carouselMethodsInjectionKey = createInjectionKey("u-carousel-methods");
@@ -41127,7 +41127,7 @@
     }
   });
 
-  var style$1j = cB("carousel", `
+  var style$1k = cB("carousel", `
   position: relative;
   width: 100%;
   height: 100%;
@@ -42129,7 +42129,7 @@
       const themeRef = useTheme(
         "Carousel",
         "-carousel",
-        style$1j,
+        style$1k,
         carouselLight,
         props,
         mergedClsPrefixRef
@@ -42289,7 +42289,7 @@
     labelPadding: "0 16px"
   };
 
-  function self$1a(vars) {
+  function self$1b(vars) {
     const {
       lineHeightBodyLarge,
       fontBodyLarge,
@@ -42365,13 +42365,13 @@
   const checkboxLight = {
     name: "Checkbox",
     common: derived,
-    self: self$1a
+    self: self$1b
   };
 
   const checkboxDark = {
     name: "Checkbox",
     common: derived$1,
-    self: self$1a
+    self: self$1b
   };
 
   var rtlStyle$k = cB("checkbox", [cM("rtl", `
@@ -42383,7 +42383,7 @@
     style: rtlStyle$k
   };
 
-  function self$19(vars) {
+  function self$1a(vars) {
     const {
       borderRadius,
       heightMedium,
@@ -42424,7 +42424,7 @@
       Checkbox: checkboxLight,
       Empty: emptyLight
     },
-    self: self$19
+    self: self$1a
   });
 
   const cascaderDark = {
@@ -42437,14 +42437,14 @@
       Checkbox: checkboxDark,
       Empty: emptyLight
     },
-    self: self$19
+    self: self$1a
   };
 
   var CheckMark = /* @__PURE__ */ vue.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", class: "check-icon" }, /* @__PURE__ */ vue.h("path", { d: "M7.95833 14.6458C7.84722 14.6458 7.74306 14.6283 7.64583 14.5933C7.54861 14.5589 7.45833 14.5 7.375 14.4166L3.79167 10.8333C3.63889 10.6805 3.56583 10.4825 3.5725 10.2391C3.57972 9.99637 3.65972 9.79859 3.8125 9.64581C3.96528 9.49304 4.15972 9.41665 4.39583 9.41665C4.63195 9.41665 4.82639 9.49304 4.97917 9.64581L7.95833 12.625L15.0208 5.56248C15.1736 5.4097 15.3717 5.33331 15.615 5.33331C15.8578 5.33331 16.0556 5.4097 16.2083 5.56248C16.3611 5.71526 16.4375 5.91304 16.4375 6.15581C16.4375 6.39915 16.3611 6.5972 16.2083 6.74998L8.54167 14.4166C8.45833 14.5 8.36806 14.5589 8.27083 14.5933C8.17361 14.6283 8.06945 14.6458 7.95833 14.6458Z" }));
 
   var LineMark = /* @__PURE__ */ vue.h("svg", { width: "22", height: "24", viewBox: "0 0 22 24", class: "line-icon" }, /* @__PURE__ */ vue.h("path", { d: "M5.49998 13C5.24026 13 5.0224 12.904 4.8464 12.712C4.67101 12.5207 4.58331 12.2833 4.58331 12C4.58331 11.7167 4.67101 11.479 4.8464 11.287C5.0224 11.0957 5.24026 11 5.49998 11H16.5C16.7597 11 16.9773 11.0957 17.1526 11.287C17.3286 11.479 17.4166 11.7167 17.4166 12C17.4166 12.2833 17.3286 12.5207 17.1526 12.712C16.9773 12.904 16.7597 13 16.5 13H5.49998Z" }));
 
-  var style$1i = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
+  var style$1j = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
     from: {
       transform: "scale(0)"
     },
@@ -42658,7 +42658,7 @@
       const themeRef = useTheme(
         "Checkbox",
         "-checkbox",
-        style$1i,
+        style$1j,
         checkboxLight,
         props,
         mergedClsPrefixRef
@@ -43732,7 +43732,7 @@
     }
   });
 
-  var style$1h = c$1([cB("cascader-menu", `
+  var style$1i = c$1([cB("cascader-menu", `
     outline: none;
     position: relative;
     margin: 4px 0;
@@ -43974,7 +43974,7 @@
       const themeRef = useTheme(
         "Cascader",
         "-cascader",
-        style$1h,
+        style$1i,
         cascaderLight,
         props,
         mergedClsPrefixRef
@@ -44906,12 +44906,12 @@
     }
   };
 
-  function self$18() {
+  function self$19() {
     return commonVars$7;
   }
   const flexLight = {
     name: "Flex",
-    self: self$18
+    self: self$19
   };
 
   cB("space", [cM("rtl", `
@@ -45029,7 +45029,7 @@
     }
   });
 
-  function self$17(vars) {
+  function self$18(vars) {
     const {
       borderRadius,
       borderRadiusMedium,
@@ -45073,13 +45073,13 @@
   const listLight = {
     name: "List",
     common: derived,
-    self: self$17
+    self: self$18
   };
 
   const listDark$1 = {
     name: "List",
     common: derived$1,
-    self: self$17
+    self: self$18
   };
 
   var rtlStyle$j = cB("list", [cM("rtl", `
@@ -45098,7 +45098,7 @@
     style: rtlStyle$j
   };
 
-  function self$16(vars) {
+  function self$17(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -45113,7 +45113,7 @@
       InternalSelection: internalSelectionLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$16
+    self: self$17
   });
 
   const selectDark = {
@@ -45123,13 +45123,13 @@
       InternalSelection: internalSelectionDark,
       InternalSelectMenu: internalSelectMenuDark
     },
-    self: self$16
+    self: self$17
   };
 
   ({
     style: c$1([])});
 
-  function self$15(vars) {
+  function self$16(vars) {
     const {
       borderRadiusSmall,
       fontWeightStrong,
@@ -45224,19 +45224,19 @@
   const typographyLight = {
     name: "Typography",
     common: derived,
-    self: self$15
+    self: self$16
   };
 
   const typographyDark = {
     name: "Typography",
     common: derived$1,
-    self: self$15
+    self: self$16
   };
 
   const chatInputLight = {
     ...inputLight,
     self(vars) {
-      const originalInputSelf = self$1o(vars);
+      const originalInputSelf = self$1p(vars);
       const {
         elementsTertiary
       } = vars;
@@ -45256,7 +45256,7 @@
   const chatBadgeLight = {
     ...badgeLight,
     self(vars) {
-      const originalBadgeSelf = self$1g(vars);
+      const originalBadgeSelf = self$1h(vars);
       const {
         brandPrimary400,
         elementsSecondary
@@ -45268,7 +45268,7 @@
       };
     }
   };
-  function self$14(vars) {
+  function self$15(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -45341,7 +45341,7 @@
       HeaderShareIcon: iconLight,
       HeaderProfileIcon: iconLight
     },
-    self: self$14
+    self: self$15
   });
 
   const chatDark = createTheme$1({
@@ -45363,7 +45363,7 @@
       HeaderProfileIcon: iconDark$1
     },
     self: vars => {
-      const lightVars = self$14(vars);
+      const lightVars = self$15(vars);
       return {
         ...lightVars
       };
@@ -45471,7 +45471,7 @@
   };
   const listInjectionKey = createInjectionKey("u-list");
 
-  var style$1g = c$1([cB("align-start", `
+  var style$1h = c$1([cB("align-start", `
     align-self: self-start;
   `), cB("align-center", `
     align-self: center;
@@ -45604,7 +45604,7 @@
       const themeRef = useTheme(
         "List",
         "-list",
-        style$1g,
+        style$1h,
         listLight,
         props,
         mergedClsPrefixRef
@@ -46086,7 +46086,7 @@
     }
   });
 
-  var style$1f = cB("a", `
+  var style$1g = cB("a", `
   cursor: pointer;
   transition:
     color .3s var(--u-bezier),
@@ -46109,7 +46109,7 @@
       const themeRef = useTheme(
         "Typography",
         "-a",
-        style$1f,
+        style$1g,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46145,7 +46145,7 @@
     }
   });
 
-  var style$1e = cB("blockquote", `
+  var style$1f = cB("blockquote", `
   font-size: var(--u-font-size);
   line-height: var(--u-line-height);
   margin: 0;
@@ -46184,7 +46184,7 @@
       const themeRef = useTheme(
         "Typography",
         "-blockquote",
-        style$1e,
+        style$1f,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46233,7 +46233,7 @@
     }
   });
 
-  var style$1d = cB("h", `
+  var style$1e = cB("h", `
   font-size: var(--u-font-size);
   font-weight: var(--u-font-weight);
   margin: var(--u-margin);
@@ -46278,7 +46278,7 @@
         mergedClsPrefixRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Typography", "-h", style$1d, typographyLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Typography", "-h", style$1e, typographyLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           type
@@ -46342,7 +46342,7 @@
   const UH5$1 = createHeader("5");
   const UH6$1 = createHeader("6");
 
-  var style$1c = cB("hr", `
+  var style$1d = cB("hr", `
   margin: 12px 0;
   transition: border-color .3s var(--u-bezier);
   border-left: none;
@@ -46367,7 +46367,7 @@
       const themeRef = useTheme(
         "Typography",
         "-hr",
-        style$1c,
+        style$1d,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46421,7 +46421,7 @@
   `), c$1("&:last-child", `
     margin-bottom: 0;
   `)];
-  var style$1b = c$1([cB("ol", {
+  var style$1c = c$1([cB("ol", {
     fontSize: "var(--u-font-size)",
     padding: "var(--u-ol-padding)"
   }, [cM("align-text", {
@@ -46445,7 +46445,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$1b,
+        style$1c,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46498,7 +46498,7 @@
     }
   });
 
-  var style$1a = cB("p", `
+  var style$1b = cB("p", `
   box-sizing: border-box;
   transition: color .3s var(--u-bezier);
   margin: var(--u-margin);
@@ -46519,7 +46519,7 @@
       const themeRef = useTheme(
         "Typography",
         "-p",
-        style$1a,
+        style$1b,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46659,7 +46659,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$1b,
+        style$1c,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46712,7 +46712,7 @@
     }
   });
 
-  function self$13(vars) {
+  function self$14(vars) {
     const {
       fontWeight,
       fontBodyMedium,
@@ -46753,16 +46753,16 @@
   const progressLight = {
     name: "Progress",
     common: derived,
-    self: self$13
+    self: self$14
   };
 
   const progressDark = {
     name: "Progress",
     common: derived$1,
-    self: self$13
+    self: self$14
   };
 
-  function self$12(vars) {
+  function self$13(vars) {
     const {
       staticGreen,
       staticRed,
@@ -46819,7 +46819,7 @@
       Button: buttonLight,
       Progress: progressLight
     },
-    self: self$12
+    self: self$13
   });
 
   const uploadDark = {
@@ -46829,7 +46829,7 @@
       Button: buttonDark,
       Progress: progressDark
     },
-    self: self$12
+    self: self$13
   };
 
   var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -46844,7 +46844,7 @@
 
   const uploadInjectionKey = createInjectionKey("u-upload");
 
-  var style$19 = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
+  var style$1a = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
         border: var(--u-dragger-border-hover);
@@ -47305,10 +47305,10 @@
   const cardDark = {
     name: "CardList",
     common: derived$1,
-    self: self$1c
+    self: self$1d
   };
 
-  function self$11(vars) {
+  function self$12(vars) {
     const {
       textPrimary,
       fontBodyMedium,
@@ -47336,12 +47336,12 @@
   const codeLight = {
     name: "Code",
     common: derived,
-    self: self$11
+    self: self$12
   };
 
-  function self$10(vars) {
+  function self$11(vars) {
     return {
-      ...self$11(vars),
+      ...self$12(vars),
       // extracted from hljs atom-one-dark.scss
       "mono-3": "#5c6370",
       "hue-1": "#56b6c2",
@@ -47357,10 +47357,10 @@
   const codeDark = {
     name: "Code",
     common: derived$1,
-    self: self$10
+    self: self$11
   };
 
-  function self$$(vars) {
+  function self$10(vars) {
     const {
       cubicBezierEaseInOut
     } = vars;
@@ -47371,13 +47371,13 @@
   const collapseTransitionLight = {
     name: "CollapseTransition",
     common: derived,
-    self: self$$
+    self: self$10
   };
 
   const collapseTransitionDark = {
     name: "CollapseTransition",
     common: derived$1,
-    self: self$$
+    self: self$10
   };
 
   var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -47390,7 +47390,7 @@
     style: rtlStyle$g
   };
 
-  function self$_(vars) {
+  function self$$(vars) {
     const {
       fontWeight,
       fontBodyLarge,
@@ -47430,13 +47430,13 @@
   const collapseLight = {
     name: "Collapse",
     common: derived,
-    self: self$_
+    self: self$$
   };
 
   const collapseDark = {
     name: "Collapse",
     common: derived$1,
-    self: self$_
+    self: self$$
   };
 
   var rtlStyle$f = cB("collapse", [cM("rtl", `
@@ -47459,7 +47459,7 @@
     style: rtlStyle$f
   };
 
-  function self$Z(vars) {
+  function self$_(vars) {
     const {
       borderRadius,
       fontBodySmall,
@@ -47546,7 +47546,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$Z
+    self: self$_
   });
 
   const dropdownDark = {
@@ -47555,7 +47555,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$Z
+    self: self$_
   };
 
   const popselect = {
@@ -47567,7 +47567,7 @@
     }
   };
 
-  function self$Y(vars) {
+  function self$Z(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -47582,10 +47582,10 @@
       Popover: popoverLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$Y
+    self: self$Z
   });
 
-  function self$X(vars) {
+  function self$Y(vars) {
     const {
       brandPrimary100,
       transparencySecondary,
@@ -47683,7 +47683,7 @@
       Input: inputLight,
       Popselect: popselectLight
     },
-    self: self$X
+    self: self$Y
   });
 
   const paginationDark = {
@@ -47694,7 +47694,7 @@
       Input: inputDark,
       Popselect: popselect
     },
-    self: self$X
+    self: self$Y
   };
 
   var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -47711,7 +47711,7 @@
     peers: [inputRtl]
   };
 
-  function self$W(vars) {
+  function self$X(vars) {
     const {
       heightTiny,
       heightSmall,
@@ -47803,13 +47803,13 @@
   const radioLight = {
     name: "Radio",
     common: derived,
-    self: self$W
+    self: self$X
   };
 
   const radioDark = {
     name: "Radio",
     common: derived$1,
-    self: self$W
+    self: self$X
   };
 
   var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -47837,7 +47837,7 @@
     style: rtlStyle$d
   };
 
-  function self$V(vars) {
+  function self$W(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -47938,7 +47938,7 @@
       Ellipsis: ellipsisLight,
       Dropdown: dropdownLight
     },
-    self: self$V
+    self: self$W
   });
 
   const dataTableDark = {
@@ -47955,10 +47955,10 @@
       Ellipsis: ellipsisDark,
       Dropdown: dropdownDark
     },
-    self: self$V
+    self: self$W
   };
 
-  function self$U(vars) {
+  function self$V(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -48000,7 +48000,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$U
+    self: self$V
   });
 
   const timePickerDark = {
@@ -48011,7 +48011,7 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$U
+    self: self$V
   };
 
   const itemWidth = "38px";
@@ -48057,7 +48057,7 @@
     calendarRightPaddingYearrange: "0"
   };
 
-  function self$T(vars) {
+  function self$U(vars) {
     const {
       iconMedium,
       fontWeightStrong,
@@ -48158,7 +48158,7 @@
       Scrollbar: scrollbarLight,
       Select: internalSelectionLight
     },
-    self: self$T
+    self: self$U
   });
 
   const datePickerDark = {
@@ -48171,10 +48171,10 @@
       Scrollbar: scrollbarDark,
       Select: internalSelectionDark
     },
-    self: self$T
+    self: self$U
   };
 
-  function self$S(vars) {
+  function self$T(vars) {
     const {
       borderRadius,
       lineHeightBodyLarge,
@@ -48224,13 +48224,13 @@
   const descriptionsLight = {
     name: "Descriptions",
     common: derived,
-    self: self$S
+    self: self$T
   };
 
   const descriptionsDark = {
     name: "Descriptions",
     common: derived$1,
-    self: self$S
+    self: self$T
   };
 
   var commonVars$5 = {
@@ -48244,7 +48244,7 @@
     closeBorderRadius: "100px"
   };
 
-  function self$R(vars) {
+  function self$S(vars) {
     const {
       borderRadius,
       containerPrimary,
@@ -48301,7 +48301,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$R
+    self: self$S
   });
 
   const dialogDark = {
@@ -48310,10 +48310,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$R
+    self: self$S
   };
 
-  function self$Q(vars) {
+  function self$R(vars) {
     const {
       elementsQuaternary,
       textPrimary,
@@ -48333,13 +48333,13 @@
   const dividerLight = {
     name: "Divider",
     common: derived,
-    self: self$Q
+    self: self$R
   };
 
   const dividerDark = {
     name: "Divider",
     common: derived$1,
-    self: self$Q
+    self: self$R
   };
 
   var commonVars$4 = {
@@ -48355,7 +48355,7 @@
     contentBorderRadius: "24px"
   };
 
-  function self$P(vars) {
+  function self$Q(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48404,7 +48404,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$P
+    self: self$Q
   });
 
   const drawerDark = {
@@ -48413,7 +48413,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$P
+    self: self$Q
   };
 
   var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -48447,7 +48447,7 @@
     }
   };
 
-  function self$O() {
+  function self$P() {
     return commonVariables$1;
   }
   const dynamicInputLight = createTheme$1({
@@ -48457,7 +48457,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$O
+    self: self$P
   });
 
   var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -48498,12 +48498,12 @@
     }
   };
 
-  function self$N() {
+  function self$O() {
     return commonVars$3;
   }
   const spaceLight = {
     name: "Space",
-    self: self$N
+    self: self$O
   };
 
   var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -48575,7 +48575,7 @@
     }
   };
 
-  function self$M(vars) {
+  function self$N(vars) {
     const {
       containerPrimary,
       elementsQuaternary,
@@ -48591,7 +48591,7 @@
   const themeLight$4 = {
     name: "FloatButtonGroup",
     common: derived,
-    self: self$M
+    self: self$N
   };
 
   const floatButtonDark = {
@@ -48626,7 +48626,7 @@
     }
   };
 
-  function self$L(vars) {
+  function self$M(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48655,10 +48655,10 @@
   const themeLight$3 = {
     name: "FloatButton",
     common: derived,
-    self: self$L
+    self: self$M
   };
 
-  function self$K(vars) {
+  function self$L(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -48713,16 +48713,16 @@
   const formLight = {
     name: "Form",
     common: derived,
-    self: self$K
+    self: self$L
   };
 
   const formItemDark = {
     name: "Form",
     common: derived$1,
-    self: self$K
+    self: self$L
   };
 
-  function self$J(vars) {
+  function self$K(vars) {
     const {
       brandPrimary500,
       staticGreen,
@@ -48759,16 +48759,16 @@
   const gradientTextLight = {
     name: "GradientText",
     common: derived,
-    self: self$J
+    self: self$K
   };
 
   const gradientTextDark = {
     name: "GradientText",
     common: derived$1,
-    self: self$J
+    self: self$K
   };
 
-  function self$I(vars) {
+  function self$J(vars) {
     const {
       textSecondary
     } = vars;
@@ -48783,7 +48783,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$I
+    self: self$J
   });
 
   const inputNumberDark = {
@@ -48793,10 +48793,10 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$I
+    self: self$J
   };
 
-  function self$H() {
+  function self$I() {
     return {
       inputWidthSmall: "44px",
       inputWidthMedium: "50px",
@@ -48812,7 +48812,7 @@
     peers: {
       Input: inputLight
     },
-    self: self$H
+    self: self$I
   });
 
   const inputOtpDark = {
@@ -48821,7 +48821,7 @@
     peers: {
       Input: inputDark
     },
-    self: self$H
+    self: self$I
   };
 
   var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -48833,7 +48833,7 @@
     style: rtlStyle$8
   };
 
-  function self$G(vars) {
+  function self$H(vars) {
     const {
       textPrimary,
       textQuaternary,
@@ -48879,7 +48879,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$G
+    self: self$H
   });
 
   const layoutDark = {
@@ -48888,7 +48888,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$G
+    self: self$H
   };
 
   const rowDark = {
@@ -48925,7 +48925,7 @@
     style: rtlStyle$7
   };
 
-  function self$F(vars) {
+  function self$G(vars) {
     const {
       brandPrimary500,
       staticRed
@@ -48939,16 +48939,16 @@
   const loadingBarLight = {
     name: "LoadingBar",
     common: derived,
-    self: self$F
+    self: self$G
   };
 
   const loadingBarDark = {
     name: "LoadingBar",
     common: derived$1,
-    self: self$F
+    self: self$G
   };
 
-  function self$E(vars) {
+  function self$F(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -48971,7 +48971,7 @@
       Scrollbar: scrollbarLight,
       Code: codeLight
     },
-    self: self$E
+    self: self$F
   });
 
   const logDark = {
@@ -48981,25 +48981,25 @@
       Scrollbar: scrollbarDark,
       Code: codeDark
     },
-    self: self$E
+    self: self$F
   };
 
-  function self$D() {
+  function self$E() {
     return {};
   }
   const marqueeLight = {
     name: "Marquee",
     common: derived,
-    self: self$D
+    self: self$E
   };
 
   const marqueeDark = {
     name: "Marquee",
     common: derived$1,
-    self: self$D
+    self: self$E
   };
 
-  function self$C(vars) {
+  function self$D(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -49014,7 +49014,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$C
+    self: self$D
   });
 
   const listDark = {
@@ -49024,7 +49024,7 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$C
+    self: self$D
   };
 
   function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49067,7 +49067,7 @@
       groupTextColorInverted: groupTextColor
     };
   }
-  function self$B(vars) {
+  function self$C(vars) {
     const {
       textSecondary,
       borderRadiusSmall,
@@ -49135,7 +49135,7 @@
       Tooltip: tooltipLight,
       Dropdown: dropdownLight
     },
-    self: self$B
+    self: self$C
   });
 
   const menuDark = {
@@ -49145,9 +49145,61 @@
       Tooltip: tooltipDark,
       Dropdown: dropdownDark
     },
-    self: self$B
+    self: self$C
   };
 
+  function self$B(vars) {
+    const {
+      borderRadiusLarge,
+      elementsSecondary,
+      elementsTertiary,
+      textPrimary,
+      textSecondary,
+      textTertiary,
+      brandPrimary400,
+      staticGreen,
+      staticRed,
+      staticWhite
+    } = vars;
+    return {
+      messageBubbleBackgroundColorOwn: elementsTertiary,
+      messageBubbleBackgroundColorOther: elementsTertiary,
+      messageBubbleTextColorOwn: textPrimary,
+      messageBubbleTextColorOther: textPrimary,
+      messageTimeColor: textTertiary,
+      messageStatusReadColor: brandPrimary400,
+      messageStatusSuccessColor: staticGreen,
+      attachmentBackgroundColorOwn: staticWhite,
+      attachmentBackgroundColorOther: staticWhite,
+      messageErrorColor: staticRed,
+      messageBorderRadius: borderRadiusLarge,
+      unreadNotificationBackgroundColor: brandPrimary400,
+      unreadNotificationTextColor: elementsSecondary,
+      serviceMessageTextColor: textSecondary,
+      serviceMessageBackgroundColor: "transparent",
+      messageTitleColor: textPrimary
+    };
+  }
+  const messageBubbleLight = createTheme$1({
+    name: "MessageBubble",
+    common: derived,
+    peers: {
+      StatusIcon: iconLight
+    },
+    self: self$B
+  });
+
+  const messageBubbleDark = createTheme$1({
+    name: "MessageBubble",
+    common: derived$1,
+    peers: {
+      StatusIcon: iconDark$1
+    },
+    self: vars => ({
+      ...self$B(vars)
+    })
+  });
+
   function self$A(vars) {
     const {
       transparencyModal,
@@ -50573,7 +50625,7 @@
   };
   const imageContextKey = createInjectionKey("u-image");
 
-  var style$18 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+  var style$19 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -50657,7 +50709,7 @@
       const themeRef = useTheme(
         "Image",
         "-image",
-        style$18,
+        style$19,
         imageLight,
         props,
         mergedClsPrefixRef
@@ -51588,7 +51640,7 @@
     }
   });
 
-  var style$17 = c$1([c$1("@keyframes spin-rotate", `
+  var style$18 = c$1([c$1("@keyframes spin-rotate", `
     from {
       transform: rotate(0);
     }
@@ -51692,7 +51744,7 @@
       const themeRef = useTheme(
         "Spin",
         "-spin",
-        style$17,
+        style$18,
         spinLight,
         props,
         mergedClsPrefixRef
@@ -52949,7 +53001,7 @@
       const themeRef = useTheme(
         "Upload",
         "-upload",
-        style$19,
+        style$1a,
         uploadLight,
         props,
         mergedClsPrefixRef
@@ -53364,6 +53416,98 @@
     }
   });
 
+  var MessageBubbleType = /* @__PURE__ */(MessageBubbleType2 => {
+    MessageBubbleType2["MESSAGE"] = "message";
+    MessageBubbleType2["SERVICE"] = "service";
+    return MessageBubbleType2;
+  })(MessageBubbleType || {});
+  var MessageBubbleServiceVariant = /* @__PURE__ */(MessageBubbleServiceVariant2 => {
+    MessageBubbleServiceVariant2["UNREAD"] = "unread";
+    MessageBubbleServiceVariant2["SYSTEM"] = "system";
+    MessageBubbleServiceVariant2["EVENT"] = "event";
+    MessageBubbleServiceVariant2["DIVIDER"] = "divider";
+    return MessageBubbleServiceVariant2;
+  })(MessageBubbleServiceVariant || {});
+  var MessageBubbleStatus = /* @__PURE__ */(MessageBubbleStatus2 => {
+    MessageBubbleStatus2["READ"] = "read";
+    MessageBubbleStatus2["UNREAD"] = "unread";
+    MessageBubbleStatus2["PENDING"] = "pending";
+    MessageBubbleStatus2["RETRY"] = "retry";
+    return MessageBubbleStatus2;
+  })(MessageBubbleStatus || {});
+  var MessageBubbleAttachmentStatus = /* @__PURE__ */(MessageBubbleAttachmentStatus2 => {
+    MessageBubbleAttachmentStatus2["PENDING"] = "pending";
+    MessageBubbleAttachmentStatus2["UPLOADING"] = "uploading";
+    MessageBubbleAttachmentStatus2["FINISHED"] = "finished";
+    MessageBubbleAttachmentStatus2["ERROR"] = "error";
+    return MessageBubbleAttachmentStatus2;
+  })(MessageBubbleAttachmentStatus || {});
+  const statusIconMapper$1 = {
+    ["read" /* READ */]: CheckmarkDoneSharp,
+    ["pending" /* PENDING */]: MdTime,
+    ["retry" /* RETRY */]: Refresh,
+    ["unread" /* UNREAD */]: CheckmarkDoneSharp
+  };
+  const messageBubbleProps = {
+    ...useTheme.props,
+    type: {
+      type: String,
+      default: "message" /* MESSAGE */
+    },
+    serviceVariant: {
+      type: String,
+      default: "system" /* SYSTEM */
+    },
+    id: {
+      type: [String, Number, Symbol],
+      default: void 0
+    },
+    isOwn: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: [String, Function],
+      default: void 0
+    },
+    content: {
+      type: [String, Function],
+      default: void 0
+    },
+    timestamp: {
+      type: [String, Number, Date, Function],
+      default: void 0
+    },
+    status: {
+      type: String,
+      default: void 0
+    },
+    attachments: {
+      type: [Array, Object],
+      default: void 0
+    },
+    uploadProps: {
+      type: Object,
+      default: void 0
+    },
+    actions: {
+      type: Array,
+      default: void 0
+    },
+    retryText: {
+      type: String,
+      default: void 0
+    },
+    onRetry: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentDownload: {
+      type: Function,
+      default: void 0
+    }
+  };
+
   const dropdownMenuInjectionKey = createInjectionKey("u-dropdown-menu");
   const dropdownInjectionKey = createInjectionKey("u-dropdown");
   const dropdownOptionInjectionKey = createInjectionKey("u-dropdown-option");
@@ -53973,7 +54117,7 @@
     }
   });
 
-  var style$16 = cB("dropdown-menu", `
+  var style$17 = cB("dropdown-menu", `
   transform-origin: var(--v-transform-origin);
   background-color: var(--u-color);
   border-radius: var(--u-border-radius);
@@ -54220,7 +54364,7 @@
       const themeRef = useTheme(
         "Dropdown",
         "-dropdown",
-        style$16,
+        style$17,
         dropdownLight,
         props,
         mergedClsPrefixRef
@@ -54472,93 +54616,266 @@
     }
   });
 
-  var MessageStatus = /* @__PURE__ */(MessageStatus2 => {
-    MessageStatus2["READ"] = "read";
-    MessageStatus2["UNREAD"] = "unread";
-    MessageStatus2["PENDING"] = "pending";
-    MessageStatus2["RETRY"] = "retry";
-    MessageStatus2["INCOME"] = "income";
-    return MessageStatus2;
-  })(MessageStatus || {});
-  var ChatMessageType = /* @__PURE__ */(ChatMessageType2 => {
-    ChatMessageType2["TEXT"] = "text";
-    ChatMessageType2["FILE"] = "file";
-    ChatMessageType2["MARK"] = "mark";
-    return ChatMessageType2;
-  })(ChatMessageType || {});
-  var ChatAttachmentStatus = /* @__PURE__ */(ChatAttachmentStatus2 => {
-    ChatAttachmentStatus2["PENDING"] = "pending";
-    ChatAttachmentStatus2["UPLOADING"] = "uploading";
-    ChatAttachmentStatus2["FINISHED"] = "finished";
-    ChatAttachmentStatus2["ERROR"] = "error";
-    return ChatAttachmentStatus2;
-  })(ChatAttachmentStatus || {});
-  var ChatMarkType = /* @__PURE__ */(ChatMarkType2 => {
-    ChatMarkType2["SYSTEM"] = "system";
-    ChatMarkType2["EVENT"] = "event";
-    ChatMarkType2["DIVIDER"] = "divider";
-    return ChatMarkType2;
-  })(ChatMarkType || {});
-  var ChatBubbleActionKey = /* @__PURE__ */(ChatBubbleActionKey2 => {
-    ChatBubbleActionKey2["EDIT"] = "edit";
-    ChatBubbleActionKey2["COPY"] = "copy";
-    ChatBubbleActionKey2["DELETE"] = "delete";
-    return ChatBubbleActionKey2;
-  })(ChatBubbleActionKey || {});
-  const chatInjectionKey = createInjectionKey("chat");
+  var style$16 = cB("message-bubble", `
+  box-sizing: border-box;
+  width: 100%;
+`, [cE("message", `
+    display: flex;
+    margin-bottom: 8px;
+    flex-shrink: 0;
+    width: 100%;
+  `, [cM("own", `
+      justify-content: flex-end;
+    `), cM("other", `
+      justify-content: flex-start;
+    `)]), cE("message-wrapper", `
+    max-width: 70%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex-shrink: 0;
+  `, [cM("own", `
+      align-items: flex-end;
+    `), cM("other", `
+      align-items: flex-start;
+    `)]), cE("bubble", `
+    border-radius: var(--u-message-bubble-border-radius);
+    font-size: 14px;
+    line-height: 20px;
+    word-wrap: break-word;
+    background-color: var(--u-message-bubble-background-color-other);
+    color: var(--u-message-bubble-text-color-other);
+    border-bottom-left-radius: 6px;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+  `, [cM("own", `
+      background-color: var(--u-message-bubble-background-color-own);
+      color: var(--u-message-bubble-text-color-own);
+      border-bottom-left-radius: var(--u-message-bubble-border-radius);
+      border-bottom-right-radius: 6px;
+    `)]), cE("title", `
+    color: var(--u-message-bubble-title-color);
+    padding: 12px 16px 0;
+    white-space: pre-wrap;
+  `), cE("text", `
+    padding: 12px 16px;
+    white-space: pre-wrap;
+  `), cE("text", `
+    padding-top: 8px;
+  `, [c$1("&&:first-child", `
+      padding-top: 12px;
+    `)]), cE("meta", `
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    color: var(--u-message-bubble-time-color);
+    margin-top: 2px;
+  `, [cM("own", `
+      justify-content: flex-end;
+    `), cM("other", `
+      justify-content: flex-start;
+    `)]), cE("time", `
+    font-size: 11px;
+    color: var(--u-message-bubble-time-color);
+  `), cE("status", `
+    color: var(--u-message-bubble-status-success-color);
+    display: flex;
+    align-items: center;
+  `), cE("status-icon", `
+    color: var(--u-message-bubble-time-color);
+  `, [cM("read", `
+      color: var(--u-message-bubble-status-read-color);
+    `), cM("retry", `
+      color: var(--u-message-bubble-error-color);
+    `)]), cE("retry", `
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+  `), cE("retry-icon", `
+    color: var(--u-message-bubble-error-color);
+  `), cE("retry-text", `
+    color: var(--u-message-bubble-error-color);
+    font-size: 11px;
+    font-weight: 500;
+  `), cE("service", `
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin: 12px 0;
+  `, [c$1("span", `
+      padding: 6px 12px;
+      border-radius: 8px;
+      color: var(--u-message-bubble-service-text-color);
+      background-color: var(--u-message-bubble-service-background-color);
+      text-align: center;
+    `), cM("unread", `
+      background-color: var(--u-message-bubble-unread-background-color);
+      color: var(--u-message-bubble-unread-text-color);
+      padding: 6px 12px;
+      margin: 8px 0;
+    `, [c$1("span", `
+        display: inline-block;
+        white-space: nowrap;
+        padding: 0;
+        border-radius: 0;
+        background-color: transparent;
+        color: inherit;
+      `)])]), c$1(".u-message-bubble__bubble--own .u-upload-file", `
+    background-color: var(--u-message-bubble-attachment-background-color-own);
+  `), c$1(".u-message-bubble__bubble--other .u-upload-file", `
+    background-color: var(--u-message-bubble-attachment-background-color-other);
+  `), c$1(".u-upload-file-list .u-upload-file.u-upload-file--text-type", `
+    margin-bottom: 0px;
+  `)]);
 
-  var ChatAttachmentComponent = vue.defineComponent({
-    name: "ChatAttachment",
-    props: {
-      message: {
-        type: Object,
-        required: true
-      },
-      attachments: {
-        type: Array,
-        required: true
-      },
-      uploadProps: {
-        type: Object,
-        default: void 0
-      },
-      withPadding: {
-        type: Boolean,
-        default: false
-      }
-    },
+  var _UMessageBubble = vue.defineComponent({
+    name: "MessageBubble",
+    props: messageBubbleProps,
+    slots: Object,
     setup(props, { slots }) {
-      const UChat = vue.inject(chatInjectionKey, null);
-      const onAttachmentDownload = UChat?.onAttachmentDownload;
+      const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+      const themeRef = useTheme(
+        "MessageBubble",
+        "-message-bubble",
+        style$16,
+        messageBubbleLight,
+        props,
+        mergedClsPrefixRef
+      );
+      const contextMenuShow = vue.ref(false);
+      const mergedRetryTextRef = vue.computed(
+        () => props.retryText ?? "Retry"
+      );
+      const normalizedAttachmentsRef = vue.computed(() => {
+        if (!props.attachments)
+          return [];
+        return Array.isArray(props.attachments) ? props.attachments : [props.attachments];
+      });
+      const messagePayloadRef = vue.computed(() => ({
+        id: props.id,
+        isOwn: props.isOwn,
+        title: props.title,
+        content: props.content,
+        timestamp: props.timestamp,
+        status: props.status,
+        attachments: normalizedAttachmentsRef.value
+      }));
+      const cssVarsRef = vue.computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            messageBubbleBackgroundColorOwn,
+            messageBubbleBackgroundColorOther,
+            messageBubbleTextColorOwn,
+            messageBubbleTextColorOther,
+            messageTimeColor,
+            messageStatusReadColor,
+            messageStatusSuccessColor,
+            attachmentBackgroundColorOwn,
+            attachmentBackgroundColorOther,
+            messageErrorColor,
+            messageBorderRadius,
+            unreadNotificationBackgroundColor,
+            unreadNotificationTextColor,
+            serviceMessageTextColor,
+            serviceMessageBackgroundColor,
+            messageTitleColor
+          }
+        } = themeRef.value;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-message-bubble-background-color-own": messageBubbleBackgroundColorOwn,
+          "--u-message-bubble-background-color-other": messageBubbleBackgroundColorOther,
+          "--u-message-bubble-text-color-own": messageBubbleTextColorOwn,
+          "--u-message-bubble-text-color-other": messageBubbleTextColorOther,
+          "--u-message-bubble-time-color": messageTimeColor,
+          "--u-message-bubble-status-read-color": messageStatusReadColor,
+          "--u-message-bubble-status-success-color": messageStatusSuccessColor,
+          "--u-message-bubble-attachment-background-color-own": attachmentBackgroundColorOwn,
+          "--u-message-bubble-attachment-background-color-other": attachmentBackgroundColorOther,
+          "--u-message-bubble-error-color": messageErrorColor,
+          "--u-message-bubble-border-radius": messageBorderRadius,
+          "--u-message-bubble-unread-background-color": unreadNotificationBackgroundColor,
+          "--u-message-bubble-unread-text-color": unreadNotificationTextColor,
+          "--u-message-bubble-service-text-color": serviceMessageTextColor,
+          "--u-message-bubble-service-background-color": serviceMessageBackgroundColor,
+          "--u-message-bubble-title-color": messageTitleColor
+        };
+      });
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass("message-bubble", void 0, cssVarsRef, props) : void 0;
+      const messageContextMenuOptions = vue.computed(() => {
+        if (!props.actions || props.actions.length === 0) {
+          return [];
+        }
+        const result = [];
+        for (const action of props.actions) {
+          if (action.visible && !action.visible(messagePayloadRef.value)) {
+            continue;
+          }
+          result.push({
+            key: action.key,
+            label: typeof action.label === "function" ? action.label() : action.label
+          });
+        }
+        return result;
+      });
+      const resolveRenderContent = (content) => {
+        if (typeof content === "function") {
+          return content();
+        }
+        if (content instanceof Date) {
+          return content.toString();
+        }
+        return content;
+      };
       const getThumbnailUrl = (attachment) => {
         const url = [attachment.preview, attachment.thumbnail].find(
           (value) => typeof value === "string"
         );
         return url ?? null;
       };
-      const handleDownload = async (file) => {
-        if (onAttachmentDownload?.value) {
-          const attachment = props.attachments.find(
-            (att) => att.name === file.name
+      const handleAttachmentDownload = async (file) => {
+        if (props.onAttachmentDownload) {
+          const attachment = normalizedAttachmentsRef.value.find(
+            (item) => item.name === file.name
           );
           if (attachment) {
             try {
-              await onAttachmentDownload.value(attachment);
+              await props.onAttachmentDownload(attachment);
               return false;
-            } catch (error) {
-              console.error("Download failed:", error);
+            } catch {
               return false;
             }
           }
         }
         return true;
       };
-      const renderAttachment = () => {
-        const fileList = props.attachments.map(
+      const handleRetryClick = () => {
+        props.onRetry?.(messagePayloadRef.value);
+      };
+      const handleContextMenuSelect = (key) => {
+        if (!props.actions || props.actions.length === 0) {
+          contextMenuShow.value = false;
+          return;
+        }
+        const action = props.actions.find((action2) => action2.key === key);
+        if (action) {
+          action.handler(messagePayloadRef.value);
+        }
+        contextMenuShow.value = false;
+      };
+      const renderAttachment = (withPadding = false) => {
+        if (slots.messageAttachment) {
+          return slots.messageAttachment(messagePayloadRef.value);
+        }
+        const fileList = normalizedAttachmentsRef.value.map(
           (attachment) => ({
-            id: `${String(attachment.id)}`,
+            id: String(attachment.id),
             name: attachment.name,
-            status: attachment.status || ChatAttachmentStatus.FINISHED,
+            status: attachment.status || MessageBubbleAttachmentStatus.FINISHED,
             percentage: attachment.percentage ?? null,
             url: attachment.url ?? null,
             thumbnailUrl: getThumbnailUrl(attachment),
@@ -54572,48 +54889,265 @@
           {
             abstract: true,
             fileList,
-            fileListStyle: props.withPadding ? {
+            fileListStyle: withPadding ? {
               display: "flex",
               flexDirection: "column",
               gap: "2px",
               marginTop: "0"
             } : void 0,
             showRemoveButton: false,
-            showDownloadButton: props.attachments.some(
-              (attachment) => attachment.status === ChatAttachmentStatus.FINISHED && attachment.url && attachment.url !== "#"
+            showDownloadButton: normalizedAttachmentsRef.value.some(
+              (attachment) => attachment.status === MessageBubbleAttachmentStatus.FINISHED && attachment.url && attachment.url !== "#"
             ),
-            showRetryButton: props.attachments.some(
-              (attachment) => attachment.status === ChatAttachmentStatus.ERROR
+            showRetryButton: normalizedAttachmentsRef.value.some(
+              (attachment) => attachment.status === MessageBubbleAttachmentStatus.ERROR
             ),
-            onDownload: handleDownload,
+            onDownload: handleAttachmentDownload,
             ...props.uploadProps
           },
           {
             default: () => /* @__PURE__ */ vue.h(_UUploadFileList, null, {
               "upload-file-title": slots["upload-file-title"] ? ({ file }) => slots["upload-file-title"]?.(file) : void 0,
               "upload-file-subtitle": slots["upload-file-subtitle"] ? ({ file }) => slots["upload-file-subtitle"]?.(file) : ({ file }) => {
-                const attachment = props.attachments.find(
-                  (attachment2) => attachment2.name === file.name
+                const attachment = normalizedAttachmentsRef.value.find(
+                  (item) => item.name === file.name
                 );
                 return /* @__PURE__ */ vue.h("span", { style: { fontSize: "12px", color: "#999" } }, attachment?.size || file.file?.size);
               }
             })
           }
         );
-        if (props.withPadding) {
+        if (withPadding) {
           return /* @__PURE__ */ vue.h("div", { style: { padding: "2px" } }, uploadComponent);
         }
         return uploadComponent;
       };
-      return () => {
-        if (slots.default) {
-          return slots.default(props.message);
+      const renderMessage = () => {
+        const hasBubbleActionsSlot = slots.bubbleActions !== void 0;
+        const hasBubbleActionsConfig = Boolean(
+          props.actions && props.actions.length > 0
+        );
+        const hasTitle = Boolean(props.title || slots.title);
+        const hasContentInsideBubble = Boolean(
+          props.content || slots.default || hasTitle || normalizedAttachmentsRef.value.length > 1
+        );
+        const messageBubbleContent = hasContentInsideBubble ? /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefixRef.value}-message-bubble__bubble`,
+              props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__bubble--own` : `${mergedClsPrefixRef.value}-message-bubble__bubble--other`
+            ]
+          },
+          hasTitle && /* @__PURE__ */ vue.h(
+            _UText,
+            {
+              class: `${mergedClsPrefixRef.value}-message-bubble__title`,
+              variant: "body-l-semi-bold"
+            },
+            slots.title ? slots.title(messagePayloadRef.value) : resolveRenderContent(props.title)
+          ),
+          normalizedAttachmentsRef.value.length > 0 && renderAttachment(true),
+          (props.content || slots.default) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content))
+        ) : normalizedAttachmentsRef.value.length === 1 ? renderAttachment() : null;
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefixRef.value}-message-bubble__message`,
+              props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__message--own` : `${mergedClsPrefixRef.value}-message-bubble__message--other`
+            ]
+          },
+          /* @__PURE__ */ vue.h(
+            "div",
+            {
+              class: [
+                `${mergedClsPrefixRef.value}-message-bubble__message-wrapper`,
+                props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__message-wrapper--own` : `${mergedClsPrefixRef.value}-message-bubble__message-wrapper--other`
+              ]
+            },
+            hasBubbleActionsSlot ? /* @__PURE__ */ vue.h(
+              "div",
+              {
+                onContextmenu: (event) => {
+                  event.preventDefault();
+                  contextMenuShow.value = false;
+                  void vue.nextTick().then(() => {
+                    contextMenuShow.value = true;
+                  });
+                }
+              },
+              slots.bubbleActions?.(messagePayloadRef.value),
+              messageBubbleContent
+            ) : hasBubbleActionsConfig ? /* @__PURE__ */ vue.h(
+              _UDropdown,
+              {
+                show: contextMenuShow.value,
+                trigger: "manual",
+                placement: "bottom-start",
+                options: messageContextMenuOptions.value,
+                onSelect: handleContextMenuSelect,
+                onUpdateShow: (show) => {
+                  contextMenuShow.value = show;
+                },
+                onClickoutside: () => {
+                  contextMenuShow.value = false;
+                }
+              },
+              {
+                default: () => /* @__PURE__ */ vue.h(
+                  "div",
+                  {
+                    onContextmenu: (event) => {
+                      event.preventDefault();
+                      contextMenuShow.value = false;
+                      void vue.nextTick().then(() => {
+                        contextMenuShow.value = true;
+                      });
+                    }
+                  },
+                  messageBubbleContent
+                )
+              }
+            ) : messageBubbleContent,
+            /* @__PURE__ */ vue.h(
+              "div",
+              {
+                class: [
+                  `${mergedClsPrefixRef.value}-message-bubble__meta`,
+                  props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__meta--own` : `${mergedClsPrefixRef.value}-message-bubble__meta--other`
+                ]
+              },
+              props.status === MessageBubbleStatus.RETRY ? /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefixRef.value}-message-bubble__retry`,
+                  onClick: handleRetryClick
+                },
+                /* @__PURE__ */ vue.h(
+                  UIcon$1,
+                  {
+                    size: 16,
+                    component: statusIconMapper$1[MessageBubbleStatus.RETRY],
+                    class: `${mergedClsPrefixRef.value}-message-bubble__retry-icon`,
+                    theme: themeRef.value.peers.StatusIcon,
+                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
+                  }
+                ),
+                /* @__PURE__ */ vue.h(
+                  "span",
+                  {
+                    class: `${mergedClsPrefixRef.value}-message-bubble__retry-text`
+                  },
+                  mergedRetryTextRef.value
+                )
+              ) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
+                "span",
+                {
+                  class: `${mergedClsPrefixRef.value}-message-bubble__time`
+                },
+                resolveRenderContent(props.timestamp)
+              ), props.isOwn && props.status && /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefixRef.value}-message-bubble__status`
+                },
+                slots.messageStatus ? slots.messageStatus(messagePayloadRef.value) : statusIconMapper$1[props.status] && /* @__PURE__ */ vue.h(
+                  UIcon$1,
+                  {
+                    size: 16,
+                    component: statusIconMapper$1[props.status],
+                    class: [
+                      `${mergedClsPrefixRef.value}-message-bubble__status-icon`,
+                      `${mergedClsPrefixRef.value}-message-bubble__status-icon--${String(props.status)}`
+                    ],
+                    theme: themeRef.value.peers.StatusIcon,
+                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
+                  }
+                )
+              ))
+            )
+          )
+        );
+      };
+      const renderService = () => {
+        if (slots.service) {
+          return slots.service(props.serviceVariant);
         }
-        return renderAttachment();
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefixRef.value}-message-bubble__service`,
+              `${mergedClsPrefixRef.value}-message-bubble__service--${props.serviceVariant}`
+            ]
+          },
+          props.content && /* @__PURE__ */ vue.h("span", null, resolveRenderContent(props.content))
+        );
+      };
+      return {
+        mergedClsPrefixRef,
+        inlineThemeDisabled,
+        cssVars: cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender,
+        renderMessage,
+        renderService
       };
+    },
+    render() {
+      this.onRender?.();
+      return /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [`${this.mergedClsPrefixRef}-message-bubble`, this.themeClass],
+          style: this.inlineThemeDisabled ? void 0 : this.cssVars
+        },
+        this.type === MessageBubbleType.SERVICE ? this.renderService() : this.renderMessage()
+      );
     }
   });
 
+  var MessageStatus = /* @__PURE__ */(MessageStatus2 => {
+    MessageStatus2["READ"] = "read";
+    MessageStatus2["UNREAD"] = "unread";
+    MessageStatus2["PENDING"] = "pending";
+    MessageStatus2["RETRY"] = "retry";
+    MessageStatus2["INCOME"] = "income";
+    return MessageStatus2;
+  })(MessageStatus || {});
+  var ChatMessageType = /* @__PURE__ */(ChatMessageType2 => {
+    ChatMessageType2["TEXT"] = "text";
+    ChatMessageType2["FILE"] = "file";
+    ChatMessageType2["MARK"] = "mark";
+    return ChatMessageType2;
+  })(ChatMessageType || {});
+  var ChatAttachmentStatus = /* @__PURE__ */(ChatAttachmentStatus2 => {
+    ChatAttachmentStatus2["PENDING"] = "pending";
+    ChatAttachmentStatus2["UPLOADING"] = "uploading";
+    ChatAttachmentStatus2["FINISHED"] = "finished";
+    ChatAttachmentStatus2["ERROR"] = "error";
+    return ChatAttachmentStatus2;
+  })(ChatAttachmentStatus || {});
+  var ChatMarkType = /* @__PURE__ */(ChatMarkType2 => {
+    ChatMarkType2["SYSTEM"] = "system";
+    ChatMarkType2["EVENT"] = "event";
+    ChatMarkType2["DIVIDER"] = "divider";
+    return ChatMarkType2;
+  })(ChatMarkType || {});
+  var ChatBubbleActionKey = /* @__PURE__ */(ChatBubbleActionKey2 => {
+    ChatBubbleActionKey2["EDIT"] = "edit";
+    ChatBubbleActionKey2["COPY"] = "copy";
+    ChatBubbleActionKey2["DELETE"] = "delete";
+    return ChatBubbleActionKey2;
+  })(ChatBubbleActionKey || {});
+  const chatInjectionKey = createInjectionKey("chat");
+  const markTypeToServiceVariantMap = {
+    ["system" /* SYSTEM */]: MessageBubbleServiceVariant.SYSTEM,
+    ["event" /* EVENT */]: MessageBubbleServiceVariant.EVENT,
+    ["divider" /* DIVIDER */]: MessageBubbleServiceVariant.DIVIDER
+  };
+
   var style$15 = cB("chat", `
   height: 100%;
   background-color: transparent;
@@ -54744,7 +55278,10 @@
           height: 100%;
           max-height: 100%;
           min-height: 0;
-        `, [cE("header", `
+        `, [cM("standalone", `
+            border: none;
+            border-radius: 0;
+          `), cE("header", `
             border-bottom: 1px solid var(--u-border-color);
             width: 100%;
             padding: 24px 20px 10px 24px;
@@ -54994,12 +55531,6 @@
     background-color: var(--u-attachment-background-color-other);
   `)]);
 
-  const statusIconMapper$1 = {
-    [MessageStatus.READ]: CheckmarkDoneSharp,
-    [MessageStatus.PENDING]: MdTime,
-    [MessageStatus.RETRY]: Refresh,
-    [MessageStatus.UNREAD]: CheckmarkDoneSharp
-  };
   const chatMessagesProps = {
     ...useTheme.props,
     messages: {
@@ -55059,8 +55590,6 @@
       const { mergedClsPrefixRef } = useConfig(props);
       const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
-      const contextMenuShow = vue.ref(false);
-      const contextMenuMessage = vue.ref();
       const cssVarsRef = vue.computed(() => {
         const {
           common: {
@@ -55148,49 +55677,23 @@
       const handleMessageRetry = (message) => {
         props.onMessageRetry?.(message);
       };
-      const messageContextMenuOptions = vue.computed(() => {
-        const message = contextMenuMessage.value;
-        if (!message)
-          return;
+      const getMessageBubbleActions = (message) => {
         const bubbleActions = UChat?.bubbleActionsRef?.value;
-        if (!bubbleActions || bubbleActions.length === 0) {
-          return [];
-        }
-        const result = [];
-        for (const action of bubbleActions) {
-          if (action.visible && !action.visible(message)) {
-            continue;
-          }
-          const label = typeof action.label === "function" ? action.label() : action.label;
-          result.push({
-            label,
-            key: String(action.key)
-          });
+        if (!bubbleActions?.length) {
+          return void 0;
         }
-        return result;
-      });
-      const handleContextMenuSelect = (key) => {
-        const message = contextMenuMessage.value;
-        if (!message)
-          return;
-        if (key === ChatBubbleActionKey.EDIT) {
-          const startEditing = UChat?.startEditingMessage?.value;
-          if (startEditing) {
-            startEditing(message);
+        return bubbleActions.filter((action) => !action.visible || action.visible(message)).map((action) => ({
+          key: String(action.key),
+          label: action.label,
+          handler: () => {
+            if (action.key === ChatBubbleActionKey.EDIT) {
+              const startEditing = UChat?.startEditingMessage?.value;
+              startEditing?.(message);
+              return;
+            }
+            action.handler(message);
           }
-          contextMenuShow.value = false;
-          return;
-        }
-        const bubbleActions = UChat?.bubbleActionsRef?.value;
-        if (!bubbleActions)
-          return;
-        const action = bubbleActions.find(
-          (action2) => action2.key === key
-        );
-        if (action) {
-          action.handler(message);
-        }
-        contextMenuShow.value = false;
+        }));
       };
       const renderDateSeparator = (date) => {
         return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` }, /* @__PURE__ */ vue.h("span", null, date));
@@ -55198,208 +55701,75 @@
       const renderUnreadNotification = () => {
         const count = props.unreadNotificationCount ?? unreadMessagesCount.value;
         return /* @__PURE__ */ vue.h(
-          "div",
+          _UMessageBubble,
           {
-            class: `${mergedClsPrefixRef.value}-chat-main__unread-notification`
-          },
-          /* @__PURE__ */ vue.h("span", null, count, " ", mergedUnreadNotificationTextRef.value)
+            type: MessageBubbleType.SERVICE,
+            serviceVariant: MessageBubbleServiceVariant.UNREAD,
+            content: `${count} ${mergedUnreadNotificationTextRef.value}`
+          }
         );
       };
       const renderMarkMessage = (message) => {
-        const markTypeClass = message.markType === ChatMarkType.SYSTEM ? "system" : message.markType === ChatMarkType.EVENT ? "event" : "divider";
+        const serviceVariant = markTypeToServiceVariantMap[message.markType ?? ChatMarkType.DIVIDER];
         return /* @__PURE__ */ vue.h(
-          "div",
+          _UMessageBubble,
           {
-            key: message.id,
-            class: [
-              `${mergedClsPrefixRef.value}-chat-main__mark`,
-              `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
-            ]
-          },
-          message.content && /* @__PURE__ */ vue.h("span", null, message.content)
+            key: String(message.id),
+            type: MessageBubbleType.SERVICE,
+            serviceVariant,
+            content: message.content
+          }
         );
       };
       const renderMessage = (message) => {
-        const isOwn = message.isOwn;
         const attachments = message.attachment ? Array.isArray(message.attachment) ? message.attachment : [message.attachment] : [];
-        const isContextMenuForThisMessage = contextMenuShow.value && contextMenuMessage.value?.id === message.id;
-        const hasBubbleActionsSlot = slots.bubbleActions !== void 0;
-        const hasBubbleActionsConfig = UChat?.bubbleActionsRef?.value && UChat.bubbleActionsRef.value.length > 0;
-        const messageBubbleContent = message.content || attachments.length > 1 ? /* @__PURE__ */ vue.h(
-          "div",
-          {
-            class: [
-              `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-              isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own` : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
-            ]
-          },
-          attachments.length > 0 && /* @__PURE__ */ vue.h(
-            ChatAttachmentComponent,
-            {
-              message,
-              attachments,
-              uploadProps: props.uploadProps,
-              withPadding: true
-            },
-            {
-              default: slots.messageAttachment,
-              "upload-file-title": slots.messageAttachmentTitle,
-              "upload-file-subtitle": slots.messageAttachmentSubtitle
-            }
-          ),
-          message.content && /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: `${mergedClsPrefixRef.value}-chat-main__message-text`
-            },
-            message.content
-          )
-        ) : attachments.length === 1 ? /* @__PURE__ */ vue.h(
-          ChatAttachmentComponent,
+        const messageBubbleAttachments = attachments.map((attachment) => ({
+          id: attachment.id,
+          name: attachment.name,
+          url: attachment.url,
+          size: attachment.size,
+          thumbnail: typeof attachment.thumbnail === "string" ? attachment.thumbnail : void 0,
+          preview: typeof attachment.preview === "string" ? attachment.preview : void 0,
+          status: attachment.status ? String(attachment.status) : void 0,
+          percentage: attachment.percentage,
+          type: attachment.type
+        }));
+        const handleMessageBubbleRetry = () => {
+          handleMessageRetry(message);
+        };
+        const handleMessageBubbleAttachmentDownload = (attachment) => {
+          const originalAttachment = attachments.find(
+            (item) => String(item.id) === String(attachment.id)
+          );
+          if (originalAttachment && UChat?.onAttachmentDownload?.value) {
+            return UChat.onAttachmentDownload.value(originalAttachment);
+          }
+        };
+        return /* @__PURE__ */ vue.h(
+          _UMessageBubble,
           {
-            message,
-            attachments,
-            uploadProps: props.uploadProps
+            key: String(message.id),
+            type: MessageBubbleType.MESSAGE,
+            isOwn: Boolean(message.isOwn),
+            content: message.content,
+            timestamp: message.timestamp,
+            title: message.title,
+            status: message.status,
+            attachments: messageBubbleAttachments,
+            uploadProps: props.uploadProps,
+            retryText: mergedRetryTextRef.value,
+            actions: getMessageBubbleActions(message),
+            onRetry: handleMessageBubbleRetry,
+            onAttachmentDownload: handleMessageBubbleAttachmentDownload
           },
           {
-            default: slots.messageAttachment,
+            bubbleActions: slots.bubbleActions ? () => slots.bubbleActions?.(message) : void 0,
+            messageStatus: slots.messageStatus ? () => slots.messageStatus?.(message) : void 0,
+            messageAttachment: slots.messageAttachment ? () => slots.messageAttachment?.(message) : void 0,
             "upload-file-title": slots.messageAttachmentTitle,
             "upload-file-subtitle": slots.messageAttachmentSubtitle
           }
-        ) : null;
-        const messageContent = /* @__PURE__ */ vue.h(
-          "div",
-          {
-            key: message.id,
-            class: [
-              `${mergedClsPrefixRef.value}-chat-main__message`,
-              isOwn ? `${mergedClsPrefixRef.value}-chat-main__message--own` : `${mergedClsPrefixRef.value}-chat-main__message--other`
-            ]
-          },
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: [
-                `${mergedClsPrefixRef.value}-chat-main__message-wrapper`,
-                isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-wrapper--own` : `${mergedClsPrefixRef.value}-chat-main__message-wrapper--other`
-              ]
-            },
-            hasBubbleActionsSlot ? /* @__PURE__ */ vue.h(
-              "div",
-              {
-                onContextmenu: (e) => {
-                  e.preventDefault();
-                  contextMenuShow.value = false;
-                  void vue.nextTick().then(() => {
-                    contextMenuShow.value = true;
-                    contextMenuMessage.value = message;
-                  });
-                }
-              },
-              slots.bubbleActions?.(message),
-              messageBubbleContent
-            ) : hasBubbleActionsConfig ? /* @__PURE__ */ vue.h(
-              _UDropdown,
-              {
-                show: isContextMenuForThisMessage,
-                onUpdateShow: (show) => {
-                  if (!show && contextMenuMessage.value?.id === message.id) {
-                    contextMenuShow.value = false;
-                  }
-                },
-                onClickoutside: () => {
-                  if (contextMenuMessage.value?.id === message.id) {
-                    contextMenuShow.value = false;
-                  }
-                },
-                trigger: "manual",
-                placement: "bottom-start",
-                options: messageContextMenuOptions.value,
-                onSelect: handleContextMenuSelect
-              },
-              {
-                default: () => /* @__PURE__ */ vue.h(
-                  "div",
-                  {
-                    onContextmenu: (event) => {
-                      event.preventDefault();
-                      contextMenuShow.value = false;
-                      void vue.nextTick().then(() => {
-                        contextMenuShow.value = true;
-                        contextMenuMessage.value = message;
-                      });
-                    }
-                  },
-                  messageBubbleContent
-                )
-              }
-            ) : messageBubbleContent,
-            /* @__PURE__ */ vue.h(
-              "div",
-              {
-                class: [
-                  `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                  isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own` : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`,
-                  message.status === MessageStatus.RETRY && `${mergedClsPrefixRef.value}-chat-main__message-meta--retry`
-                ]
-              },
-              message.status === MessageStatus.RETRY ? /* @__PURE__ */ vue.h(
-                "div",
-                {
-                  class: `${mergedClsPrefixRef.value}-chat-main__message-retry`,
-                  onClick: () => {
-                    handleMessageRetry(message);
-                  },
-                  style: { cursor: "pointer" }
-                },
-                /* @__PURE__ */ vue.h(
-                  UIcon$1,
-                  {
-                    size: 16,
-                    component: statusIconMapper$1[MessageStatus.RETRY],
-                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`,
-                    theme: themeRef.value.peers.StatusIcon,
-                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
-                  }
-                ),
-                /* @__PURE__ */ vue.h(
-                  "span",
-                  {
-                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text`
-                  },
-                  mergedRetryTextRef.value
-                )
-              ) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
-                "span",
-                {
-                  class: `${mergedClsPrefixRef.value}-chat-main__message-time`
-                },
-                message.timestamp
-              ), isOwn && message.status && /* @__PURE__ */ vue.h(
-                "div",
-                {
-                  class: `${mergedClsPrefixRef.value}-chat-main__message-status`
-                },
-                slots.messageStatus ? slots.messageStatus(message) : statusIconMapper$1[message.status] && /* @__PURE__ */ vue.h(
-                  UIcon$1,
-                  {
-                    size: 16,
-                    component: statusIconMapper$1[message.status],
-                    class: [
-                      `${mergedClsPrefixRef.value}-chat-main__message-status-icon`,
-                      `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(
-                      message.status
-                    )}`
-                    ],
-                    theme: themeRef.value.peers.StatusIcon,
-                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
-                  }
-                )
-              ))
-            )
-          )
         );
-        return messageContent;
       };
       const renderSkeletonMessage = (isOwn, index) => {
         return /* @__PURE__ */ vue.h(
@@ -55451,10 +55821,6 @@
         renderSkeletonMessage,
         renderDateSeparator,
         renderUnreadNotification,
-        contextMenuShow,
-        contextMenuMessage,
-        messageContextMenuOptions,
-        handleContextMenuSelect,
         cssVars: cssVarsRef,
         themeClass: themeClassHandle?.themeClass,
         onRender: themeClassHandle?.onRender
@@ -55561,89 +55927,323 @@
               background: "transparent"
             }
           },
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: `${mergedClsPrefixRef}-chat-main__messages-container`,
-              onContextmenu: (event) => {
-                const target = event.target;
-                const messagesContainer = event.currentTarget;
-                if (target === messagesContainer) {
-                  event.preventDefault();
-                  this.contextMenuShow = false;
-                }
+          /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container` }, messagesWithDates.map(
+            (item) => {
+              if (item.type === "date-separator") {
+                return renderDateSeparator(item.date ?? "");
               }
-            },
-            messagesWithDates.map(
-              (item) => {
-                if (item.type === "date-separator") {
-                  return renderDateSeparator(item.date ?? "");
-                }
-                if (item.type === "unread-notification") {
-                  return renderUnreadNotification();
-                }
-                const message = item;
-                if (message.type === ChatMessageType.MARK) {
-                  return renderMarkMessage(message);
-                }
-                return renderMessage(message);
+              if (item.type === "unread-notification") {
+                return renderUnreadNotification();
               }
-            )
-          )
+              const message = item;
+              if (message.type === ChatMessageType.MARK) {
+                return renderMarkMessage(message);
+              }
+              return renderMessage(message);
+            }
+          ))
         )
       );
     }
   });
 
   const SENDING_DELAY = 100;
-  var ChatMainArea = vue.defineComponent({
+  const chatMainAreaProps = {
+    ...useTheme.props,
+    selectedChat: {
+      type: Object,
+      default: void 0
+    },
+    messages: {
+      type: Array,
+      default: () => []
+    },
+    typingChatIds: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingCount: {
+      type: Number,
+      default: 10
+    },
+    headerButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerIconProps: {
+      type: Object,
+      default: void 0
+    },
+    headerShareButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerProfileButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerCloseButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerShareIconProps: {
+      type: Object,
+      default: void 0
+    },
+    headerProfileIconProps: {
+      type: Object,
+      default: void 0
+    },
+    messageUploadProps: {
+      type: Object,
+      default: void 0
+    },
+    footerInputProps: {
+      type: Object,
+      default: void 0
+    },
+    footerButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    footerUploadProps: {
+      type: Object,
+      default: void 0
+    },
+    footerIconProps: {
+      type: Object,
+      default: void 0
+    },
+    footerSuffixIconProps: {
+      type: Object,
+      default: void 0
+    },
+    showAttachButton: {
+      type: Boolean,
+      default: true
+    },
+    inputPlaceholder: {
+      type: String,
+      default: void 0
+    },
+    retryText: {
+      type: String,
+      default: void 0
+    },
+    typingText: {
+      type: String,
+      default: void 0
+    },
+    closeButtonText: {
+      type: String,
+      default: void 0
+    },
+    shareButtonTooltip: {
+      type: String,
+      default: void 0
+    },
+    profileButtonTooltip: {
+      type: String,
+      default: void 0
+    },
+    unreadNotificationText: {
+      type: String,
+      default: void 0
+    },
+    bubbleActions: {
+      type: Array,
+      default: void 0
+    },
+    onMessageSend: {
+      type: Function,
+      default: void 0
+    },
+    onMessageRetry: {
+      type: Function,
+      default: void 0
+    },
+    onFooterInputChange: {
+      type: Function,
+      default: void 0
+    },
+    onChatClose: {
+      type: Function,
+      default: void 0
+    },
+    onChatShare: {
+      type: Function,
+      default: void 0
+    },
+    onUserProfile: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentUpload: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentDownload: {
+      type: Function,
+      default: void 0
+    },
+    onMessagesScrollToTop: {
+      type: Function,
+      default: void 0
+    },
+    onMessagesScrollToBottom: {
+      type: Function,
+      default: void 0
+    }
+  };
+  var _UChatMainArea = vue.defineComponent({
     name: "ChatMainArea",
-    setup(_, { slots }) {
+    props: chatMainAreaProps,
+    setup(props, { slots }) {
+      const UChat = vue.inject(chatInjectionKey, null);
+      const isStandalone = !UChat;
+      const { mergedClsPrefixRef } = useConfig(props);
+      const mergedThemeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
-      const {
-        mergedClsPrefixRef,
-        mergedThemeRef,
-        selectedChatRef,
-        messagesRef,
-        typingChatIdsRef,
-        messagesLoadingRef,
-        messagesLoadingCountRef,
-        headerButtonPropsRef,
-        headerIconPropsRef,
-        headerShareButtonPropsRef,
-        headerProfileButtonPropsRef,
-        headerCloseButtonPropsRef,
-        headerShareIconPropsRef,
-        headerProfileIconPropsRef,
-        messageUploadPropsRef,
-        footerInputPropsRef,
-        footerButtonPropsRef,
-        footerUploadPropsRef,
-        footerIconPropsRef,
-        footerSuffixIconPropsRef,
-        inputPlaceholderRef,
-        retryTextRef,
-        typingTextRef,
-        closeButtonTextRef,
-        shareButtonTooltipRef,
-        profileButtonTooltipRef,
-        unreadNotificationTextRef,
-        notificationsShownSetRef,
-        unreadCountsBeforeReadRef,
-        markNotificationShown,
-        handleMessageSend,
-        handleMessageRetry,
-        handleFooterInputChange,
-        startEditingMessage: startEditingMessageRef,
-        editMessageIdRef,
-        bubbleActionsRef,
-        onAttachmentUpload,
-        onChatClose,
-        onChatShare,
-        onUserProfile,
-        onMessagesScrollToTop,
-        onMessagesScrollToBottom
-      } = vue.inject(chatInjectionKey);
+      const selectedChatRef = UChat?.selectedChatRef ?? vue.toRef(props, "selectedChat");
+      const messagesRef = UChat?.messagesRef ?? vue.toRef(props, "messages");
+      const typingChatIdsRef = UChat?.typingChatIdsRef ?? vue.toRef(props, "typingChatIds");
+      const messagesLoadingRef = UChat?.messagesLoadingRef ?? vue.toRef(props, "loading");
+      const messagesLoadingCountRef = UChat?.messagesLoadingCountRef ?? vue.toRef(props, "loadingCount");
+      const headerButtonPropsRef = UChat?.headerButtonPropsRef ?? vue.toRef(props, "headerButtonProps");
+      const headerIconPropsRef = UChat?.headerIconPropsRef ?? vue.toRef(props, "headerIconProps");
+      const headerShareButtonPropsRef = UChat?.headerShareButtonPropsRef ?? vue.toRef(props, "headerShareButtonProps");
+      const headerProfileButtonPropsRef = UChat?.headerProfileButtonPropsRef ?? vue.toRef(props, "headerProfileButtonProps");
+      const headerCloseButtonPropsRef = UChat?.headerCloseButtonPropsRef ?? vue.toRef(props, "headerCloseButtonProps");
+      const headerShareIconPropsRef = UChat?.headerShareIconPropsRef ?? vue.toRef(props, "headerShareIconProps");
+      const headerProfileIconPropsRef = UChat?.headerProfileIconPropsRef ?? vue.toRef(props, "headerProfileIconProps");
+      const messageUploadPropsRef = UChat?.messageUploadPropsRef ?? vue.toRef(props, "messageUploadProps");
+      const footerInputPropsRef = UChat?.footerInputPropsRef ?? vue.toRef(props, "footerInputProps");
+      const footerButtonPropsRef = UChat?.footerButtonPropsRef ?? vue.toRef(props, "footerButtonProps");
+      const footerUploadPropsRef = UChat?.footerUploadPropsRef ?? vue.toRef(props, "footerUploadProps");
+      const footerIconPropsRef = UChat?.footerIconPropsRef ?? vue.toRef(props, "footerIconProps");
+      const footerSuffixIconPropsRef = UChat?.footerSuffixIconPropsRef ?? vue.toRef(props, "footerSuffixIconProps");
+      const inputPlaceholderRef = UChat?.inputPlaceholderRef ?? vue.computed(
+        () => props.inputPlaceholder ?? localeRef.value.inputPlaceholder
+      );
+      const retryTextRef = UChat?.retryTextRef ?? vue.computed(() => props.retryText ?? localeRef.value.retryText);
+      const typingTextRef = UChat?.typingTextRef ?? vue.computed(() => props.typingText ?? localeRef.value.typingText);
+      const closeButtonTextRef = UChat?.closeButtonTextRef ?? vue.computed(
+        () => props.closeButtonText ?? localeRef.value.closeButtonText
+      );
+      const shareButtonTooltipRef = UChat?.shareButtonTooltipRef ?? vue.computed(
+        () => props.shareButtonTooltip ?? localeRef.value.shareButtonTooltip
+      );
+      const profileButtonTooltipRef = UChat?.profileButtonTooltipRef ?? vue.computed(
+        () => props.profileButtonTooltip ?? localeRef.value.profileButtonTooltip
+      );
+      const unreadNotificationTextRef = UChat?.unreadNotificationTextRef ?? vue.computed(
+        () => props.unreadNotificationText ?? localeRef.value.unreadNotificationText
+      );
+      const notificationsShownSetRef = UChat?.notificationsShownSetRef ?? vue.ref(/* @__PURE__ */ new Set());
+      const unreadCountsBeforeReadRef = UChat?.unreadCountsBeforeReadRef ?? vue.ref({});
+      const markNotificationShown = UChat?.markNotificationShown ?? ((chatId) => {
+        notificationsShownSetRef.value.add(chatId);
+        notificationsShownSetRef.value = new Set(notificationsShownSetRef.value);
+      });
+      const editMessageIdRef = UChat?.editMessageIdRef ?? vue.ref(null);
+      const startEditingMessageRef = UChat?.startEditingMessage ?? vue.ref();
+      const bubbleActionsRef = UChat?.bubbleActionsRef ?? vue.toRef(props, "bubbleActions");
+      const handleMessageSend = UChat?.handleMessageSend ?? ((content, attachments) => props.onMessageSend?.(content, attachments));
+      const handleMessageRetry = UChat?.handleMessageRetry ?? ((message) => props.onMessageRetry?.(message));
+      const handleFooterInputChange = UChat?.handleFooterInputChange ?? ((value, chatId) => props.onFooterInputChange?.(value, chatId));
+      const onAttachmentUpload = UChat?.onAttachmentUpload ?? vue.toRef(props, "onAttachmentUpload");
+      const onChatClose = UChat?.onChatClose ?? vue.toRef(props, "onChatClose");
+      const onChatShare = UChat?.onChatShare ?? vue.toRef(props, "onChatShare");
+      const onUserProfile = UChat?.onUserProfile ?? vue.toRef(props, "onUserProfile");
+      const onMessagesScrollToTop = UChat?.onMessagesScrollToTop ?? vue.toRef(props, "onMessagesScrollToTop");
+      const onMessagesScrollToBottom = UChat?.onMessagesScrollToBottom ?? vue.toRef(props, "onMessagesScrollToBottom");
+      const cssVarsRef = vue.computed(() => {
+        const {
+          common: {
+            cubicBezierEaseInOut,
+            brandPrimary500,
+            staticGreen,
+            staticRed,
+            textPrimary,
+            textSecondary,
+            textTertiary
+          },
+          self: {
+            backgroundColor,
+            borderColor,
+            sidebarItemSubtitleColor,
+            mainBackgroundColor,
+            headerBackgroundColor,
+            headerBorderColor,
+            headerTitleColor,
+            messageBubbleBackgroundColorOwn,
+            messageBubbleBackgroundColorOther,
+            messageBubbleTextColorOwn,
+            messageBubbleTextColorOther,
+            messageTimeColor,
+            messageStatusColor,
+            attachmentBackgroundColorOwn,
+            attachmentBackgroundColorOther,
+            footerBackgroundColor,
+            footerBorderColor,
+            inputBackgroundColor,
+            inputBorderColor,
+            inputSuffixColor,
+            unreadNotificationBackgroundColor,
+            unreadNotificationTextColor,
+            typingIndicatorColor,
+            dateSeparatorColor,
+            dateSeparatorBackgroundColor,
+            borderRadius,
+            errorColor
+          }
+        } = mergedThemeRef.value;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-color-primary": brandPrimary500,
+          "--u-color-success": staticGreen,
+          "--u-color-error": errorColor || staticRed,
+          "--u-text-color-base": textPrimary,
+          "--u-text-color-secondary": textSecondary,
+          "--u-text-color-disabled": textTertiary,
+          "--u-background-color": backgroundColor,
+          "--u-border-color": borderColor,
+          "--u-sidebar-item-subtitle-color": sidebarItemSubtitleColor,
+          "--u-main-background-color": mainBackgroundColor,
+          "--u-header-background-color": headerBackgroundColor,
+          "--u-header-border-color": headerBorderColor,
+          "--u-header-title-color": headerTitleColor,
+          "--u-message-bubble-background-color-own": messageBubbleBackgroundColorOwn,
+          "--u-message-bubble-background-color-other": messageBubbleBackgroundColorOther,
+          "--u-message-bubble-text-color-own": messageBubbleTextColorOwn,
+          "--u-message-bubble-text-color-other": messageBubbleTextColorOther,
+          "--u-message-time-color": messageTimeColor,
+          "--u-message-status-color": messageStatusColor,
+          "--u-attachment-background-color-own": attachmentBackgroundColorOwn,
+          "--u-attachment-background-color-other": attachmentBackgroundColorOther,
+          "--u-footer-background-color": footerBackgroundColor,
+          "--u-footer-border-color": footerBorderColor,
+          "--u-input-background-color": inputBackgroundColor,
+          "--u-input-border-color": inputBorderColor,
+          "--u-input-suffix-color": inputSuffixColor,
+          "--u-unread-notification-background-color": unreadNotificationBackgroundColor,
+          "--u-unread-notification-text-color": unreadNotificationTextColor,
+          "--u-typing-indicator-color": typingIndicatorColor,
+          "--u-date-separator-color": dateSeparatorColor,
+          "--u-date-separator-background-color": dateSeparatorBackgroundColor,
+          "--u-border-radius": borderRadius
+        };
+      });
+      const themeClassHandle = useThemeClass(
+        "chat-main-area",
+        vue.computed(() => ""),
+        cssVarsRef,
+        props
+      );
       const messagesBodyRef = vue.ref();
       const inputRef = vue.ref();
       const inputValue = vue.ref("");
@@ -55724,6 +56324,11 @@
         },
         { deep: true, flush: "post" }
       );
+      vue.onMounted(() => {
+        void vue.nextTick(() => {
+          scrollToBottom();
+        });
+      });
       vue.watch(unreadMessagesCount, (newCount, oldCount) => {
         if (selectedChatRef.value && newCount === 0 && oldCount > 0) {
           showNotificationManually.value = false;
@@ -55767,22 +56372,24 @@
         lastScrollTop.value = scrollTop;
       };
       function scrollToBottom() {
-        const el = messagesBodyRef.value;
-        if (!el)
+        const element = messagesBodyRef.value;
+        if (!element)
           return;
-        if ("$el" in el && el.$el instanceof HTMLElement) {
-          const scrollContainer = el.$el.querySelector(".u-scrollbar-content");
+        if ("$el" in element && element.$el instanceof HTMLElement) {
+          const scrollContainer = element.$el.querySelector(
+            ".u-scrollbar-content"
+          );
           if (scrollContainer) {
             scrollContainer.scrollTop = scrollContainer.scrollHeight;
             return;
           }
         }
-        if ("scrollTo" in el && typeof el.scrollTo === "function") {
-          el.scrollTo({ top: 999999, behavior: "auto" });
+        if ("scrollTo" in element && typeof element.scrollTo === "function") {
+          element.scrollTo({ top: 999999, behavior: "auto" });
           return;
         }
-        if ("scrollTop" in el && "scrollHeight" in el) {
-          el.scrollTop = el.scrollHeight;
+        if ("scrollTop" in element && "scrollHeight" in element) {
+          element.scrollTop = element.scrollHeight;
         }
       }
       const toKeyString = (value) => {
@@ -56159,7 +56766,7 @@
                 class: `${mergedClsPrefixRef.value}-chat-main__input-container`
               },
               {
-                default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(_UUploadTrigger, { abstract: true }, {
+                default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, props.showAttachButton && /* @__PURE__ */ vue.h(_UUploadTrigger, { abstract: true }, {
                   default: ({
                     handleClick
                   }) => /* @__PURE__ */ vue.h(
@@ -56248,7 +56855,60 @@
           }
         ));
       };
+      if (isStandalone) {
+        vue.provide(chatInjectionKey, {
+          mergedClsPrefixRef,
+          mergedThemeRef,
+          selectedChatRef,
+          messagesRef,
+          typingChatIdsRef,
+          messagesLoadingRef,
+          messagesLoadingCountRef,
+          headerButtonPropsRef,
+          headerIconPropsRef,
+          headerShareButtonPropsRef,
+          headerProfileButtonPropsRef,
+          headerCloseButtonPropsRef,
+          headerShareIconPropsRef,
+          headerProfileIconPropsRef,
+          messageUploadPropsRef,
+          footerInputPropsRef,
+          footerButtonPropsRef,
+          footerUploadPropsRef,
+          footerIconPropsRef,
+          footerSuffixIconPropsRef,
+          inputPlaceholderRef,
+          retryTextRef,
+          typingTextRef,
+          closeButtonTextRef,
+          shareButtonTooltipRef,
+          profileButtonTooltipRef,
+          unreadNotificationTextRef,
+          notificationsShownSetRef,
+          unreadCountsBeforeReadRef,
+          markNotificationShown,
+          handleMessageSend,
+          handleMessageRetry,
+          handleFooterInputChange,
+          startEditingMessage: startEditingMessageRef,
+          editMessageIdRef,
+          bubbleActionsRef,
+          onAttachmentUpload,
+          onAttachmentDownload: vue.toRef(props, "onAttachmentDownload"),
+          onChatClose,
+          onChatShare,
+          onUserProfile,
+          onMessagesScrollToTop,
+          onMessagesScrollToBottom
+        });
+      }
       return {
+        mergedClsPrefix: mergedClsPrefixRef,
+        mergedTheme: mergedThemeRef,
+        cssVars: cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender,
+        isStandalone,
         renderHeader,
         renderMessages,
         renderEditingBlock,
@@ -56263,18 +56923,41 @@
       };
     },
     render() {
-      const { mergedClsPrefixRef } = vue.inject(chatInjectionKey);
-      return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main` }, this.renderHeader(), /* @__PURE__ */ vue.h(
-        SafeTopScrollbar,
+      this.onRender?.();
+      const { mergedClsPrefix } = this;
+      const mainArea = /* @__PURE__ */ vue.h(
+        "div",
         {
-          ref: "messagesBodyRef",
-          class: `${mergedClsPrefixRef.value}-chat-main__body`,
-          onScroll: this.handleMessagesScroll
+          class: [
+            `${mergedClsPrefix}-chat-main`,
+            this.isStandalone && `${mergedClsPrefix}-chat-main--standalone`
+          ]
         },
+        !this.isStandalone && this.renderHeader(),
+        /* @__PURE__ */ vue.h(
+          SafeTopScrollbar,
+          {
+            ref: "messagesBodyRef",
+            class: `${mergedClsPrefix}-chat-main__body`,
+            onScroll: this.handleMessagesScroll
+          },
+          {
+            default: () => this.renderMessages()
+          }
+        ),
+        this.renderFooter()
+      );
+      if (!this.isStandalone) {
+        return mainArea;
+      }
+      return /* @__PURE__ */ vue.h(
+        "div",
         {
-          default: () => this.renderMessages()
-        }
-      ), this.renderFooter());
+          class: [`${mergedClsPrefix}-chat`, this.themeClass],
+          style: this.cssVars
+        },
+        mainArea
+      );
     }
   });
 
@@ -58314,7 +58997,7 @@
               chatItemSuffix: $slots.chatItemSuffix
             })
           ]), this.selectedChatId && resolveSlot($slots.default, () => [
-            /* @__PURE__ */ vue.h(ChatMainArea, { ref: "mainAreaRef" }, {
+            /* @__PURE__ */ vue.h(_UChatMainArea, { ref: "mainAreaRef" }, {
               headerActions: $slots.headerActions,
               footerAttachIcon: $slots.footerAttachIcon,
               footerSuffixIcon: $slots.footerSuffixIcon
@@ -92690,7 +93373,7 @@
   const iconPackInputLight = {
     ...inputLight,
     self(vars) {
-      const originalInputSelf = self$1o(vars);
+      const originalInputSelf = self$1p(vars);
       const {
         elementsDarkQuinary,
         elementsPrimary
@@ -115812,6 +116495,7 @@ ${icon.label}`.toLowerCase()
   const UCascader = wrap(_UCascader);
   const UChat = wrap(_UChat);
   const UChatListItems = wrap(_UChatListItems);
+  const UChatMainArea = wrap(_UChatMainArea);
   const UChatMessages = wrap(_UChatMessages);
   const UCheckbox = wrap(_UCheckbox);
   const UCheckboxGroup = wrap(_UCheckboxGroup);
@@ -115899,6 +116583,7 @@ ${icon.label}`.toLowerCase()
   const UMarquee = wrap(_UMarquee);
   const UMention = wrap(_UMention);
   const UMenu = wrap(_UMenu);
+  const UMessageBubble = wrap(_UMessageBubble);
   const UModal = wrap(_UModal);
   const UModalProvider = wrap(UModalProvider$1);
   const UModalFullscreen = wrap(ModalFullscreen);
@@ -115973,6 +116658,10 @@ ${icon.label}`.toLowerCase()
     ChatAttachmentStatus: ChatAttachmentStatus,
     ChatMarkType: ChatMarkType,
     ChatMessageType: ChatMessageType,
+    MessageBubbleAttachmentStatus: MessageBubbleAttachmentStatus,
+    MessageBubbleServiceVariant: MessageBubbleServiceVariant,
+    MessageBubbleStatus: MessageBubbleStatus,
+    MessageBubbleType: MessageBubbleType,
     MessageStatus: MessageStatus,
     NA: a,
     NP: p,
@@ -115999,6 +116688,7 @@ ${icon.label}`.toLowerCase()
     UCascader: UCascader,
     UChat: UChat,
     UChatListItems: UChatListItems,
+    UChatMainArea: UChatMainArea,
     UChatMessages: UChatMessages,
     UCheckbox: UCheckbox,
     UCheckboxGroup: UCheckboxGroup,
@@ -116094,6 +116784,7 @@ ${icon.label}`.toLowerCase()
     UMarquee: UMarquee,
     UMention: UMention,
     UMenu: UMenu,
+    UMessageBubble: UMessageBubble,
     UMessageProvider: UMessageProvider,
     UModal: UModal,
     UModalFullscreen: UModalFullscreen,
@@ -116280,6 +116971,7 @@ ${icon.label}`.toLowerCase()
     mappingCardLight: mappingCardLight,
     mentionProps: mentionProps,
     menuProps: menuProps,
+    messageBubbleProps: messageBubbleProps,
     messageProviderProps: messageProviderProps,
     modalFullscreenProps: modalFullscreenProps,
     modalProps: modalProps,
@@ -116373,7 +117065,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.2.1";
+  var version = "2.3.0";
 
   function create({
     componentPrefix = "U",
@@ -116485,6 +117177,7 @@ ${icon.label}`.toLowerCase()
     Marquee: marqueeLight,
     Menu: menuLight,
     Mention: mentionLight,
+    MessageBubble: messageBubbleLight,
     Message: messageLight,
     Modal: modalLight,
     Notification: notificationLight,
@@ -117109,6 +117802,7 @@ ${icon.label}`.toLowerCase()
     Marquee: marqueeDark,
     Menu: menuDark,
     Mention: listDark,
+    MessageBubble: messageBubbleDark,
     Message: messageDark,
     Modal: modalDark,
     Notification: notificationDark,
@@ -117179,6 +117873,10 @@ ${icon.label}`.toLowerCase()
   exports.ChatAttachmentStatus = ChatAttachmentStatus;
   exports.ChatMarkType = ChatMarkType;
   exports.ChatMessageType = ChatMessageType;
+  exports.MessageBubbleAttachmentStatus = MessageBubbleAttachmentStatus;
+  exports.MessageBubbleServiceVariant = MessageBubbleServiceVariant;
+  exports.MessageBubbleStatus = MessageBubbleStatus;
+  exports.MessageBubbleType = MessageBubbleType;
   exports.MessageStatus = MessageStatus;
   exports.NA = a;
   exports.NP = p;
@@ -117205,6 +117903,7 @@ ${icon.label}`.toLowerCase()
   exports.UCascader = UCascader;
   exports.UChat = UChat;
   exports.UChatListItems = UChatListItems;
+  exports.UChatMainArea = UChatMainArea;
   exports.UChatMessages = UChatMessages;
   exports.UCheckbox = UCheckbox;
   exports.UCheckboxGroup = UCheckboxGroup;
@@ -117300,6 +117999,7 @@ ${icon.label}`.toLowerCase()
   exports.UMarquee = UMarquee;
   exports.UMention = UMention;
   exports.UMenu = UMenu;
+  exports.UMessageBubble = UMessageBubble;
   exports.UMessageProvider = UMessageProvider;
   exports.UModal = UModal;
   exports.UModalFullscreen = UModalFullscreen;
@@ -117550,6 +118250,8 @@ ${icon.label}`.toLowerCase()
   exports.mentionProps = mentionProps;
   exports.menuDark = menuDark;
   exports.menuProps = menuProps;
+  exports.messageBubbleDark = messageBubbleDark;
+  exports.messageBubbleProps = messageBubbleProps;
   exports.messageDark = messageDark;
   exports.messageProviderProps = messageProviderProps;
   exports.modalDark = modalDark;