@uzum-tech/ui 2.2.0 → 2.3.0

package/dist/index.mjs

@@ -3408,7 +3408,7 @@ function getOffset$2(placement, offsetRect, targetRect, offsetTopToStandardPlace
 }
 
 /* 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',
@@ -3487,7 +3487,7 @@ var VFollower = defineComponent({
       }
     });
     const ssrAdapter = useSsrAdapter();
-    style$1Z.mount({
+    style$1_.mount({
       id: 'vueuc/binder',
       head: true,
       anchorMetaName: cssrAnchorMetaName$1,
@@ -4947,7 +4947,7 @@ var VXScroll = defineComponent({
 
 /* 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 = defineComponent({
@@ -5060,7 +5060,7 @@ var VOverflow = defineComponent({
       }
     }
     const ssrAdapter = useSsrAdapter();
-    style$1Y.mount({
+    style$1Z.mount({
       id: 'vueuc/overflow',
       head: true,
       anchorMetaName: cssrAnchorMetaName$1,
@@ -14080,7 +14080,7 @@ useTheme.props = {
   builtinThemeOverrides: Object
 };
 
-var style$1X = cB("base-icon", `
+var style$1Y = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14116,7 +14116,7 @@ var UBaseIcon = defineComponent({
     onMouseup: Function
   },
   setup(props) {
-    useStyle("-base-icon", style$1X, toRef(props, "clsPrefix"));
+    useStyle("-base-icon", style$1Y, toRef(props, "clsPrefix"));
   },
   render() {
     return /* @__PURE__ */ h(
@@ -14151,7 +14151,7 @@ const iconProps = {
   onClick: Function
 };
 
-var style$1W = cB("icon", `
+var style$1X = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14337,7 +14337,7 @@ const derived = {
   boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
 };
 
-function self$1D(vars) {
+function self$1E(vars) {
   const {
     elementsPrimary
   } = vars;
@@ -14353,13 +14353,13 @@ function self$1D(vars) {
 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";
@@ -14373,7 +14373,7 @@ const UIconImpl = defineComponent({
       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 = computed(() => {
       const {
         depth
@@ -14514,7 +14514,7 @@ var commonVars$b = {
   avatarSize: "16px"
 };
 
-function self$1C(vars) {
+function self$1D(vars) {
   const {
     heightHuge,
     fontBodyLarge,
@@ -14544,16 +14544,16 @@ function self$1C(vars) {
 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;
@@ -14608,7 +14608,7 @@ var UBaseAccountOption = defineComponent({
     const themeRef = useTheme(
       "AccountOption",
       "-base-account-option",
-      style$1V,
+      style$1W,
       accountOptionLight,
       props,
       mergedClsPrefixRef
@@ -16088,7 +16088,7 @@ function iconSwitchTransition({
   })];
 }
 
-var style$1U = cB("base-clear", `
+var style$1V = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -16129,7 +16129,7 @@ var UBaseClear = defineComponent({
     onClear: Function
   },
   setup(props) {
-    useStyle("-base-clear", style$1U, toRef(props, "clsPrefix"));
+    useStyle("-base-clear", style$1V, toRef(props, "clsPrefix"));
     return {
       handleMouseDown(e) {
         e.preventDefault();
@@ -16160,7 +16160,7 @@ var UBaseClear = defineComponent({
   }
 });
 
-var style$1T = cB("base-close", `
+var style$1U = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16232,7 +16232,7 @@ var UBaseClose = defineComponent({
     absolute: Boolean
   },
   setup(props) {
-    useStyle("-base-close", style$1T, toRef(props, "clsPrefix"));
+    useStyle("-base-close", style$1U, toRef(props, "clsPrefix"));
     return () => {
       const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
       const Tag = isButtonTag ? "button" : "div";
@@ -16391,7 +16391,7 @@ var FocusDetector = defineComponent({
   }
 });
 
-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);
@@ -16561,7 +16561,7 @@ var UBaseLoading = defineComponent({
     ...exposedLoadingProps
   },
   setup(props) {
-    useStyle("-base-loading", style$1S, toRef(props, "clsPrefix"));
+    useStyle("-base-loading", style$1T, toRef(props, "clsPrefix"));
   },
   render() {
     const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -16691,7 +16691,7 @@ function fadeInTransition({
   })];
 }
 
-var style$1R = cB("base-menu-mask", `
+var style$1S = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -16714,7 +16714,7 @@ var UBaseMenuMask = defineComponent({
     }
   },
   setup(props) {
-    useStyle("-base-menu-mask", style$1R, toRef(props, "clsPrefix"));
+    useStyle("-base-menu-mask", style$1S, toRef(props, "clsPrefix"));
     const messageRef = ref(null);
     let timerId = null;
     const uncontrolledShowRef = ref(false);
@@ -16902,7 +16902,7 @@ const commonVars$a = {
   railColor: "transparent"
 };
 
-function self$1B(vars) {
+function self$1C(vars) {
   const {
     scrollbarColor,
     scrollbarColorHover,
@@ -16922,13 +16922,13 @@ function self$1B(vars) {
 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", `
@@ -16941,7 +16941,7 @@ cB("scrollbar", [cM("rtl", `
           right: unset;
         `)])])])]);
 
-var style$1Q = cB("safe-top-scrollbar", `
+var style$1R = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -17090,7 +17090,7 @@ const SafeTopScrollbar$1 = defineComponent({
     const themeRef = useTheme(
       "SafeTopScrollbar",
       "-safe-top-scrollbar",
-      style$1Q,
+      style$1R,
       safeTopScrollbarLight,
       props,
       mergedClsPrefixRef
@@ -17824,7 +17824,7 @@ const commonVars$9 = {
   railColor: "transparent"
 };
 
-function self$1A(vars) {
+function self$1B(vars) {
   const {
     scrollbarColor,
     scrollbarColorHover,
@@ -17844,13 +17844,13 @@ function self$1A(vars) {
 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", `
@@ -17868,7 +17868,7 @@ const scrollbarRtl = {
   style: rtlStyle$t
 };
 
-var style$1P = cB("scrollbar", `
+var style$1Q = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -18011,7 +18011,7 @@ const Scrollbar$1 = defineComponent({
     const themeRef = useTheme(
       "Scrollbar",
       "-scrollbar",
-      style$1P,
+      style$1Q,
       scrollbarLight,
       props,
       mergedClsPrefixRef
@@ -19383,7 +19383,7 @@ function createTreeMate(rawNodes, options = {}) {
   return treemate;
 }
 
-function self$1z(vars) {
+function self$1A(vars) {
   const {
     fontBodyMedium,
     fontTitleLarge,
@@ -19415,16 +19415,16 @@ function self$1z(vars) {
 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;
@@ -19502,7 +19502,7 @@ var UEmpty$1 = defineComponent({
     const themeRef = useTheme(
       "Empty",
       "-empty",
-      style$1O,
+      style$1P,
       emptyLight,
       props,
       mergedClsPrefixRef
@@ -19590,7 +19590,7 @@ var UEmpty$1 = defineComponent({
   }
 });
 
-function self$1y(vars) {
+function self$1z(vars) {
   const {
     borderRadius,
     iconMedium,
@@ -19647,7 +19647,7 @@ const internalSelectMenuLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Empty: emptyLight
   },
-  self: self$1y
+  self: self$1z
 });
 
 const internalSelectMenuDark = {
@@ -19657,7 +19657,7 @@ const internalSelectMenuDark = {
     Scrollbar: scrollbarDark,
     Empty: emptyDark$1
   },
-  self: self$1y
+  self: self$1z
 };
 
 cB("base-select-menu", [cM("rtl", `
@@ -19898,7 +19898,7 @@ function fadeInScaleUpTransition({
   })];
 }
 
-var style$1N = cB("base-select-menu", `
+var style$1O = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -20086,7 +20086,7 @@ var UInternalSelectMenu = defineComponent({
     const themeRef = useTheme(
       "InternalSelectMenu",
       "-internal-select-menu",
-      style$1N,
+      style$1O,
       internalSelectMenuLight,
       props,
       toRef(props, "clsPrefix")
@@ -20554,7 +20554,7 @@ var UInternalSelectMenu = defineComponent({
   }
 });
 
-function self$1x(vars) {
+function self$1y(vars) {
   const {
     fontBodyMedium,
     containerPrimary,
@@ -20581,13 +20581,13 @@ function self$1x(vars) {
 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", `
@@ -20602,7 +20602,7 @@ const oppositePlacement = {
   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),
@@ -20821,7 +20821,7 @@ var UPopoverBody = defineComponent({
     const themeRef = useTheme(
       "Popover",
       "-popover",
-      style$1M,
+      style$1N,
       popoverLight,
       props,
       mergedClsPrefixRef
@@ -21651,7 +21651,7 @@ var UPopover$1 = defineComponent({
   }
 });
 
-function self$1w(vars) {
+function self$1x(vars) {
   const {
     opacityDisabled,
     borderRadiusSmall: borderRadius,
@@ -21749,13 +21749,13 @@ function self$1w(vars) {
 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", `
@@ -21802,7 +21802,7 @@ var commonProps = {
   }
 };
 
-var style$1L = cB("tag", `
+var style$1M = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -21969,7 +21969,7 @@ var _UTag = defineComponent({
     const themeRef = useTheme(
       "Tag",
       "-tag",
-      style$1L,
+      style$1M,
       tagLight,
       props,
       mergedClsPrefixRef
@@ -22333,7 +22333,7 @@ var _UTagGroup = defineComponent({
   }
 });
 
-function self$1v(vars) {
+function self$1w(vars) {
   const {
     heightSmall,
     heightMedium,
@@ -22353,10 +22353,10 @@ function self$1v(vars) {
 }
 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);
@@ -22412,7 +22412,7 @@ var UBaseSkeleton = defineComponent({
     const themeRef = useTheme(
       "Skeleton",
       "-skeleton",
-      style$1K,
+      style$1L,
       skeletonLight$1,
       props,
       mergedClsPrefixRef
@@ -22528,7 +22528,7 @@ var UBaseSuffix = defineComponent({
   }
 });
 
-function self$1u(vars) {
+function self$1v(vars) {
   const {
     borderRadius,
     iconMedium,
@@ -22686,7 +22686,7 @@ const internalSelectionLight = createTheme$1({
   peers: {
     Popover: popoverLight
   },
-  self: self$1u
+  self: self$1v
 });
 
 const internalSelectionDark = {
@@ -22695,7 +22695,7 @@ const internalSelectionDark = {
   peers: {
     Popover: popoverDark
   },
-  self: self$1u
+  self: self$1v
 };
 
 cB("base-selection", [cM("rtl", `
@@ -22728,7 +22728,7 @@ function generateSecondaryStates(state) {
         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;
@@ -23079,7 +23079,7 @@ var UInternalSelection = defineComponent({
     const themeRef = useTheme(
       "InternalSelection",
       "-internal-selection",
-      style$1J,
+      style$1K,
       internalSelectionLight,
       props,
       toRef(props, "clsPrefix")
@@ -24160,7 +24160,7 @@ function fadeUpWidthExpandTransition({
   })];
 }
 
-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;
@@ -24279,7 +24279,7 @@ var UBaseSlotMachine = defineComponent({
     }
   },
   setup(props) {
-    useStyle("-base-slot-machine", style$1I, toRef(props, "clsPrefix"));
+    useStyle("-base-slot-machine", style$1J, toRef(props, "clsPrefix"));
     const oldValueRef = ref();
     const newValueRef = ref();
     const numbersRef = computed(() => {
@@ -24334,7 +24334,7 @@ var UBaseSlotMachine = defineComponent({
   }
 });
 
-function self$1t(vars) {
+function self$1u(vars) {
   const {
     borderRadiusSmall,
     brandPrimary500,
@@ -24370,10 +24370,10 @@ function self$1t(vars) {
 }
 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;
@@ -24681,7 +24681,7 @@ var InternalUText = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-text",
-      style$1H,
+      style$1I,
       typographyLight$1,
       props,
       mergedClsPrefixRef
@@ -24769,7 +24769,7 @@ var InternalUText = defineComponent({
   }
 });
 
-var style$1G = cB("base-wave", `
+var style$1H = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -24787,7 +24787,7 @@ var UBaseWave = defineComponent({
     }
   },
   setup(props) {
-    useStyle("-base-wave", style$1G, toRef(props, "clsPrefix"));
+    useStyle("-base-wave", style$1H, toRef(props, "clsPrefix"));
     const selfRef = ref(null);
     const activeRef = ref(false);
     let animationTimerId = null;
@@ -24832,7 +24832,7 @@ var UBaseWave = defineComponent({
   }
 });
 
-function self$1s(vars) {
+function self$1t(vars) {
   const {
     borderRadius,
     fontBodyMedium,
@@ -24869,7 +24869,7 @@ const tooltipLight = createTheme$1({
   peers: {
     Popover: popoverLight
   },
-  self: self$1s
+  self: self$1t
 });
 
 const tooltipDark = {
@@ -24878,10 +24878,10 @@ const tooltipDark = {
   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", `
@@ -25007,7 +25007,7 @@ var _UTooltip = defineComponent({
     const themeRef = useTheme(
       "Tooltip",
       "-tooltip",
-      props.variant === "plain" ? void 0 : style$1F,
+      props.variant === "plain" ? void 0 : style$1G,
       tooltipLight,
       props,
       mergedClsPrefixRef
@@ -25137,7 +25137,7 @@ const ellipsisLight = createTheme$1({
   }
 });
 
-var style$1E = cB("ellipsis", {
+var style$1F = cB("ellipsis", {
   overflow: "hidden"
 }, [cNotM("line-clamp", `
     white-space: nowrap;
@@ -25175,7 +25175,7 @@ var _UEllipsis = defineComponent({
     const mergedTheme = useTheme(
       "Ellipsis",
       "-ellipsis",
-      style$1E,
+      style$1F,
       ellipsisLight,
       props,
       mergedClsPrefixRef
@@ -25332,7 +25332,7 @@ const UPerformantEllipsis$1 = defineComponent({
   setup(props, { attrs, slots }) {
     const mouseEnteredRef = ref(false);
     const mergedClsPrefixRef = useMergedClsPrefix();
-    useStyle("-ellipsis", style$1E, mergedClsPrefixRef);
+    useStyle("-ellipsis", style$1F, mergedClsPrefixRef);
     const renderTrigger = () => {
       const { lineClamp } = props;
       const mergedClsPrefix = mergedClsPrefixRef.value;
@@ -25372,7 +25372,7 @@ const UPerformantEllipsis$1 = defineComponent({
   }
 });
 
-function self$1r(vars) {
+function self$1s(vars) {
   const {
     borderRadiusLarge,
     elementsQuaternary,
@@ -25414,21 +25414,21 @@ function self$1r(vars) {
 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);
@@ -25549,7 +25549,7 @@ var _UActionCard = defineComponent({
     const themeRef = useTheme(
       "ActionCard",
       "-action-card",
-      style$1D,
+      style$1E,
       actionCardLight,
       props,
       mergedClsPrefixRef
@@ -25680,7 +25680,7 @@ var _UActionCard = defineComponent({
   }
 });
 
-var style$1C = cB("affix", [cM("affixed", {
+var style$1D = cB("affix", [cM("affixed", {
   position: "fixed"
 }, [cM("absolute-positioned", {
   position: "absolute"
@@ -25750,7 +25750,7 @@ var _UAffix = defineComponent({
   props: affixProps,
   setup(props) {
     const { mergedClsPrefixRef } = useConfig(props);
-    useStyle("-affix", style$1C, mergedClsPrefixRef);
+    useStyle("-affix", style$1D, mergedClsPrefixRef);
     let scrollTarget = null;
     const stickToTopRef = ref(false);
     const stickToBottomRef = ref(false);
@@ -25886,7 +25886,7 @@ var commonVars$8 = {
   descriptionSpaceBanner: "24px"
 };
 
-function self$1q(vars) {
+function self$1r(vars) {
   const {
     iconMedium,
     closeMedium,
@@ -25995,13 +25995,13 @@ function self$1q(vars) {
 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", `
@@ -26077,7 +26077,7 @@ function fadeInHeightExpandTransition({
     `)];
 }
 
-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);
@@ -26256,7 +26256,7 @@ var _UAlert = defineComponent({
     const themeRef = useTheme(
       "Alert",
       "-alert",
-      style$1B,
+      style$1C,
       alertLight,
       props,
       mergedClsPrefixRef
@@ -26397,7 +26397,7 @@ var _UAlert = defineComponent({
   }
 });
 
-function self$1p(vars) {
+function self$1q(vars) {
   const {
     borderRadius,
     fontBodyMedium,
@@ -26427,13 +26427,13 @@ function self$1p(vars) {
 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");
@@ -26772,7 +26772,7 @@ var UBaseAnchor = defineComponent({
   }
 });
 
-var style$1A = cB("anchor", `
+var style$1B = cB("anchor", `
   position: relative;
 `, [cNotM("block", `
     padding-left: var(--u-rail-width);
@@ -26862,7 +26862,7 @@ var _UAnchor = defineComponent({
     const themeRef = useTheme(
       "Anchor",
       "-anchor",
-      style$1A,
+      style$1B,
       anchorLight,
       props,
       mergedClsPrefixRef
@@ -26942,7 +26942,7 @@ const isChrome = isBrowser$1 && "chrome" in window;
 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,
@@ -27053,13 +27053,13 @@ function self$1o(vars) {
 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", `
@@ -27085,7 +27085,7 @@ const inputRtl = {
 
 const inputInjectionKey = createInjectionKey("u-input");
 
-var style$1z = cB("input", `
+var style$1A = cB("input", `
   max-width: 100%;
   cursor: text;
   line-height: 1.5;
@@ -27633,7 +27633,7 @@ var commonVariables$5 = {
   rippleDuration: ".6s"
 };
 
-function self$1n(vars) {
+function self$1o(vars) {
   const {
     heightMini,
     heightTiny,
@@ -27889,13 +27889,13 @@ function self$1n(vars) {
 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", `
@@ -27913,7 +27913,7 @@ const buttonRtl = {
   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;
@@ -28244,7 +28244,7 @@ const Button = defineComponent({
     const themeRef = useTheme(
       "Button",
       "-button",
-      style$1y,
+      style$1z,
       buttonLight,
       props,
       mergedClsPrefixRef
@@ -28678,7 +28678,7 @@ var commonVariables$4 = {
   iconMargin: "0 16px 0 0"
 };
 
-function self$1m(vars) {
+function self$1n(vars) {
   const {
     closeMedium,
     iconMedium,
@@ -28763,13 +28763,13 @@ function self$1m(vars) {
 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", `
@@ -28804,7 +28804,7 @@ const messageProps = {
   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;
@@ -28925,7 +28925,7 @@ var UMessage = defineComponent({
     const themeRef = useTheme(
       "Message",
       "-message",
-      style$1x,
+      style$1y,
       messageLight,
       messageProviderProps,
       mergedClsPrefixRef
@@ -29604,7 +29604,7 @@ var UInput$1 = defineComponent({
     const themeRef = useTheme(
       "Input",
       "-input",
-      style$1z,
+      style$1A,
       inputLight,
       props,
       mergedClsPrefixRef
@@ -30693,7 +30693,7 @@ var UInput$1 = defineComponent({
   }
 });
 
-var style$1w = cB("input-group", `
+var style$1x = cB("input-group", `
   display: inline-flex;
   width: 100%;
   flex-wrap: nowrap;
@@ -30756,7 +30756,7 @@ var _UInputGroup = defineComponent({
   props: inputGroupProps,
   setup(props) {
     const { mergedClsPrefixRef } = useConfig(props);
-    useStyle("-input-group", style$1w, mergedClsPrefixRef);
+    useStyle("-input-group", style$1x, mergedClsPrefixRef);
     return {
       mergedClsPrefix: mergedClsPrefixRef
     };
@@ -30767,7 +30767,7 @@ var _UInputGroup = defineComponent({
   }
 });
 
-var style$1v = cB("input-group-label", `
+var style$1w = cB("input-group-label", `
   position: relative;
   user-select: none;
   -webkit-user-select: none;
@@ -30815,7 +30815,7 @@ var _UInputGroupLabel = defineComponent({
     const themeRef = useTheme(
       "Input",
       "-input-group-label",
-      style$1v,
+      style$1w,
       inputLight,
       props,
       mergedClsPrefixRef
@@ -30941,7 +30941,7 @@ function createValOptMap(options, valueField, childrenField) {
   return valOptMap;
 }
 
-function self$1l(vars) {
+function self$1m(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -30956,7 +30956,7 @@ const autoCompleteLight = createTheme$1({
     InternalSelectMenu: internalSelectMenuLight,
     Input: inputLight
   },
-  self: self$1l
+  self: self$1m
 });
 
 const autoCompleteDark = {
@@ -30966,10 +30966,10 @@ const autoCompleteDark = {
     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;
@@ -31099,7 +31099,7 @@ var _UAutoComplete = defineComponent({
     const themeRef = useTheme(
       "AutoComplete",
       "-auto-complete",
-      style$1u,
+      style$1v,
       autoCompleteLight,
       props,
       mergedClsPrefixRef
@@ -31496,7 +31496,7 @@ const observeIntersection = (el, options, shouldStartLoadingRef) => {
   return unobserve;
 };
 
-function self$1k(vars) {
+function self$1l(vars) {
   const {
     heightSmall,
     heightMedium,
@@ -31517,16 +31517,16 @@ function self$1k(vars) {
 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);
@@ -31585,7 +31585,7 @@ var _USkeleton = defineComponent({
     const themeRef = useTheme(
       "Skeleton",
       "-skeleton",
-      style$1t,
+      style$1u,
       skeletonLight,
       props,
       mergedClsPrefixRef
@@ -31640,7 +31640,7 @@ var _USkeleton = defineComponent({
   }
 });
 
-function self$1j(vars) {
+function self$1k(vars) {
   const {
     borderRadius,
     heightSmall,
@@ -31672,18 +31672,18 @@ function self$1j(vars) {
 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);
@@ -31795,7 +31795,7 @@ var _UAvatar = defineComponent({
     const themeRef = useTheme(
       "Avatar",
       "-avatar",
-      style$1s,
+      style$1t,
       avatarLight,
       props,
       mergedClsPrefixRef
@@ -32006,7 +32006,7 @@ var _UAvatar = defineComponent({
   }
 });
 
-function self$1i() {
+function self$1j() {
   return {
     gap: "-12px"
   };
@@ -32017,7 +32017,7 @@ const avatarGroupLight = createTheme$1({
   peers: {
     Avatar: avatarLight
   },
-  self: self$1i
+  self: self$1j
 });
 
 const avatarGroupDark = {
@@ -32026,7 +32026,7 @@ const avatarGroupDark = {
   peers: {
     Avatar: avatarDark
   },
-  self: self$1i
+  self: self$1j
 };
 
 var rtlStyle$n = cB("avatar-group", [cM("rtl", `
@@ -32043,7 +32043,7 @@ const avatarGroupRtl = {
   style: rtlStyle$n
 };
 
-var style$1r = cB("avatar-group", `
+var style$1s = cB("avatar-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -32078,7 +32078,7 @@ var _UAvatarGroup = defineComponent({
     const mergedThemeRef = useTheme(
       "AvatarGroup",
       "-avatar-group",
-      style$1r,
+      style$1s,
       avatarGroupLight,
       props,
       mergedClsPrefixRef
@@ -32167,7 +32167,7 @@ var _UAvatarGroup = defineComponent({
   }
 });
 
-function self$1h(vars) {
+function self$1i(vars) {
   const {
     heightLarge,
     iconMedium,
@@ -32192,13 +32192,13 @@ function self$1h(vars) {
 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__ */ h(
@@ -32212,7 +32212,7 @@ var BackTopIcon = /* @__PURE__ */ h(
   /* @__PURE__ */ h("g", { stroke: "none", "stroke-width": "1", "fill-rule": "evenodd" }, /* @__PURE__ */ h("g", { transform: "translate(-139.000000, -4423.000000)", "fill-rule": "nonzero" }, /* @__PURE__ */ h("g", { transform: "translate(120.000000, 4285.000000)" }, /* @__PURE__ */ h("g", { transform: "translate(7.000000, 126.000000)" }, /* @__PURE__ */ h("g", { transform: "translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" }, /* @__PURE__ */ h("g", { transform: "translate(4.000000, 2.000000)" }, /* @__PURE__ */ 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__ */ 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;
@@ -32351,7 +32351,7 @@ var _UBackTop = defineComponent({
     const themeRef = useTheme(
       "BackTop",
       "-back-top",
-      style$1q,
+      style$1r,
       backTopLight,
       props,
       mergedClsPrefixRef
@@ -32502,7 +32502,7 @@ var _UBackTop = defineComponent({
   }
 });
 
-function self$1g(vars) {
+function self$1h(vars) {
   const {
     brandQuaternary500,
     elementsPrimary,
@@ -32535,13 +32535,13 @@ function self$1g(vars) {
 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", `
@@ -32558,7 +32558,7 @@ const badgeRtl = {
   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
@@ -32672,7 +32672,7 @@ var _UBadge = defineComponent({
     const themeRef = useTheme(
       "Badge",
       "-badge",
-      style$1p,
+      style$1q,
       badgeLight,
       props,
       mergedClsPrefixRef
@@ -32808,7 +32808,7 @@ var _UBadge = defineComponent({
   }
 });
 
-function self$1f(vars) {
+function self$1g(vars) {
   const {
     fontWeightStrong,
     fontBodyMedium,
@@ -32831,16 +32831,16 @@ function self$1f(vars) {
 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);
@@ -32910,7 +32910,7 @@ var _UBreadcrumb = defineComponent({
     const themeRef = useTheme(
       "Breadcrumb",
       "-breadcrumb",
-      style$1o,
+      style$1p,
       breadcrumbLight,
       props,
       mergedClsPrefixRef
@@ -33095,7 +33095,7 @@ function createTopBorderStyle(type) {
     top: n1
   })])])])]);
 }
-var style$1n = cB("button-group", `
+var style$1o = cB("button-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -33144,7 +33144,7 @@ var _UButtonGroup = defineComponent({
   props: buttonGroupProps,
   setup(props) {
     const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-    useStyle("-button-group", style$1n, mergedClsPrefixRef);
+    useStyle("-button-group", style$1o, mergedClsPrefixRef);
     provide(buttonGroupInjectionKey, props);
     const rtlEnabledRef = useRtl(
       "ButtonGroup",
@@ -39088,7 +39088,7 @@ function getMsByDateCommonItem(item) {
   return resultDate.getTime();
 }
 
-function self$1e(vars) {
+function self$1f(vars) {
   const {
     borderRadius,
     fontWeightStrong,
@@ -39132,7 +39132,7 @@ const calendarLight = createTheme$1({
   peers: {
     Button: buttonLight
   },
-  self: self$1e
+  self: self$1f
 });
 
 const calendarDark = {
@@ -39141,10 +39141,10 @@ const calendarDark = {
   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);
@@ -39283,7 +39283,7 @@ var _UCalendar = defineComponent({
     const themeRef = useTheme(
       "Calendar",
       "-calendar",
-      style$1m,
+      style$1n,
       calendarLight,
       props,
       mergedClsPrefixRef
@@ -39571,7 +39571,7 @@ var commonVariables$3 = {
   paddingHuge: "27px 40px 28px"
 };
 
-function self$1d(vars) {
+function self$1e(vars) {
   const {
     borderRadius,
     fontWeight,
@@ -39637,13 +39637,13 @@ function self$1d(vars) {
 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", `
@@ -39666,7 +39666,7 @@ const contentBaseStyle = cB("card-content", `
 `, [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);
@@ -39849,7 +39849,7 @@ var _UCard = defineComponent({
     const themeRef = useTheme(
       "Card",
       "-card",
-      style$1l,
+      style$1m,
       cardLight,
       props,
       mergedClsPrefixRef
@@ -40432,7 +40432,7 @@ var UGi$1 = defineComponent({
   }
 });
 
-function self$1c(vars) {
+function self$1d(vars) {
   const {
     textSecondary,
     textPrimary,
@@ -40467,10 +40467,10 @@ function self$1c(vars) {
 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",
@@ -40591,7 +40591,7 @@ var UCardListItem = defineComponent({
   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 = ref(false);
     const toggle = () => {
       isOpen.value = !isOpen.value;
@@ -40722,7 +40722,7 @@ var _UCardList = defineComponent({
     const themeRef = useTheme(
       "CardList",
       "-card-list",
-      style$1k,
+      style$1l,
       cardListLight,
       props,
       mergedClsPrefixRef
@@ -40819,7 +40819,7 @@ var _UCardList = defineComponent({
   }
 });
 
-function self$1b() {
+function self$1c() {
   return {
     dotSize: "8px",
     dotColor: "rgba(255, 255, 255, .3)",
@@ -40833,13 +40833,13 @@ function self$1b() {
 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");
@@ -41123,7 +41123,7 @@ var _UCarouselItem = defineComponent({
   }
 });
 
-var style$1j = cB("carousel", `
+var style$1k = cB("carousel", `
   position: relative;
   width: 100%;
   height: 100%;
@@ -42125,7 +42125,7 @@ var _UCarousel = defineComponent({
     const themeRef = useTheme(
       "Carousel",
       "-carousel",
-      style$1j,
+      style$1k,
       carouselLight,
       props,
       mergedClsPrefixRef
@@ -42285,7 +42285,7 @@ var commonVariables$2 = {
   labelPadding: "0 16px"
 };
 
-function self$1a(vars) {
+function self$1b(vars) {
   const {
     lineHeightBodyLarge,
     fontBodyLarge,
@@ -42361,13 +42361,13 @@ function self$1a(vars) {
 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", `
@@ -42379,7 +42379,7 @@ const checkboxRtl = {
   style: rtlStyle$k
 };
 
-function self$19(vars) {
+function self$1a(vars) {
   const {
     borderRadius,
     heightMedium,
@@ -42420,7 +42420,7 @@ const cascaderLight = createTheme$1({
     Checkbox: checkboxLight,
     Empty: emptyLight
   },
-  self: self$19
+  self: self$1a
 });
 
 const cascaderDark = {
@@ -42433,14 +42433,14 @@ const cascaderDark = {
     Checkbox: checkboxDark,
     Empty: emptyLight
   },
-  self: self$19
+  self: self$1a
 };
 
 var CheckMark = /* @__PURE__ */ h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", class: "check-icon" }, /* @__PURE__ */ 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__ */ h("svg", { width: "22", height: "24", viewBox: "0 0 22 24", class: "line-icon" }, /* @__PURE__ */ 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)"
   },
@@ -42654,7 +42654,7 @@ var _UCheckbox = defineComponent({
     const themeRef = useTheme(
       "Checkbox",
       "-checkbox",
-      style$1i,
+      style$1j,
       checkboxLight,
       props,
       mergedClsPrefixRef
@@ -43728,7 +43728,7 @@ var CascaderSelectMenu = defineComponent({
   }
 });
 
-var style$1h = c$1([cB("cascader-menu", `
+var style$1i = c$1([cB("cascader-menu", `
     outline: none;
     position: relative;
     margin: 4px 0;
@@ -43970,7 +43970,7 @@ var _UCascader = defineComponent({
     const themeRef = useTheme(
       "Cascader",
       "-cascader",
-      style$1h,
+      style$1i,
       cascaderLight,
       props,
       mergedClsPrefixRef
@@ -44902,12 +44902,12 @@ const flexDark = {
   }
 };
 
-function self$18() {
+function self$19() {
   return commonVars$7;
 }
 const flexLight = {
   name: "Flex",
-  self: self$18
+  self: self$19
 };
 
 cB("space", [cM("rtl", `
@@ -45025,7 +45025,7 @@ var _UFlex = defineComponent({
   }
 });
 
-function self$17(vars) {
+function self$18(vars) {
   const {
     borderRadius,
     borderRadiusMedium,
@@ -45069,13 +45069,13 @@ function self$17(vars) {
 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", `
@@ -45094,7 +45094,7 @@ const listRtl = {
   style: rtlStyle$j
 };
 
-function self$16(vars) {
+function self$17(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -45109,7 +45109,7 @@ const selectLight = createTheme$1({
     InternalSelection: internalSelectionLight,
     InternalSelectMenu: internalSelectMenuLight
   },
-  self: self$16
+  self: self$17
 });
 
 const selectDark = {
@@ -45119,13 +45119,13 @@ const selectDark = {
     InternalSelection: internalSelectionDark,
     InternalSelectMenu: internalSelectMenuDark
   },
-  self: self$16
+  self: self$17
 };
 
 ({
   style: c$1([])});
 
-function self$15(vars) {
+function self$16(vars) {
   const {
     borderRadiusSmall,
     fontWeightStrong,
@@ -45220,19 +45220,19 @@ function self$15(vars) {
 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;
@@ -45252,7 +45252,7 @@ const chatInputLight = {
 const chatBadgeLight = {
   ...badgeLight,
   self(vars) {
-    const originalBadgeSelf = self$1g(vars);
+    const originalBadgeSelf = self$1h(vars);
     const {
       brandPrimary400,
       elementsSecondary
@@ -45264,7 +45264,7 @@ const chatBadgeLight = {
     };
   }
 };
-function self$14(vars) {
+function self$15(vars) {
   const {
     borderRadiusLarge,
     elementsQuaternary,
@@ -45337,7 +45337,7 @@ const chatLight = createTheme$1({
     HeaderShareIcon: iconLight,
     HeaderProfileIcon: iconLight
   },
-  self: self$14
+  self: self$15
 });
 
 const chatDark = createTheme$1({
@@ -45359,7 +45359,7 @@ const chatDark = createTheme$1({
     HeaderProfileIcon: iconDark$1
   },
   self: vars => {
-    const lightVars = self$14(vars);
+    const lightVars = self$15(vars);
     return {
       ...lightVars
     };
@@ -45467,7 +45467,7 @@ const listProps = {
 };
 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;
@@ -45600,7 +45600,7 @@ var _UList = defineComponent({
     const themeRef = useTheme(
       "List",
       "-list",
-      style$1g,
+      style$1h,
       listLight,
       props,
       mergedClsPrefixRef
@@ -46082,7 +46082,7 @@ const SafeTopScrollbar = defineComponent({
   }
 });
 
-var style$1f = cB("a", `
+var style$1g = cB("a", `
   cursor: pointer;
   transition:
     color .3s var(--u-bezier),
@@ -46105,7 +46105,7 @@ var a = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-a",
-      style$1f,
+      style$1g,
       typographyLight,
       props,
       mergedClsPrefixRef
@@ -46141,7 +46141,7 @@ var a = defineComponent({
   }
 });
 
-var style$1e = cB("blockquote", `
+var style$1f = cB("blockquote", `
   font-size: var(--u-font-size);
   line-height: var(--u-line-height);
   margin: 0;
@@ -46180,7 +46180,7 @@ var _UBlockquote = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-blockquote",
-      style$1e,
+      style$1f,
       typographyLight,
       props,
       mergedClsPrefixRef
@@ -46229,7 +46229,7 @@ var _UBlockquote = defineComponent({
   }
 });
 
-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);
@@ -46274,7 +46274,7 @@ var createHeader = level => defineComponent({
       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 = computed(() => {
       const {
         type
@@ -46338,7 +46338,7 @@ const UH4$1 = createHeader("4");
 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;
@@ -46363,7 +46363,7 @@ var _UHr = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-hr",
-      style$1c,
+      style$1d,
       typographyLight,
       props,
       mergedClsPrefixRef
@@ -46417,7 +46417,7 @@ const childStyle = [c$1("&:first-child", `
   `), 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", {
@@ -46441,7 +46441,7 @@ var _UOl = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-xl",
-      style$1b,
+      style$1c,
       typographyLight,
       props,
       mergedClsPrefixRef
@@ -46494,7 +46494,7 @@ var _UOl = defineComponent({
   }
 });
 
-var style$1a = cB("p", `
+var style$1b = cB("p", `
   box-sizing: border-box;
   transition: color .3s var(--u-bezier);
   margin: var(--u-margin);
@@ -46515,7 +46515,7 @@ var p = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-p",
-      style$1a,
+      style$1b,
       typographyLight,
       props,
       mergedClsPrefixRef
@@ -46655,7 +46655,7 @@ var _UUl = defineComponent({
     const themeRef = useTheme(
       "Typography",
       "-xl",
-      style$1b,
+      style$1c,
       typographyLight,
       props,
       mergedClsPrefixRef
@@ -46708,7 +46708,7 @@ var _UUl = defineComponent({
   }
 });
 
-function self$13(vars) {
+function self$14(vars) {
   const {
     fontWeight,
     fontBodyMedium,
@@ -46749,16 +46749,16 @@ function self$13(vars) {
 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,
@@ -46815,7 +46815,7 @@ const uploadLight = createTheme$1({
     Button: buttonLight,
     Progress: progressLight
   },
-  self: self$12
+  self: self$13
 });
 
 const uploadDark = {
@@ -46825,7 +46825,7 @@ const uploadDark = {
     Button: buttonDark,
     Progress: progressDark
   },
-  self: self$12
+  self: self$13
 };
 
 var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -46840,7 +46840,7 @@ const uploadRtl = {
 
 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);
@@ -47301,10 +47301,10 @@ const buttonGroupRtl = {
 const cardDark = {
   name: "CardList",
   common: derived$1,
-  self: self$1c
+  self: self$1d
 };
 
-function self$11(vars) {
+function self$12(vars) {
   const {
     textPrimary,
     fontBodyMedium,
@@ -47332,12 +47332,12 @@ function self$11(vars) {
 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",
@@ -47353,10 +47353,10 @@ function self$10(vars) {
 const codeDark = {
   name: "Code",
   common: derived$1,
-  self: self$10
+  self: self$11
 };
 
-function self$$(vars) {
+function self$10(vars) {
   const {
     cubicBezierEaseInOut
   } = vars;
@@ -47367,13 +47367,13 @@ function self$$(vars) {
 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", `
@@ -47386,7 +47386,7 @@ const collapseTransitionRtl = {
   style: rtlStyle$g
 };
 
-function self$_(vars) {
+function self$$(vars) {
   const {
     fontWeight,
     fontBodyLarge,
@@ -47426,13 +47426,13 @@ function self$_(vars) {
 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", `
@@ -47455,7 +47455,7 @@ const collapseRtl = {
   style: rtlStyle$f
 };
 
-function self$Z(vars) {
+function self$_(vars) {
   const {
     borderRadius,
     fontBodySmall,
@@ -47542,7 +47542,7 @@ const dropdownLight = createTheme$1({
   peers: {
     Popover: popoverLight
   },
-  self: self$Z
+  self: self$_
 });
 
 const dropdownDark = {
@@ -47551,7 +47551,7 @@ const dropdownDark = {
   peers: {
     Popover: popoverDark
   },
-  self: self$Z
+  self: self$_
 };
 
 const popselect = {
@@ -47563,7 +47563,7 @@ const popselect = {
   }
 };
 
-function self$Y(vars) {
+function self$Z(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -47578,10 +47578,10 @@ const popselectLight = createTheme$1({
     Popover: popoverLight,
     InternalSelectMenu: internalSelectMenuLight
   },
-  self: self$Y
+  self: self$Z
 });
 
-function self$X(vars) {
+function self$Y(vars) {
   const {
     brandPrimary100,
     transparencySecondary,
@@ -47679,7 +47679,7 @@ const paginationLight = createTheme$1({
     Input: inputLight,
     Popselect: popselectLight
   },
-  self: self$X
+  self: self$Y
 });
 
 const paginationDark = {
@@ -47690,7 +47690,7 @@ const paginationDark = {
     Input: inputDark,
     Popselect: popselect
   },
-  self: self$X
+  self: self$Y
 };
 
 var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -47707,7 +47707,7 @@ const paginationRtl = {
   peers: [inputRtl]
 };
 
-function self$W(vars) {
+function self$X(vars) {
   const {
     heightTiny,
     heightSmall,
@@ -47799,13 +47799,13 @@ function self$W(vars) {
 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", `
@@ -47833,7 +47833,7 @@ const radioRtl = {
   style: rtlStyle$d
 };
 
-function self$V(vars) {
+function self$W(vars) {
   const {
     borderRadius,
     opacityDisabled,
@@ -47934,7 +47934,7 @@ const dataTableLight = createTheme$1({
     Ellipsis: ellipsisLight,
     Dropdown: dropdownLight
   },
-  self: self$V
+  self: self$W
 });
 
 const dataTableDark = {
@@ -47951,10 +47951,10 @@ const dataTableDark = {
     Ellipsis: ellipsisDark,
     Dropdown: dropdownDark
   },
-  self: self$V
+  self: self$W
 };
 
-function self$U(vars) {
+function self$V(vars) {
   const {
     opacityDisabled,
     borderRadius,
@@ -47996,7 +47996,7 @@ const timePickerLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$U
+  self: self$V
 });
 
 const timePickerDark = {
@@ -48007,7 +48007,7 @@ const timePickerDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$U
+  self: self$V
 };
 
 const itemWidth = "38px";
@@ -48053,7 +48053,7 @@ var commonVars$6 = {
   calendarRightPaddingYearrange: "0"
 };
 
-function self$T(vars) {
+function self$U(vars) {
   const {
     iconMedium,
     fontWeightStrong,
@@ -48154,7 +48154,7 @@ const datePickerLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Select: internalSelectionLight
   },
-  self: self$T
+  self: self$U
 });
 
 const datePickerDark = {
@@ -48167,10 +48167,10 @@ const datePickerDark = {
     Scrollbar: scrollbarDark,
     Select: internalSelectionDark
   },
-  self: self$T
+  self: self$U
 };
 
-function self$S(vars) {
+function self$T(vars) {
   const {
     borderRadius,
     lineHeightBodyLarge,
@@ -48220,13 +48220,13 @@ function self$S(vars) {
 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 = {
@@ -48240,7 +48240,7 @@ var commonVars$5 = {
   closeBorderRadius: "100px"
 };
 
-function self$R(vars) {
+function self$S(vars) {
   const {
     borderRadius,
     containerPrimary,
@@ -48297,7 +48297,7 @@ const dialogLight = createTheme$1({
   peers: {
     Button: buttonLight
   },
-  self: self$R
+  self: self$S
 });
 
 const dialogDark = {
@@ -48306,10 +48306,10 @@ const dialogDark = {
   peers: {
     Button: buttonDark
   },
-  self: self$R
+  self: self$S
 };
 
-function self$Q(vars) {
+function self$R(vars) {
   const {
     elementsQuaternary,
     textPrimary,
@@ -48329,13 +48329,13 @@ function self$Q(vars) {
 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 = {
@@ -48351,7 +48351,7 @@ var commonVars$4 = {
   contentBorderRadius: "24px"
 };
 
-function self$P(vars) {
+function self$Q(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -48400,7 +48400,7 @@ const drawerLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$P
+  self: self$Q
 });
 
 const drawerDark = {
@@ -48409,7 +48409,7 @@ const drawerDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$P
+  self: self$Q
 };
 
 var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -48443,7 +48443,7 @@ const dynamicInputDark = {
   }
 };
 
-function self$O() {
+function self$P() {
   return commonVariables$1;
 }
 const dynamicInputLight = createTheme$1({
@@ -48453,7 +48453,7 @@ const dynamicInputLight = createTheme$1({
     Input: inputLight,
     Button: buttonLight
   },
-  self: self$O
+  self: self$P
 });
 
 var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -48494,12 +48494,12 @@ const spaceDark = {
   }
 };
 
-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", `
@@ -48571,7 +48571,7 @@ const floatButtonGroupDark = {
   }
 };
 
-function self$M(vars) {
+function self$N(vars) {
   const {
     containerPrimary,
     elementsQuaternary,
@@ -48587,7 +48587,7 @@ function self$M(vars) {
 const themeLight$4 = {
   name: "FloatButtonGroup",
   common: derived,
-  self: self$M
+  self: self$N
 };
 
 const floatButtonDark = {
@@ -48622,7 +48622,7 @@ const floatButtonDark = {
   }
 };
 
-function self$L(vars) {
+function self$M(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -48651,10 +48651,10 @@ function self$L(vars) {
 const themeLight$3 = {
   name: "FloatButton",
   common: derived,
-  self: self$L
+  self: self$M
 };
 
-function self$K(vars) {
+function self$L(vars) {
   const {
     heightSmall,
     heightMedium,
@@ -48709,16 +48709,16 @@ function self$K(vars) {
 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,
@@ -48755,16 +48755,16 @@ function self$J(vars) {
 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;
@@ -48779,7 +48779,7 @@ const inputNumberLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$I
+  self: self$J
 });
 
 const inputNumberDark = {
@@ -48789,10 +48789,10 @@ const inputNumberDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$I
+  self: self$J
 };
 
-function self$H() {
+function self$I() {
   return {
     inputWidthSmall: "44px",
     inputWidthMedium: "50px",
@@ -48808,7 +48808,7 @@ const inputOtpLight = createTheme$1({
   peers: {
     Input: inputLight
   },
-  self: self$H
+  self: self$I
 });
 
 const inputOtpDark = {
@@ -48817,7 +48817,7 @@ const inputOtpDark = {
   peers: {
     Input: inputDark
   },
-  self: self$H
+  self: self$I
 };
 
 var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -48829,7 +48829,7 @@ const inputOtpRtl = {
   style: rtlStyle$8
 };
 
-function self$G(vars) {
+function self$H(vars) {
   const {
     textPrimary,
     textQuaternary,
@@ -48875,7 +48875,7 @@ const layoutLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$G
+  self: self$H
 });
 
 const layoutDark = {
@@ -48884,7 +48884,7 @@ const layoutDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$G
+  self: self$H
 };
 
 const rowDark = {
@@ -48921,7 +48921,7 @@ const rowRtl = {
   style: rtlStyle$7
 };
 
-function self$F(vars) {
+function self$G(vars) {
   const {
     brandPrimary500,
     staticRed
@@ -48935,16 +48935,16 @@ function self$F(vars) {
 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,
@@ -48967,7 +48967,7 @@ const logLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Code: codeLight
   },
-  self: self$E
+  self: self$F
 });
 
 const logDark = {
@@ -48977,25 +48977,25 @@ const logDark = {
     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;
@@ -49010,7 +49010,7 @@ const mentionLight = createTheme$1({
     InternalSelectMenu: internalSelectMenuLight,
     Input: inputLight
   },
-  self: self$C
+  self: self$D
 });
 
 const listDark = {
@@ -49020,7 +49020,7 @@ const listDark = {
     InternalSelectMenu: internalSelectMenuDark,
     Input: inputDark
   },
-  self: self$C
+  self: self$D
 };
 
 function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49063,7 +49063,7 @@ function createPartialInvertedVars(color, activeItemColor, activeTextColor, grou
     groupTextColorInverted: groupTextColor
   };
 }
-function self$B(vars) {
+function self$C(vars) {
   const {
     textSecondary,
     borderRadiusSmall,
@@ -49131,7 +49131,7 @@ const menuLight = createTheme$1({
     Tooltip: tooltipLight,
     Dropdown: dropdownLight
   },
-  self: self$B
+  self: self$C
 });
 
 const menuDark = {
@@ -49141,9 +49141,61 @@ const menuDark = {
     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,
@@ -50569,7 +50621,7 @@ const imagePreviewSharedProps = {
 };
 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;
@@ -50653,7 +50705,7 @@ var _UImagePreview = defineComponent({
     const themeRef = useTheme(
       "Image",
       "-image",
-      style$18,
+      style$19,
       imageLight,
       props,
       mergedClsPrefixRef
@@ -51584,7 +51636,7 @@ var _UImage = defineComponent({
   }
 });
 
-var style$17 = c$1([c$1("@keyframes spin-rotate", `
+var style$18 = c$1([c$1("@keyframes spin-rotate", `
     from {
       transform: rotate(0);
     }
@@ -51688,7 +51740,7 @@ var _USpin = defineComponent({
     const themeRef = useTheme(
       "Spin",
       "-spin",
-      style$17,
+      style$18,
       spinLight,
       props,
       mergedClsPrefixRef
@@ -52945,7 +52997,7 @@ var _UUpload = defineComponent({
     const themeRef = useTheme(
       "Upload",
       "-upload",
-      style$19,
+      style$1a,
       uploadLight,
       props,
       mergedClsPrefixRef
@@ -53360,6 +53412,98 @@ var _UUpload = defineComponent({
   }
 });
 
+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");
@@ -53969,7 +54113,7 @@ var UDropdownMenu = defineComponent({
   }
 });
 
-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);
@@ -54216,7 +54360,7 @@ var _UDropdown = defineComponent({
     const themeRef = useTheme(
       "Dropdown",
       "-dropdown",
-      style$16,
+      style$17,
       dropdownLight,
       props,
       mergedClsPrefixRef
@@ -54468,93 +54612,266 @@ var _UDropdown = defineComponent({
   }
 });
 
-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 = 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 = defineComponent({
+  name: "MessageBubble",
+  props: messageBubbleProps,
+  slots: Object,
   setup(props, { slots }) {
-    const UChat = 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 = ref(false);
+    const mergedRetryTextRef = computed(
+      () => props.retryText ?? "Retry"
+    );
+    const normalizedAttachmentsRef = computed(() => {
+      if (!props.attachments)
+        return [];
+      return Array.isArray(props.attachments) ? props.attachments : [props.attachments];
+    });
+    const messagePayloadRef = computed(() => ({
+      id: props.id,
+      isOwn: props.isOwn,
+      title: props.title,
+      content: props.content,
+      timestamp: props.timestamp,
+      status: props.status,
+      attachments: normalizedAttachmentsRef.value
+    }));
+    const cssVarsRef = 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 = 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),
@@ -54568,48 +54885,265 @@ var ChatAttachmentComponent = defineComponent({
         {
           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__ */ 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__ */ h("span", { style: { fontSize: "12px", color: "#999" } }, attachment?.size || file.file?.size);
             }
           })
         }
       );
-      if (props.withPadding) {
+      if (withPadding) {
         return /* @__PURE__ */ 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__ */ h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefixRef.value}-message-bubble__bubble`,
+            props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__bubble--own` : `${mergedClsPrefixRef.value}-message-bubble__bubble--other`
+          ]
+        },
+        hasTitle && /* @__PURE__ */ 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__ */ 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__ */ h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefixRef.value}-message-bubble__message`,
+            props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__message--own` : `${mergedClsPrefixRef.value}-message-bubble__message--other`
+          ]
+        },
+        /* @__PURE__ */ 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__ */ h(
+            "div",
+            {
+              onContextmenu: (event) => {
+                event.preventDefault();
+                contextMenuShow.value = false;
+                void nextTick().then(() => {
+                  contextMenuShow.value = true;
+                });
+              }
+            },
+            slots.bubbleActions?.(messagePayloadRef.value),
+            messageBubbleContent
+          ) : hasBubbleActionsConfig ? /* @__PURE__ */ 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__ */ h(
+                "div",
+                {
+                  onContextmenu: (event) => {
+                    event.preventDefault();
+                    contextMenuShow.value = false;
+                    void nextTick().then(() => {
+                      contextMenuShow.value = true;
+                    });
+                  }
+                },
+                messageBubbleContent
+              )
+            }
+          ) : messageBubbleContent,
+          /* @__PURE__ */ 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__ */ h(
+              "div",
+              {
+                class: `${mergedClsPrefixRef.value}-message-bubble__retry`,
+                onClick: handleRetryClick
+              },
+              /* @__PURE__ */ 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__ */ h(
+                "span",
+                {
+                  class: `${mergedClsPrefixRef.value}-message-bubble__retry-text`
+                },
+                mergedRetryTextRef.value
+              )
+            ) : /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
+              "span",
+              {
+                class: `${mergedClsPrefixRef.value}-message-bubble__time`
+              },
+              resolveRenderContent(props.timestamp)
+            ), props.isOwn && props.status && /* @__PURE__ */ h(
+              "div",
+              {
+                class: `${mergedClsPrefixRef.value}-message-bubble__status`
+              },
+              slots.messageStatus ? slots.messageStatus(messagePayloadRef.value) : statusIconMapper$1[props.status] && /* @__PURE__ */ 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__ */ h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefixRef.value}-message-bubble__service`,
+            `${mergedClsPrefixRef.value}-message-bubble__service--${props.serviceVariant}`
+          ]
+        },
+        props.content && /* @__PURE__ */ h("span", null, resolveRenderContent(props.content))
+      );
+    };
+    return {
+      mergedClsPrefixRef,
+      inlineThemeDisabled,
+      cssVars: cssVarsRef,
+      themeClass: themeClassHandle?.themeClass,
+      onRender: themeClassHandle?.onRender,
+      renderMessage,
+      renderService
     };
+  },
+  render() {
+    this.onRender?.();
+    return /* @__PURE__ */ 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;
@@ -54740,7 +55274,10 @@ var style$15 = cB("chat", `
           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;
@@ -54990,12 +55527,6 @@ var style$15 = cB("chat", `
     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: {
@@ -55055,8 +55586,6 @@ var _UChatMessages = defineComponent({
     const { mergedClsPrefixRef } = useConfig(props);
     const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
     const { localeRef } = useLocale("Chat");
-    const contextMenuShow = ref(false);
-    const contextMenuMessage = ref();
     const cssVarsRef = computed(() => {
       const {
         common: {
@@ -55144,49 +55673,23 @@ var _UChatMessages = defineComponent({
     const handleMessageRetry = (message) => {
       props.onMessageRetry?.(message);
     };
-    const messageContextMenuOptions = 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__ */ h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` }, /* @__PURE__ */ h("span", null, date));
@@ -55194,208 +55697,75 @@ var _UChatMessages = defineComponent({
     const renderUnreadNotification = () => {
       const count = props.unreadNotificationCount ?? unreadMessagesCount.value;
       return /* @__PURE__ */ h(
-        "div",
+        _UMessageBubble,
         {
-          class: `${mergedClsPrefixRef.value}-chat-main__unread-notification`
-        },
-        /* @__PURE__ */ 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__ */ h(
-        "div",
+        _UMessageBubble,
         {
-          key: message.id,
-          class: [
-            `${mergedClsPrefixRef.value}-chat-main__mark`,
-            `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
-          ]
-        },
-        message.content && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ h(
-          "div",
-          {
-            class: `${mergedClsPrefixRef.value}-chat-main__message-text`
-          },
-          message.content
-        )
-      ) : attachments.length === 1 ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ h(
-            "div",
-            {
-              onContextmenu: (e) => {
-                e.preventDefault();
-                contextMenuShow.value = false;
-                void nextTick().then(() => {
-                  contextMenuShow.value = true;
-                  contextMenuMessage.value = message;
-                });
-              }
-            },
-            slots.bubbleActions?.(message),
-            messageBubbleContent
-          ) : hasBubbleActionsConfig ? /* @__PURE__ */ 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__ */ h(
-                "div",
-                {
-                  onContextmenu: (event) => {
-                    event.preventDefault();
-                    contextMenuShow.value = false;
-                    void nextTick().then(() => {
-                      contextMenuShow.value = true;
-                      contextMenuMessage.value = message;
-                    });
-                  }
-                },
-                messageBubbleContent
-              )
-            }
-          ) : messageBubbleContent,
-          /* @__PURE__ */ 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__ */ h(
-              "div",
-              {
-                class: `${mergedClsPrefixRef.value}-chat-main__message-retry`,
-                onClick: () => {
-                  handleMessageRetry(message);
-                },
-                style: { cursor: "pointer" }
-              },
-              /* @__PURE__ */ 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__ */ h(
-                "span",
-                {
-                  class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text`
-                },
-                mergedRetryTextRef.value
-              )
-            ) : /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
-              "span",
-              {
-                class: `${mergedClsPrefixRef.value}-chat-main__message-time`
-              },
-              message.timestamp
-            ), isOwn && message.status && /* @__PURE__ */ h(
-              "div",
-              {
-                class: `${mergedClsPrefixRef.value}-chat-main__message-status`
-              },
-              slots.messageStatus ? slots.messageStatus(message) : statusIconMapper$1[message.status] && /* @__PURE__ */ 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__ */ h(
@@ -55447,10 +55817,6 @@ var _UChatMessages = defineComponent({
       renderSkeletonMessage,
       renderDateSeparator,
       renderUnreadNotification,
-      contextMenuShow,
-      contextMenuMessage,
-      messageContextMenuOptions,
-      handleContextMenuSelect,
       cssVars: cssVarsRef,
       themeClass: themeClassHandle?.themeClass,
       onRender: themeClassHandle?.onRender
@@ -55557,89 +55923,323 @@ var _UChatMessages = defineComponent({
             background: "transparent"
           }
         },
-        /* @__PURE__ */ 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__ */ 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 = 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 = defineComponent({
   name: "ChatMainArea",
-  setup(_, { slots }) {
+  props: chatMainAreaProps,
+  setup(props, { slots }) {
+    const UChat = 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
-    } = inject(chatInjectionKey);
+    const selectedChatRef = UChat?.selectedChatRef ?? toRef(props, "selectedChat");
+    const messagesRef = UChat?.messagesRef ?? toRef(props, "messages");
+    const typingChatIdsRef = UChat?.typingChatIdsRef ?? toRef(props, "typingChatIds");
+    const messagesLoadingRef = UChat?.messagesLoadingRef ?? toRef(props, "loading");
+    const messagesLoadingCountRef = UChat?.messagesLoadingCountRef ?? toRef(props, "loadingCount");
+    const headerButtonPropsRef = UChat?.headerButtonPropsRef ?? toRef(props, "headerButtonProps");
+    const headerIconPropsRef = UChat?.headerIconPropsRef ?? toRef(props, "headerIconProps");
+    const headerShareButtonPropsRef = UChat?.headerShareButtonPropsRef ?? toRef(props, "headerShareButtonProps");
+    const headerProfileButtonPropsRef = UChat?.headerProfileButtonPropsRef ?? toRef(props, "headerProfileButtonProps");
+    const headerCloseButtonPropsRef = UChat?.headerCloseButtonPropsRef ?? toRef(props, "headerCloseButtonProps");
+    const headerShareIconPropsRef = UChat?.headerShareIconPropsRef ?? toRef(props, "headerShareIconProps");
+    const headerProfileIconPropsRef = UChat?.headerProfileIconPropsRef ?? toRef(props, "headerProfileIconProps");
+    const messageUploadPropsRef = UChat?.messageUploadPropsRef ?? toRef(props, "messageUploadProps");
+    const footerInputPropsRef = UChat?.footerInputPropsRef ?? toRef(props, "footerInputProps");
+    const footerButtonPropsRef = UChat?.footerButtonPropsRef ?? toRef(props, "footerButtonProps");
+    const footerUploadPropsRef = UChat?.footerUploadPropsRef ?? toRef(props, "footerUploadProps");
+    const footerIconPropsRef = UChat?.footerIconPropsRef ?? toRef(props, "footerIconProps");
+    const footerSuffixIconPropsRef = UChat?.footerSuffixIconPropsRef ?? toRef(props, "footerSuffixIconProps");
+    const inputPlaceholderRef = UChat?.inputPlaceholderRef ?? computed(
+      () => props.inputPlaceholder ?? localeRef.value.inputPlaceholder
+    );
+    const retryTextRef = UChat?.retryTextRef ?? computed(() => props.retryText ?? localeRef.value.retryText);
+    const typingTextRef = UChat?.typingTextRef ?? computed(() => props.typingText ?? localeRef.value.typingText);
+    const closeButtonTextRef = UChat?.closeButtonTextRef ?? computed(
+      () => props.closeButtonText ?? localeRef.value.closeButtonText
+    );
+    const shareButtonTooltipRef = UChat?.shareButtonTooltipRef ?? computed(
+      () => props.shareButtonTooltip ?? localeRef.value.shareButtonTooltip
+    );
+    const profileButtonTooltipRef = UChat?.profileButtonTooltipRef ?? computed(
+      () => props.profileButtonTooltip ?? localeRef.value.profileButtonTooltip
+    );
+    const unreadNotificationTextRef = UChat?.unreadNotificationTextRef ?? computed(
+      () => props.unreadNotificationText ?? localeRef.value.unreadNotificationText
+    );
+    const notificationsShownSetRef = UChat?.notificationsShownSetRef ?? ref(/* @__PURE__ */ new Set());
+    const unreadCountsBeforeReadRef = UChat?.unreadCountsBeforeReadRef ?? ref({});
+    const markNotificationShown = UChat?.markNotificationShown ?? ((chatId) => {
+      notificationsShownSetRef.value.add(chatId);
+      notificationsShownSetRef.value = new Set(notificationsShownSetRef.value);
+    });
+    const editMessageIdRef = UChat?.editMessageIdRef ?? ref(null);
+    const startEditingMessageRef = UChat?.startEditingMessage ?? ref();
+    const bubbleActionsRef = UChat?.bubbleActionsRef ?? 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 ?? toRef(props, "onAttachmentUpload");
+    const onChatClose = UChat?.onChatClose ?? toRef(props, "onChatClose");
+    const onChatShare = UChat?.onChatShare ?? toRef(props, "onChatShare");
+    const onUserProfile = UChat?.onUserProfile ?? toRef(props, "onUserProfile");
+    const onMessagesScrollToTop = UChat?.onMessagesScrollToTop ?? toRef(props, "onMessagesScrollToTop");
+    const onMessagesScrollToBottom = UChat?.onMessagesScrollToBottom ?? toRef(props, "onMessagesScrollToBottom");
+    const cssVarsRef = 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",
+      computed(() => ""),
+      cssVarsRef,
+      props
+    );
     const messagesBodyRef = ref();
     const inputRef = ref();
     const inputValue = ref("");
@@ -55720,6 +56320,11 @@ var ChatMainArea = defineComponent({
       },
       { deep: true, flush: "post" }
     );
+    onMounted(() => {
+      void nextTick(() => {
+        scrollToBottom();
+      });
+    });
     watch(unreadMessagesCount, (newCount, oldCount) => {
       if (selectedChatRef.value && newCount === 0 && oldCount > 0) {
         showNotificationManually.value = false;
@@ -55763,22 +56368,24 @@ var ChatMainArea = defineComponent({
       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) => {
@@ -56155,7 +56762,7 @@ var ChatMainArea = defineComponent({
               class: `${mergedClsPrefixRef.value}-chat-main__input-container`
             },
             {
-              default: () => /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(_UUploadTrigger, { abstract: true }, {
+              default: () => /* @__PURE__ */ h(Fragment, null, props.showAttachButton && /* @__PURE__ */ h(_UUploadTrigger, { abstract: true }, {
                 default: ({
                   handleClick
                 }) => /* @__PURE__ */ h(
@@ -56244,7 +56851,60 @@ var ChatMainArea = defineComponent({
         }
       ));
     };
+    if (isStandalone) {
+      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: 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,
@@ -56259,18 +56919,41 @@ var ChatMainArea = defineComponent({
     };
   },
   render() {
-    const { mergedClsPrefixRef } = inject(chatInjectionKey);
-    return /* @__PURE__ */ h("div", { class: `${mergedClsPrefixRef.value}-chat-main` }, this.renderHeader(), /* @__PURE__ */ h(
-      SafeTopScrollbar,
+    this.onRender?.();
+    const { mergedClsPrefix } = this;
+    const mainArea = /* @__PURE__ */ 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__ */ h(
+        SafeTopScrollbar,
+        {
+          ref: "messagesBodyRef",
+          class: `${mergedClsPrefix}-chat-main__body`,
+          onScroll: this.handleMessagesScroll
+        },
+        {
+          default: () => this.renderMessages()
+        }
+      ),
+      this.renderFooter()
+    );
+    if (!this.isStandalone) {
+      return mainArea;
+    }
+    return /* @__PURE__ */ h(
+      "div",
       {
-        default: () => this.renderMessages()
-      }
-    ), this.renderFooter());
+        class: [`${mergedClsPrefix}-chat`, this.themeClass],
+        style: this.cssVars
+      },
+      mainArea
+    );
   }
 });
 
@@ -58310,7 +58993,7 @@ var _UChat = defineComponent({
             chatItemSuffix: $slots.chatItemSuffix
           })
         ]), this.selectedChatId && resolveSlot($slots.default, () => [
-          /* @__PURE__ */ h(ChatMainArea, { ref: "mainAreaRef" }, {
+          /* @__PURE__ */ h(_UChatMainArea, { ref: "mainAreaRef" }, {
             headerActions: $slots.headerActions,
             footerAttachIcon: $slots.footerAttachIcon,
             footerSuffixIcon: $slots.footerSuffixIcon
@@ -65386,6 +66069,8 @@ const paginationProps = {
   onUpdatePage: [Function, Array],
   "onUpdate:pageSize": [Function, Array],
   onUpdatePageSize: [Function, Array],
+  onPrev: [Function, Array],
+  onNext: [Function, Array],
   /** @deprecated */
   onPageSizeChange: [Function, Array],
   /** @deprecated */
@@ -66181,12 +66866,18 @@ var _UPagination = defineComponent({
       if (props.disabled || !mergedHasNextRef.value)
         return;
       const page = props.hasNext === void 0 ? Math.min(mergedPageRef.value + 1, mergedPageCountRef.value) : mergedPageRef.value + 1;
+      const { onNext } = props;
+      if (onNext)
+        call(onNext, page);
       doUpdatePage(page);
     }
     function backward() {
       if (props.disabled || !mergedHasPrevRef.value)
         return;
       const page = Math.max(mergedPageRef.value - 1, 1);
+      const { onPrev } = props;
+      if (onPrev)
+        call(onPrev, page);
       doUpdatePage(page);
     }
     function fastForward() {
@@ -92678,7 +93369,7 @@ var _UIconBar = defineComponent({
 const iconPackInputLight = {
   ...inputLight,
   self(vars) {
-    const originalInputSelf = self$1o(vars);
+    const originalInputSelf = self$1p(vars);
     const {
       elementsDarkQuinary,
       elementsPrimary
@@ -115800,6 +116491,7 @@ const UCarouselItem = wrap(_UCarouselItem);
 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);
@@ -115887,6 +116579,7 @@ const UMappingCardList = wrap(_UMappingCardList);
 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);
@@ -115961,6 +116654,10 @@ var components = /*#__PURE__*/Object.freeze({
   ChatAttachmentStatus: ChatAttachmentStatus,
   ChatMarkType: ChatMarkType,
   ChatMessageType: ChatMessageType,
+  MessageBubbleAttachmentStatus: MessageBubbleAttachmentStatus,
+  MessageBubbleServiceVariant: MessageBubbleServiceVariant,
+  MessageBubbleStatus: MessageBubbleStatus,
+  MessageBubbleType: MessageBubbleType,
   MessageStatus: MessageStatus,
   NA: a,
   NP: p,
@@ -115987,6 +116684,7 @@ var components = /*#__PURE__*/Object.freeze({
   UCascader: UCascader,
   UChat: UChat,
   UChatListItems: UChatListItems,
+  UChatMainArea: UChatMainArea,
   UChatMessages: UChatMessages,
   UCheckbox: UCheckbox,
   UCheckboxGroup: UCheckboxGroup,
@@ -116082,6 +116780,7 @@ var components = /*#__PURE__*/Object.freeze({
   UMarquee: UMarquee,
   UMention: UMention,
   UMenu: UMenu,
+  UMessageBubble: UMessageBubble,
   UMessageProvider: UMessageProvider,
   UModal: UModal,
   UModalFullscreen: UModalFullscreen,
@@ -116268,6 +116967,7 @@ var components = /*#__PURE__*/Object.freeze({
   mappingCardLight: mappingCardLight,
   mentionProps: mentionProps,
   menuProps: menuProps,
+  messageBubbleProps: messageBubbleProps,
   messageProviderProps: messageProviderProps,
   modalFullscreenProps: modalFullscreenProps,
   modalProps: modalProps,
@@ -116361,7 +117061,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.2.0";
+var version = "2.3.0";
 
 function create({
   componentPrefix = "U",
@@ -116473,6 +117173,7 @@ const lightTheme = {
   Marquee: marqueeLight,
   Menu: menuLight,
   Mention: mentionLight,
+  MessageBubble: messageBubbleLight,
   Message: messageLight,
   Modal: modalLight,
   Notification: notificationLight,
@@ -117097,6 +117798,7 @@ const darkTheme = {
   Marquee: marqueeDark,
   Menu: menuDark,
   Mention: listDark,
+  MessageBubble: messageBubbleDark,
   Message: messageDark,
   Modal: modalDark,
   Notification: notificationDark,
@@ -117164,4 +117866,4 @@ function createTheme(name, componentThemes) {
   return theme;
 }
 
-export { ChatAttachmentStatus, ChatMarkType, ChatMessageType, MessageStatus, a as NA, p as NP, UActionCard, UAffix, UAlert, UAnchor, UAnchorLink, UAutoComplete, UAvatar, UAvatarGroup, UBackTop, UBadge, UBlockquote, UBreadcrumb, UBreadcrumbItem, UButton, UButtonGroup, UCalendar, UCard, UCardList, UCarousel, UCarouselItem, UCascader, UChat, UChatListItems, UChatMessages, UCheckbox, UCheckboxGroup, UCode, UCol, UCollapse, UCollapseItem, UCollapseTransition, UColorPicker, UConfigProvider, UCountdown, UCrop, UDataTable, UDatePicker, UDatePickerV2, UDescriptions, UDescriptionsItem, UDialog, UDialogProvider, UDivider, UDrawer, UDrawerContent, UDropdown, UDynamicInput, UDynamicTags, UEl, UElement, UEllipsis, UEmpty, UEquation, UFlex, UFloatButton, UFloatButtonGroup, UForm, UFormItem, UFormItemCol, UFormItemGi, UFormItemGridItem, UFormItemRow, UGi, UGlobalStyle, UGradientText, UGrid, UGridItem, UH1, UH2, UH3, UH4, UH5, UH6, UHeader, UHeaderActions, UHeaderDesktopLayout, HeaderMobile as UHeaderMobile, UHeaderMobileLayout, UHeaderNavigation, UHeaderSearchDesktop, UHeaderSearchMobile, UHeaderSearchResults, UHeatmap, UHighlight, UHr, UIcon, UIconBar, UIconBarItem, UIconPack, UIconWrapper, UImage, UImageGroup, UImagePreview, UInfiniteScroll, UInput, UInputGroup, UInputGroupLabel, UInputNumber, UInputOtp, UKanban, UKanbanCard, UKanbanColumn, ULayout, ULayoutContent, ULayoutFooter, ULayoutHeader, ULayoutSider, ULegacyTransfer, ULi, UList, UListItem, ULoadingBarProvider, ULog, UMappingCard, UMappingCardList, UMarquee, UMention, UMenu, UMessageProvider, UModal, UModalFullscreen, UModalProvider, UNotificationProvider, UNumberAnimation, UOl, UPageHeader, UPagination, UPerformantEllipsis, UPopconfirm, UPopover, UPopselect, UProgress, UQrCode, URadio, URadioButton, URadioGroup, URate, UResult, URow, USafeTopScrollbar, UScrollbar, USelect, USkeleton, USlider, USpace, USpin, USplit, UStatistic, UStatus, UStep, USteps, USwitch, UTab, UTabPane, UTable, UTabs, UTag, UTagGroup, UTbody, UTd, UText, UTh, UThead, ThemeEditor as UThemeEditor, UThing, UTime, UTimePicker, UTimeline, UTimelineItem, UToggleButton, UTooltip, UTr, UTransfer, UTree, UTreeSelect, UUl, UUpload, UUploadDragger, UUploadFileList, UUploadTrigger, UVirtualList, UWatermark, UxButton, UzumUiResolver, aProps, actionCardDark, actionCardLight, affixProps, alertDark, alertProps, anchorDark, anchorLinkProps, anchorProps, autoCompleteDark, autoCompleteProps, avatarDark, avatarGroupProps, avatarProps, backTopDark, backTopProps, badgeDark, badgeProps, blockquoteProps, breadcrumbDark, breadcrumbItemProps, breadcrumbProps, buttonDark, buttonGroupDark, buttonGroupProps, buttonProps, c$1 as c, cB, cE, cM, cNotM, calendarProps, cardDark$1 as cardDark, cardDark as cardListDark, cardListProps, cardProps, carouselProps, cascaderDark, cascaderProps, checkboxDark, checkboxGroupProps, checkboxProps, codeDark, codeProps, colProps, collapseDark, collapseItemProps, collapseProps, collapseTransitionProps, colorPickerProps, derived$1 as commonDark, derived as commonLight, configProviderProps, countdownProps, create, createDiscreteApi, createLocale, createTheme, cropProps, darkTheme, dataTableDark, dataTableProps, dateEnUs as dateEnUS, datePickerDark, datePickerProps, datePickerV2Dark, datePickerV2Light, dateRuRU, dateUzUZ, dateZhCN, uzumUi as default, descriptionsDark, descriptionsItemProps, descriptionsProps, dialogDark, dialogProps, dialogProviderProps, dividerDark, dividerProps, drawerContentProps, drawerDark, drawerProps, dropdownDark, dropdownProps, dynamicInputDark, dynamicInputProps, dynamicTagsDark, dynamicTagsProps, elementDark, elementProps, ellipsisProps, emptyDark$1 as emptyDark, emptyProps, enUS$1 as enUS, equationProps, flexProps, floatButtonDark, floatButtonGroupDark, floatButtonGroupProps, floatButtonProps, formItemDark as formDark, formItemGiProps, formItemGiProps as formItemGridItemProps, formItemProps, formProps, getMenuItemKey, gridItemProps as giProps, gradientTextDark, gradientTextProps, gridItemProps, gridProps, headerProps$2 as h1Props, headerProps$2 as h2Props, headerProps$2 as h3Props, headerProps$2 as h4Props, headerProps$2 as h5Props, headerProps$2 as h6Props, hasChildren, headerActionsProps, headerDesktopLayoutProps, headerMobileLayoutProps, headerMobileProps, headerNavigationProps, headerProps$1 as headerProps, headerSearchDesktopProps, headerSearchMobileProps, headerSearchResultsProps, HeatmapDark as heatmapDark, heatmapLight, heatmapMockData, heatmapProps, highlightProps, iconBarItemProps, iconBarProps, iconDark$1 as iconDark, iconPackDark, iconPackLight, iconPackProps, iconProps, iconWrapperProps, imageGroupProps, imagePreviewProps, imageProps, infiniteScrollProps, inputDark, inputGroupLabelProps, inputGroupProps, inputNumberDark, inputNumberProps, inputOtpDark, inputOtpProps, inputProps, install, internalSelectMenuDark, internalSelectionDark, isColumnOption, isDividerOption, isGroupOption, isLeafMenuOption, isNotNull, kanbanDark, kanbanLight, kanbanProps, layoutProps as layoutContentProps, layoutDark, layoutFooterProps, headerProps as layoutHeaderProps, layoutProps, layoutSiderProps, transferProps$1 as legacyTransferProps, lightTheme, listDark$1 as listDark, listProps, loadingBarDark, loadingBarProviderProps, logDark, logProps, mappingCardDark, mappingCardLight, marqueeDark, listDark as mentionDark, mentionProps, menuDark, menuProps, messageDark, messageProviderProps, modalDark, modalFullscreenProps, modalProps, modalProviderProps, notificationDark, notificationProviderProps, numberAnimationProps, olProps, pProps, pageHeaderProps, paginationDark, paginationProps, popconfirmDark, popconfirmProps, popoverDark, popoverProps, popselect as popselectDark, popselectProps, progressDark, progressProps, qrCodeProps, radioButtonProps, radioDark, radioGroupProps, radioProps, rateDark, rateProps, renderAsyncIcon, renderBadge, renderConfig, renderIcon, renderOptionLabel, resolvePlacement, resolveTopLevelMenuKey, resultDark, resultProps, rowProps, ruRu as ruRU, safeTopScrollbarProps, scrollbarDark, scrollbarProps, selectDark, selectProps, skeletonProps, sliderDark, sliderProps, spaceDark, spaceProps, spinDark, spinProps, splitProps, statisticDark, statisticProps, emptyDark as statusDark, statusProps, stepProps, stepsDark, stepsProps, switchDark, switchProps, tabPaneProps, tabProps, tableDark, tableProps, tabsDark, tabsProps, tagDark, tagProps, textProps, thingDark, thingProps, timePickerDark, timePickerProps, timeProps, timelineDark, timelineItemProps, timelineProps, toggleButtonDark, toggleButtonProps, tooltipDark, tooltipProps, transferDark$1 as transferDark, transferProps, treeDark, treeGetClickTarget, treeProps, treeSelectDark, treeSelectProps, typographyDark, ulProps, alertRtl as unstableAlertRtl, avatarGroupRtl as unstableAvatarGroupRtl, badgeRtl as unstableBadgeRtl, buttonGroupRtl as unstableButtonGroupRtl, buttonRtl as unstableButtonRtl, cardRtl as unstableCardRtl, checkboxRtl as unstableCheckboxRtl, collapseRtl as unstableCollapseRtl, collapseTransitionRtl as unstableCollapseTransitionRtl, drawerRtl as unstableDrawerRtl, dynamicInputRtl as unstableDynamicInputRtl, inputNumberRtl as unstableInputNumberRtl, inputOtpRtl as unstableInputOtpRtl, inputRtl as unstableInputRtl, listRtl as unstableListRtl, messageRtl as unstableMessageRtl, notificationRtl as unstableNotificationRtl, rtl as unstablePageHeaderRtl, paginationRtl as unstablePaginationRtl, radioRtl as unstableRadioRtl, rowRtl as unstableRowRtl, scrollbarRtl as unstableScrollbarRtl, spaceRtl as unstableSpaceRtl, statisticRtl as unstableStatisticRtl, stepsRtl as unstableStepsRtl, tableRtl as unstableTableRtl, tagRtl as unstableTagRtl, thingRtl as unstableThingRtl, treeRtl as unstableTreeRtl, uploadRtl as unstableUploadRtl, uploadDark, publicDownload as uploadDownload, uploadProps, useDialog, useDialogReactiveList, useLoadingBar, useMessage, useModal, useModalReactiveList, useNotification, useOsTheme, useThemeVars, uzUZ, version, virtualListProps, watermarkDark, watermarkProps, zhCN$1 as zhCN, zindexable };
+export { ChatAttachmentStatus, ChatMarkType, ChatMessageType, MessageBubbleAttachmentStatus, MessageBubbleServiceVariant, MessageBubbleStatus, MessageBubbleType, MessageStatus, a as NA, p as NP, UActionCard, UAffix, UAlert, UAnchor, UAnchorLink, UAutoComplete, UAvatar, UAvatarGroup, UBackTop, UBadge, UBlockquote, UBreadcrumb, UBreadcrumbItem, UButton, UButtonGroup, UCalendar, UCard, UCardList, UCarousel, UCarouselItem, UCascader, UChat, UChatListItems, UChatMainArea, UChatMessages, UCheckbox, UCheckboxGroup, UCode, UCol, UCollapse, UCollapseItem, UCollapseTransition, UColorPicker, UConfigProvider, UCountdown, UCrop, UDataTable, UDatePicker, UDatePickerV2, UDescriptions, UDescriptionsItem, UDialog, UDialogProvider, UDivider, UDrawer, UDrawerContent, UDropdown, UDynamicInput, UDynamicTags, UEl, UElement, UEllipsis, UEmpty, UEquation, UFlex, UFloatButton, UFloatButtonGroup, UForm, UFormItem, UFormItemCol, UFormItemGi, UFormItemGridItem, UFormItemRow, UGi, UGlobalStyle, UGradientText, UGrid, UGridItem, UH1, UH2, UH3, UH4, UH5, UH6, UHeader, UHeaderActions, UHeaderDesktopLayout, HeaderMobile as UHeaderMobile, UHeaderMobileLayout, UHeaderNavigation, UHeaderSearchDesktop, UHeaderSearchMobile, UHeaderSearchResults, UHeatmap, UHighlight, UHr, UIcon, UIconBar, UIconBarItem, UIconPack, UIconWrapper, UImage, UImageGroup, UImagePreview, UInfiniteScroll, UInput, UInputGroup, UInputGroupLabel, UInputNumber, UInputOtp, UKanban, UKanbanCard, UKanbanColumn, ULayout, ULayoutContent, ULayoutFooter, ULayoutHeader, ULayoutSider, ULegacyTransfer, ULi, UList, UListItem, ULoadingBarProvider, ULog, UMappingCard, UMappingCardList, UMarquee, UMention, UMenu, UMessageBubble, UMessageProvider, UModal, UModalFullscreen, UModalProvider, UNotificationProvider, UNumberAnimation, UOl, UPageHeader, UPagination, UPerformantEllipsis, UPopconfirm, UPopover, UPopselect, UProgress, UQrCode, URadio, URadioButton, URadioGroup, URate, UResult, URow, USafeTopScrollbar, UScrollbar, USelect, USkeleton, USlider, USpace, USpin, USplit, UStatistic, UStatus, UStep, USteps, USwitch, UTab, UTabPane, UTable, UTabs, UTag, UTagGroup, UTbody, UTd, UText, UTh, UThead, ThemeEditor as UThemeEditor, UThing, UTime, UTimePicker, UTimeline, UTimelineItem, UToggleButton, UTooltip, UTr, UTransfer, UTree, UTreeSelect, UUl, UUpload, UUploadDragger, UUploadFileList, UUploadTrigger, UVirtualList, UWatermark, UxButton, UzumUiResolver, aProps, actionCardDark, actionCardLight, affixProps, alertDark, alertProps, anchorDark, anchorLinkProps, anchorProps, autoCompleteDark, autoCompleteProps, avatarDark, avatarGroupProps, avatarProps, backTopDark, backTopProps, badgeDark, badgeProps, blockquoteProps, breadcrumbDark, breadcrumbItemProps, breadcrumbProps, buttonDark, buttonGroupDark, buttonGroupProps, buttonProps, c$1 as c, cB, cE, cM, cNotM, calendarProps, cardDark$1 as cardDark, cardDark as cardListDark, cardListProps, cardProps, carouselProps, cascaderDark, cascaderProps, checkboxDark, checkboxGroupProps, checkboxProps, codeDark, codeProps, colProps, collapseDark, collapseItemProps, collapseProps, collapseTransitionProps, colorPickerProps, derived$1 as commonDark, derived as commonLight, configProviderProps, countdownProps, create, createDiscreteApi, createLocale, createTheme, cropProps, darkTheme, dataTableDark, dataTableProps, dateEnUs as dateEnUS, datePickerDark, datePickerProps, datePickerV2Dark, datePickerV2Light, dateRuRU, dateUzUZ, dateZhCN, uzumUi as default, descriptionsDark, descriptionsItemProps, descriptionsProps, dialogDark, dialogProps, dialogProviderProps, dividerDark, dividerProps, drawerContentProps, drawerDark, drawerProps, dropdownDark, dropdownProps, dynamicInputDark, dynamicInputProps, dynamicTagsDark, dynamicTagsProps, elementDark, elementProps, ellipsisProps, emptyDark$1 as emptyDark, emptyProps, enUS$1 as enUS, equationProps, flexProps, floatButtonDark, floatButtonGroupDark, floatButtonGroupProps, floatButtonProps, formItemDark as formDark, formItemGiProps, formItemGiProps as formItemGridItemProps, formItemProps, formProps, getMenuItemKey, gridItemProps as giProps, gradientTextDark, gradientTextProps, gridItemProps, gridProps, headerProps$2 as h1Props, headerProps$2 as h2Props, headerProps$2 as h3Props, headerProps$2 as h4Props, headerProps$2 as h5Props, headerProps$2 as h6Props, hasChildren, headerActionsProps, headerDesktopLayoutProps, headerMobileLayoutProps, headerMobileProps, headerNavigationProps, headerProps$1 as headerProps, headerSearchDesktopProps, headerSearchMobileProps, headerSearchResultsProps, HeatmapDark as heatmapDark, heatmapLight, heatmapMockData, heatmapProps, highlightProps, iconBarItemProps, iconBarProps, iconDark$1 as iconDark, iconPackDark, iconPackLight, iconPackProps, iconProps, iconWrapperProps, imageGroupProps, imagePreviewProps, imageProps, infiniteScrollProps, inputDark, inputGroupLabelProps, inputGroupProps, inputNumberDark, inputNumberProps, inputOtpDark, inputOtpProps, inputProps, install, internalSelectMenuDark, internalSelectionDark, isColumnOption, isDividerOption, isGroupOption, isLeafMenuOption, isNotNull, kanbanDark, kanbanLight, kanbanProps, layoutProps as layoutContentProps, layoutDark, layoutFooterProps, headerProps as layoutHeaderProps, layoutProps, layoutSiderProps, transferProps$1 as legacyTransferProps, lightTheme, listDark$1 as listDark, listProps, loadingBarDark, loadingBarProviderProps, logDark, logProps, mappingCardDark, mappingCardLight, marqueeDark, listDark as mentionDark, mentionProps, menuDark, menuProps, messageBubbleDark, messageBubbleProps, messageDark, messageProviderProps, modalDark, modalFullscreenProps, modalProps, modalProviderProps, notificationDark, notificationProviderProps, numberAnimationProps, olProps, pProps, pageHeaderProps, paginationDark, paginationProps, popconfirmDark, popconfirmProps, popoverDark, popoverProps, popselect as popselectDark, popselectProps, progressDark, progressProps, qrCodeProps, radioButtonProps, radioDark, radioGroupProps, radioProps, rateDark, rateProps, renderAsyncIcon, renderBadge, renderConfig, renderIcon, renderOptionLabel, resolvePlacement, resolveTopLevelMenuKey, resultDark, resultProps, rowProps, ruRu as ruRU, safeTopScrollbarProps, scrollbarDark, scrollbarProps, selectDark, selectProps, skeletonProps, sliderDark, sliderProps, spaceDark, spaceProps, spinDark, spinProps, splitProps, statisticDark, statisticProps, emptyDark as statusDark, statusProps, stepProps, stepsDark, stepsProps, switchDark, switchProps, tabPaneProps, tabProps, tableDark, tableProps, tabsDark, tabsProps, tagDark, tagProps, textProps, thingDark, thingProps, timePickerDark, timePickerProps, timeProps, timelineDark, timelineItemProps, timelineProps, toggleButtonDark, toggleButtonProps, tooltipDark, tooltipProps, transferDark$1 as transferDark, transferProps, treeDark, treeGetClickTarget, treeProps, treeSelectDark, treeSelectProps, typographyDark, ulProps, alertRtl as unstableAlertRtl, avatarGroupRtl as unstableAvatarGroupRtl, badgeRtl as unstableBadgeRtl, buttonGroupRtl as unstableButtonGroupRtl, buttonRtl as unstableButtonRtl, cardRtl as unstableCardRtl, checkboxRtl as unstableCheckboxRtl, collapseRtl as unstableCollapseRtl, collapseTransitionRtl as unstableCollapseTransitionRtl, drawerRtl as unstableDrawerRtl, dynamicInputRtl as unstableDynamicInputRtl, inputNumberRtl as unstableInputNumberRtl, inputOtpRtl as unstableInputOtpRtl, inputRtl as unstableInputRtl, listRtl as unstableListRtl, messageRtl as unstableMessageRtl, notificationRtl as unstableNotificationRtl, rtl as unstablePageHeaderRtl, paginationRtl as unstablePaginationRtl, radioRtl as unstableRadioRtl, rowRtl as unstableRowRtl, scrollbarRtl as unstableScrollbarRtl, spaceRtl as unstableSpaceRtl, statisticRtl as unstableStatisticRtl, stepsRtl as unstableStepsRtl, tableRtl as unstableTableRtl, tagRtl as unstableTagRtl, thingRtl as unstableThingRtl, treeRtl as unstableTreeRtl, uploadRtl as unstableUploadRtl, uploadDark, publicDownload as uploadDownload, uploadProps, useDialog, useDialogReactiveList, useLoadingBar, useMessage, useModal, useModalReactiveList, useNotification, useOsTheme, useThemeVars, uzUZ, version, virtualListProps, watermarkDark, watermarkProps, zhCN$1 as zhCN, zindexable };