@uzum-tech/ui 2.3.0 → 2.3.2

package/dist/index.mjs

@@ -15756,7 +15756,7 @@ var RemoveIcon = defineComponent({
   }
 });
 
-var ResizeSmallIcon = defineComponent({
+defineComponent({
   name: "ResizeSmall",
   render() {
     return /* @__PURE__ */ h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" }, /* @__PURE__ */ h("g", { fill: "none" }, /* @__PURE__ */ h(
@@ -45095,6 +45095,58 @@ const listRtl = {
 };
 
 function self$17(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$17
+});
+
+const messageBubbleDark = createTheme$1({
+  name: "MessageBubble",
+  common: derived$1,
+  peers: {
+    StatusIcon: iconDark$1
+  },
+  self: vars => ({
+    ...self$17(vars)
+  })
+});
+
+function self$16(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -45109,7 +45161,7 @@ const selectLight = createTheme$1({
     InternalSelection: internalSelectionLight,
     InternalSelectMenu: internalSelectMenuLight
   },
-  self: self$17
+  self: self$16
 });
 
 const selectDark = {
@@ -45119,13 +45171,13 @@ const selectDark = {
     InternalSelection: internalSelectionDark,
     InternalSelectMenu: internalSelectMenuDark
   },
-  self: self$17
+  self: self$16
 };
 
 ({
   style: c$1([])});
 
-function self$16(vars) {
+function self$15(vars) {
   const {
     borderRadiusSmall,
     fontWeightStrong,
@@ -45220,13 +45272,13 @@ function self$16(vars) {
 const typographyLight = {
   name: "Typography",
   common: derived,
-  self: self$16
+  self: self$15
 };
 
 const typographyDark = {
   name: "Typography",
   common: derived$1,
-  self: self$16
+  self: self$15
 };
 
 const chatInputLight = {
@@ -45264,7 +45316,7 @@ const chatBadgeLight = {
     };
   }
 };
-function self$15(vars) {
+function self$14(vars) {
   const {
     borderRadiusLarge,
     elementsQuaternary,
@@ -45331,13 +45383,14 @@ const chatLight = createTheme$1({
     Button: buttonLight,
     List: listLight,
     Typography: typographyLight,
+    MessageBubble: messageBubbleLight,
     StatusIcon: iconLight,
     FooterAttachIcon: iconLight,
     FooterSuffixIcon: iconLight,
     HeaderShareIcon: iconLight,
     HeaderProfileIcon: iconLight
   },
-  self: self$15
+  self: self$14
 });
 
 const chatDark = createTheme$1({
@@ -45352,6 +45405,7 @@ const chatDark = createTheme$1({
     Button: buttonDark,
     List: listDark$1,
     Typography: typographyDark,
+    MessageBubble: messageBubbleDark,
     StatusIcon: iconDark$1,
     FooterAttachIcon: iconDark$1,
     FooterSuffixIcon: iconDark$1,
@@ -45359,7 +45413,7 @@ const chatDark = createTheme$1({
     HeaderProfileIcon: iconDark$1
   },
   self: vars => {
-    const lightVars = self$15(vars);
+    const lightVars = self$14(vars);
     return {
       ...lightVars
     };
@@ -46708,7 +46762,284 @@ var _UUl = defineComponent({
   }
 });
 
-function self$14(vars) {
+function isImageFileType(type) {
+  return type.includes("image/");
+}
+function getExtname(url = "") {
+  const temp = url.split("/");
+  const filename = temp[temp.length - 1];
+  const filenameWithoutSuffix = filename.split(/#|\?/)[0];
+  return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
+}
+const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
+function capitalizeFirstLetter(str) {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const isImageFile = file => {
+  if (file.type) {
+    return isImageFileType(file.type);
+  }
+  const fileNameExtension = getExtname(file.name || "");
+  if (imageExtensionRegex.test(fileNameExtension)) {
+    return true;
+  }
+  const url = file.thumbnailUrl || file.url || "";
+  const urlExtension = getExtname(url);
+  if (/^data:image\//.test(url) || imageExtensionRegex.test(urlExtension)) {
+    return true;
+  }
+  return false;
+};
+async function createImageDataUrl(file) {
+  return await new Promise(resolve => {
+    if (!file.type || !isImageFileType(file.type)) {
+      resolve("");
+      return;
+    }
+    resolve(window.URL.createObjectURL(file));
+  });
+}
+const environmentSupportFile = isBrowser$1 && window.FileReader && window.File;
+function isFileSystemDirectoryEntry(item) {
+  return item.isDirectory;
+}
+function isFileSystemFileEntry(item) {
+  return item.isFile;
+}
+async function getFilesFromEntries(entries, directory) {
+  const fileAndEntries = [];
+  let _resolve;
+  let requestCallbackCount = 0;
+  function lock() {
+    requestCallbackCount++;
+  }
+  function unlock() {
+    requestCallbackCount--;
+    if (!requestCallbackCount) {
+      _resolve(fileAndEntries);
+    }
+  }
+  function _getFilesFromEntries(entries2) {
+    entries2.forEach(entry => {
+      if (!entry) return;
+      lock();
+      if (directory && isFileSystemDirectoryEntry(entry)) {
+        const directoryReader = entry.createReader();
+        lock();
+        directoryReader.readEntries(entries3 => {
+          _getFilesFromEntries(entries3);
+          unlock();
+        }, () => {
+          unlock();
+        });
+      } else if (isFileSystemFileEntry(entry)) {
+        lock();
+        entry.file(file => {
+          fileAndEntries.push({
+            file,
+            entry,
+            source: "dnd"
+          });
+          unlock();
+        }, () => {
+          unlock();
+        });
+      }
+      unlock();
+    });
+  }
+  await new Promise(resolve => {
+    _resolve = resolve;
+    _getFilesFromEntries(entries);
+  });
+  return fileAndEntries;
+}
+function getFilePreviewSrc(file) {
+  return file.url || file.thumbnailUrl || null;
+}
+function isFileSizeExceeded(file, maxSize) {
+  if (maxSize === void 0 || !file) return false;
+  return file.size > maxSize;
+}
+function createSettledFileInfo(fileInfo) {
+  const {
+    id,
+    name,
+    percentage,
+    status,
+    url,
+    file,
+    thumbnailUrl,
+    type,
+    fullPath,
+    batchId
+  } = fileInfo;
+  return {
+    id,
+    name,
+    percentage: percentage ?? null,
+    status,
+    url: url ?? null,
+    file: file ?? null,
+    thumbnailUrl: thumbnailUrl ?? null,
+    type: type ?? null,
+    fullPath: fullPath ?? null,
+    batchId: batchId ?? null
+  };
+}
+function matchType(name, mimeType, accept) {
+  name = name.toLowerCase();
+  mimeType = mimeType.toLocaleLowerCase();
+  accept = accept.toLocaleLowerCase();
+  const acceptAtoms = accept.split(",").map(acceptAtom => acceptAtom.trim()).filter(Boolean);
+  return acceptAtoms.some(acceptAtom => {
+    if (acceptAtom.startsWith(".")) {
+      if (name.endsWith(acceptAtom)) return true;
+    } else if (acceptAtom.includes("/")) {
+      const [type, subtype] = mimeType.split("/");
+      const [acceptType, acceptSubtype] = acceptAtom.split("/");
+      if (acceptType === "*" || type && acceptType && acceptType === type) {
+        if (acceptSubtype === "*" || subtype && acceptSubtype && acceptSubtype === subtype) {
+          return true;
+        }
+      }
+    } else {
+      return true;
+    }
+    return false;
+  });
+}
+function download(url, name) {
+  if (!url) return;
+  const a = document.createElement("a");
+  a.href = url;
+  if (name !== void 0) {
+    a.download = name;
+  }
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+const uploadInjectionKey = createInjectionKey("u-upload");
+const uploadProps = {
+  ...useTheme.props,
+  name: {
+    type: String,
+    default: "file"
+  },
+  accept: String,
+  action: String,
+  customRequest: Function,
+  directory: Boolean,
+  directoryDnd: {
+    type: Boolean,
+    default: void 0
+  },
+  method: {
+    type: String,
+    default: "POST"
+  },
+  multiple: Boolean,
+  showFileList: {
+    type: Boolean,
+    default: true
+  },
+  data: [Object, Function],
+  headers: [Object, Function],
+  withCredentials: Boolean,
+  responseType: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  icon: Object,
+  onChange: Function,
+  onRemove: Function,
+  onFinish: Function,
+  onError: Function,
+  onRetry: Function,
+  onBeforeUpload: Function,
+  isErrorState: Function,
+  onDownload: Function,
+  defaultUpload: {
+    type: Boolean,
+    default: true
+  },
+  fileList: Array,
+  "onUpdate:fileList": [Function, Array],
+  onUpdateFileList: [Function, Array],
+  fileListClass: String,
+  fileListStyle: [String, Object],
+  defaultFileList: {
+    type: Array,
+    default: () => []
+  },
+  showCancelButton: {
+    type: Boolean,
+    default: true
+  },
+  showRemoveButton: {
+    type: Boolean,
+    default: true
+  },
+  showDownloadButton: Boolean,
+  showRetryButton: {
+    type: Boolean,
+    default: true
+  },
+  customDownload: Function,
+  showPreviewButton: {
+    type: Boolean,
+    default: true
+  },
+  listType: {
+    type: String,
+    default: "text"
+  },
+  onPreview: Function,
+  shouldUseThumbnailUrl: {
+    type: Function,
+    default: file => {
+      if (!environmentSupportFile) return false;
+      return isImageFile(file);
+    }
+  },
+  createThumbnailUrl: Function,
+  abstract: Boolean,
+  max: Number,
+  maxSize: Number,
+  showTrigger: {
+    type: Boolean,
+    default: true
+  },
+  imageGroupProps: Object,
+  inputProps: Object,
+  triggerClass: String,
+  triggerStyle: [String, Object],
+  renderIcon: Function,
+  label: String,
+  size: {
+    type: String,
+    default: "medium"
+  },
+  title: String,
+  subtitle: String,
+  noIcon: {
+    type: Boolean,
+    default: false
+  }
+};
+
+function self$13(vars) {
   const {
     fontWeight,
     fontBodyMedium,
@@ -46749,16 +47080,16 @@ function self$14(vars) {
 const progressLight = {
   name: "Progress",
   common: derived,
-  self: self$14
+  self: self$13
 };
 
 const progressDark = {
   name: "Progress",
   common: derived$1,
-  self: self$14
+  self: self$13
 };
 
-function self$13(vars) {
+function self$12(vars) {
   const {
     staticGreen,
     staticRed,
@@ -46815,7 +47146,7 @@ const uploadLight = createTheme$1({
     Button: buttonLight,
     Progress: progressLight
   },
-  self: self$13
+  self: self$12
 });
 
 const uploadDark = {
@@ -46825,7 +47156,7 @@ const uploadDark = {
     Button: buttonDark,
     Progress: progressDark
   },
-  self: self$13
+  self: self$12
 };
 
 var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -46838,8 +47169,6 @@ const uploadRtl = {
   style: rtlStyle$i
 };
 
-const uploadInjectionKey = createInjectionKey("u-upload");
-
 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", `
@@ -47304,7 +47633,7 @@ const cardDark = {
   self: self$1d
 };
 
-function self$12(vars) {
+function self$11(vars) {
   const {
     textPrimary,
     fontBodyMedium,
@@ -47332,12 +47661,12 @@ function self$12(vars) {
 const codeLight = {
   name: "Code",
   common: derived,
-  self: self$12
+  self: self$11
 };
 
-function self$11(vars) {
+function self$10(vars) {
   return {
-    ...self$12(vars),
+    ...self$11(vars),
     // extracted from hljs atom-one-dark.scss
     "mono-3": "#5c6370",
     "hue-1": "#56b6c2",
@@ -47353,10 +47682,10 @@ function self$11(vars) {
 const codeDark = {
   name: "Code",
   common: derived$1,
-  self: self$11
+  self: self$10
 };
 
-function self$10(vars) {
+function self$$(vars) {
   const {
     cubicBezierEaseInOut
   } = vars;
@@ -47367,13 +47696,13 @@ function self$10(vars) {
 const collapseTransitionLight = {
   name: "CollapseTransition",
   common: derived,
-  self: self$10
+  self: self$$
 };
 
 const collapseTransitionDark = {
   name: "CollapseTransition",
   common: derived$1,
-  self: self$10
+  self: self$$
 };
 
 var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -47386,7 +47715,7 @@ const collapseTransitionRtl = {
   style: rtlStyle$g
 };
 
-function self$$(vars) {
+function self$_(vars) {
   const {
     fontWeight,
     fontBodyLarge,
@@ -47426,13 +47755,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 +47784,7 @@ const collapseRtl = {
   style: rtlStyle$f
 };
 
-function self$_(vars) {
+function self$Z(vars) {
   const {
     borderRadius,
     fontBodySmall,
@@ -47542,7 +47871,7 @@ const dropdownLight = createTheme$1({
   peers: {
     Popover: popoverLight
   },
-  self: self$_
+  self: self$Z
 });
 
 const dropdownDark = {
@@ -47551,7 +47880,7 @@ const dropdownDark = {
   peers: {
     Popover: popoverDark
   },
-  self: self$_
+  self: self$Z
 };
 
 const popselect = {
@@ -47563,7 +47892,7 @@ const popselect = {
   }
 };
 
-function self$Z(vars) {
+function self$Y(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -47578,10 +47907,10 @@ const popselectLight = createTheme$1({
     Popover: popoverLight,
     InternalSelectMenu: internalSelectMenuLight
   },
-  self: self$Z
+  self: self$Y
 });
 
-function self$Y(vars) {
+function self$X(vars) {
   const {
     brandPrimary100,
     transparencySecondary,
@@ -47679,7 +48008,7 @@ const paginationLight = createTheme$1({
     Input: inputLight,
     Popselect: popselectLight
   },
-  self: self$Y
+  self: self$X
 });
 
 const paginationDark = {
@@ -47690,7 +48019,7 @@ const paginationDark = {
     Input: inputDark,
     Popselect: popselect
   },
-  self: self$Y
+  self: self$X
 };
 
 var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -47707,7 +48036,7 @@ const paginationRtl = {
   peers: [inputRtl]
 };
 
-function self$X(vars) {
+function self$W(vars) {
   const {
     heightTiny,
     heightSmall,
@@ -47799,13 +48128,13 @@ function self$X(vars) {
 const radioLight = {
   name: "Radio",
   common: derived,
-  self: self$X
+  self: self$W
 };
 
 const radioDark = {
   name: "Radio",
   common: derived$1,
-  self: self$X
+  self: self$W
 };
 
 var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -47833,7 +48162,7 @@ const radioRtl = {
   style: rtlStyle$d
 };
 
-function self$W(vars) {
+function self$V(vars) {
   const {
     borderRadius,
     opacityDisabled,
@@ -47934,7 +48263,7 @@ const dataTableLight = createTheme$1({
     Ellipsis: ellipsisLight,
     Dropdown: dropdownLight
   },
-  self: self$W
+  self: self$V
 });
 
 const dataTableDark = {
@@ -47951,10 +48280,10 @@ const dataTableDark = {
     Ellipsis: ellipsisDark,
     Dropdown: dropdownDark
   },
-  self: self$W
+  self: self$V
 };
 
-function self$V(vars) {
+function self$U(vars) {
   const {
     opacityDisabled,
     borderRadius,
@@ -47996,7 +48325,7 @@ const timePickerLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$V
+  self: self$U
 });
 
 const timePickerDark = {
@@ -48007,7 +48336,7 @@ const timePickerDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$V
+  self: self$U
 };
 
 const itemWidth = "38px";
@@ -48053,7 +48382,7 @@ var commonVars$6 = {
   calendarRightPaddingYearrange: "0"
 };
 
-function self$U(vars) {
+function self$T(vars) {
   const {
     iconMedium,
     fontWeightStrong,
@@ -48154,7 +48483,7 @@ const datePickerLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Select: internalSelectionLight
   },
-  self: self$U
+  self: self$T
 });
 
 const datePickerDark = {
@@ -48167,10 +48496,10 @@ const datePickerDark = {
     Scrollbar: scrollbarDark,
     Select: internalSelectionDark
   },
-  self: self$U
+  self: self$T
 };
 
-function self$T(vars) {
+function self$S(vars) {
   const {
     borderRadius,
     lineHeightBodyLarge,
@@ -48220,13 +48549,13 @@ function self$T(vars) {
 const descriptionsLight = {
   name: "Descriptions",
   common: derived,
-  self: self$T
+  self: self$S
 };
 
 const descriptionsDark = {
   name: "Descriptions",
   common: derived$1,
-  self: self$T
+  self: self$S
 };
 
 var commonVars$5 = {
@@ -48240,7 +48569,7 @@ var commonVars$5 = {
   closeBorderRadius: "100px"
 };
 
-function self$S(vars) {
+function self$R(vars) {
   const {
     borderRadius,
     containerPrimary,
@@ -48297,7 +48626,7 @@ const dialogLight = createTheme$1({
   peers: {
     Button: buttonLight
   },
-  self: self$S
+  self: self$R
 });
 
 const dialogDark = {
@@ -48306,10 +48635,10 @@ const dialogDark = {
   peers: {
     Button: buttonDark
   },
-  self: self$S
+  self: self$R
 };
 
-function self$R(vars) {
+function self$Q(vars) {
   const {
     elementsQuaternary,
     textPrimary,
@@ -48329,13 +48658,13 @@ function self$R(vars) {
 const dividerLight = {
   name: "Divider",
   common: derived,
-  self: self$R
+  self: self$Q
 };
 
 const dividerDark = {
   name: "Divider",
   common: derived$1,
-  self: self$R
+  self: self$Q
 };
 
 var commonVars$4 = {
@@ -48351,7 +48680,7 @@ var commonVars$4 = {
   contentBorderRadius: "24px"
 };
 
-function self$Q(vars) {
+function self$P(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -48400,7 +48729,7 @@ const drawerLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$Q
+  self: self$P
 });
 
 const drawerDark = {
@@ -48409,7 +48738,7 @@ const drawerDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$Q
+  self: self$P
 };
 
 var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -48443,7 +48772,7 @@ const dynamicInputDark = {
   }
 };
 
-function self$P() {
+function self$O() {
   return commonVariables$1;
 }
 const dynamicInputLight = createTheme$1({
@@ -48453,7 +48782,7 @@ const dynamicInputLight = createTheme$1({
     Input: inputLight,
     Button: buttonLight
   },
-  self: self$P
+  self: self$O
 });
 
 var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -48494,12 +48823,12 @@ const spaceDark = {
   }
 };
 
-function self$O() {
+function self$N() {
   return commonVars$3;
 }
 const spaceLight = {
   name: "Space",
-  self: self$O
+  self: self$N
 };
 
 var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -48571,7 +48900,7 @@ const floatButtonGroupDark = {
   }
 };
 
-function self$N(vars) {
+function self$M(vars) {
   const {
     containerPrimary,
     elementsQuaternary,
@@ -48587,7 +48916,7 @@ function self$N(vars) {
 const themeLight$4 = {
   name: "FloatButtonGroup",
   common: derived,
-  self: self$N
+  self: self$M
 };
 
 const floatButtonDark = {
@@ -48622,7 +48951,7 @@ const floatButtonDark = {
   }
 };
 
-function self$M(vars) {
+function self$L(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -48651,10 +48980,10 @@ function self$M(vars) {
 const themeLight$3 = {
   name: "FloatButton",
   common: derived,
-  self: self$M
+  self: self$L
 };
 
-function self$L(vars) {
+function self$K(vars) {
   const {
     heightSmall,
     heightMedium,
@@ -48709,16 +49038,16 @@ function self$L(vars) {
 const formLight = {
   name: "Form",
   common: derived,
-  self: self$L
+  self: self$K
 };
 
 const formItemDark = {
   name: "Form",
   common: derived$1,
-  self: self$L
+  self: self$K
 };
 
-function self$K(vars) {
+function self$J(vars) {
   const {
     brandPrimary500,
     staticGreen,
@@ -48755,16 +49084,16 @@ function self$K(vars) {
 const gradientTextLight = {
   name: "GradientText",
   common: derived,
-  self: self$K
+  self: self$J
 };
 
 const gradientTextDark = {
   name: "GradientText",
   common: derived$1,
-  self: self$K
+  self: self$J
 };
 
-function self$J(vars) {
+function self$I(vars) {
   const {
     textSecondary
   } = vars;
@@ -48779,7 +49108,7 @@ const inputNumberLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$J
+  self: self$I
 });
 
 const inputNumberDark = {
@@ -48789,10 +49118,10 @@ const inputNumberDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$J
+  self: self$I
 };
 
-function self$I() {
+function self$H() {
   return {
     inputWidthSmall: "44px",
     inputWidthMedium: "50px",
@@ -48808,7 +49137,7 @@ const inputOtpLight = createTheme$1({
   peers: {
     Input: inputLight
   },
-  self: self$I
+  self: self$H
 });
 
 const inputOtpDark = {
@@ -48817,7 +49146,7 @@ const inputOtpDark = {
   peers: {
     Input: inputDark
   },
-  self: self$I
+  self: self$H
 };
 
 var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -48829,7 +49158,7 @@ const inputOtpRtl = {
   style: rtlStyle$8
 };
 
-function self$H(vars) {
+function self$G(vars) {
   const {
     textPrimary,
     textQuaternary,
@@ -48875,7 +49204,7 @@ const layoutLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$H
+  self: self$G
 });
 
 const layoutDark = {
@@ -48884,7 +49213,7 @@ const layoutDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$H
+  self: self$G
 };
 
 const rowDark = {
@@ -48921,7 +49250,7 @@ const rowRtl = {
   style: rtlStyle$7
 };
 
-function self$G(vars) {
+function self$F(vars) {
   const {
     brandPrimary500,
     staticRed
@@ -48935,16 +49264,16 @@ function self$G(vars) {
 const loadingBarLight = {
   name: "LoadingBar",
   common: derived,
-  self: self$G
+  self: self$F
 };
 
 const loadingBarDark = {
   name: "LoadingBar",
   common: derived$1,
-  self: self$G
+  self: self$F
 };
 
-function self$F(vars) {
+function self$E(vars) {
   const {
     fontBodyMedium,
     textPrimary,
@@ -48967,7 +49296,7 @@ const logLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Code: codeLight
   },
-  self: self$F
+  self: self$E
 });
 
 const logDark = {
@@ -48977,25 +49306,25 @@ const logDark = {
     Scrollbar: scrollbarDark,
     Code: codeDark
   },
-  self: self$F
+  self: self$E
 };
 
-function self$E() {
+function self$D() {
   return {};
 }
 const marqueeLight = {
   name: "Marquee",
   common: derived,
-  self: self$E
+  self: self$D
 };
 
 const marqueeDark = {
   name: "Marquee",
   common: derived$1,
-  self: self$E
+  self: self$D
 };
 
-function self$D(vars) {
+function self$C(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -49010,7 +49339,7 @@ const mentionLight = createTheme$1({
     InternalSelectMenu: internalSelectMenuLight,
     Input: inputLight
   },
-  self: self$D
+  self: self$C
 });
 
 const listDark = {
@@ -49020,7 +49349,7 @@ const listDark = {
     InternalSelectMenu: internalSelectMenuDark,
     Input: inputDark
   },
-  self: self$D
+  self: self$C
 };
 
 function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49063,7 +49392,7 @@ function createPartialInvertedVars(color, activeItemColor, activeTextColor, grou
     groupTextColorInverted: groupTextColor
   };
 }
-function self$C(vars) {
+function self$B(vars) {
   const {
     textSecondary,
     borderRadiusSmall,
@@ -49131,7 +49460,7 @@ const menuLight = createTheme$1({
     Tooltip: tooltipLight,
     Dropdown: dropdownLight
   },
-  self: self$C
+  self: self$B
 });
 
 const menuDark = {
@@ -49141,60 +49470,8 @@ const menuDark = {
     Tooltip: tooltipDark,
     Dropdown: dropdownDark
   },
-  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 {
@@ -50570,20 +50847,6 @@ const imageDark = {
   self: self$g
 };
 
-const prevIcon = /* @__PURE__ */ h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ h(
-  "path",
-  {
-    d: "M6 5C5.75454 5 5.55039 5.17688 5.50806 5.41012L5.5 5.5V14.5C5.5 14.7761 5.72386 15 6 15C6.24546 15 6.44961 14.8231 6.49194 14.5899L6.5 14.5V5.5C6.5 5.22386 6.27614 5 6 5ZM13.8536 5.14645C13.68 4.97288 13.4106 4.9536 13.2157 5.08859L13.1464 5.14645L8.64645 9.64645C8.47288 9.82001 8.4536 10.0894 8.58859 10.2843L8.64645 10.3536L13.1464 14.8536C13.3417 15.0488 13.6583 15.0488 13.8536 14.8536C14.0271 14.68 14.0464 14.4106 13.9114 14.2157L13.8536 14.1464L9.70711 10L13.8536 5.85355C14.0488 5.65829 14.0488 5.34171 13.8536 5.14645Z",
-    fill: "currentColor"
-  }
-));
-const nextIcon = /* @__PURE__ */ h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ h(
-  "path",
-  {
-    d: "M13.5 5C13.7455 5 13.9496 5.17688 13.9919 5.41012L14 5.5V14.5C14 14.7761 13.7761 15 13.5 15C13.2545 15 13.0504 14.8231 13.0081 14.5899L13 14.5V5.5C13 5.22386 13.2239 5 13.5 5ZM5.64645 5.14645C5.82001 4.97288 6.08944 4.9536 6.28431 5.08859L6.35355 5.14645L10.8536 9.64645C11.0271 9.82001 11.0464 10.0894 10.9114 10.2843L10.8536 10.3536L6.35355 14.8536C6.15829 15.0488 5.84171 15.0488 5.64645 14.8536C5.47288 14.68 5.4536 14.4106 5.58859 14.2157L5.64645 14.1464L9.79289 10L5.64645 5.85355C5.45118 5.65829 5.45118 5.34171 5.64645 5.14645Z",
-    fill: "currentColor"
-  }
-));
 const closeIcon = /* @__PURE__ */ h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ h(
   "path",
   {
@@ -50591,22 +50854,6 @@ const closeIcon = /* @__PURE__ */ h("svg", { viewBox: "0 0 20 20", fill: "none",
     fill: "currentColor"
   }
 ));
-const downloadIcon = /* @__PURE__ */ h(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "32",
-    height: "32",
-    viewBox: "0 0 1024 1024"
-  },
-  /* @__PURE__ */ h(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-    }
-  )
-);
 
 const imagePreviewSharedProps = {
   ...useTheme.props,
@@ -51056,7 +51303,8 @@ var _UImagePreview = defineComponent({
           toolbarIconColor,
           toolbarBorderRadius,
           toolbarBoxShadow,
-          toolbarColor
+          toolbarColor,
+          overlayColor
         }
       } = themeRef.value;
       return {
@@ -51064,7 +51312,8 @@ var _UImagePreview = defineComponent({
         "--u-toolbar-icon-color": toolbarIconColor,
         "--u-toolbar-color": toolbarColor,
         "--u-toolbar-border-radius": toolbarBorderRadius,
-        "--u-toolbar-box-shadow": toolbarBoxShadow
+        "--u-toolbar-box-shadow": toolbarBoxShadow,
+        "--u-overlay-color": overlayColor
       };
     });
     const { inlineThemeDisabled } = useConfig();
@@ -51113,14 +51362,6 @@ var _UImagePreview = defineComponent({
   },
   render() {
     const { clsPrefix, renderToolbar, withTooltip } = this;
-    const prevNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchPrev }, { default: () => prevIcon }),
-      "tipPrevious"
-    );
-    const nextNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.handleSwitchNext }, { default: () => nextIcon }),
-      "tipNext"
-    );
     const rotateCounterclockwiseNode = withTooltip(
       /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.rotateCounterclockwise }, {
         default: () => /* @__PURE__ */ h(RotateCounterclockwiseIcon, null)
@@ -51133,22 +51374,10 @@ var _UImagePreview = defineComponent({
       }),
       "tipClockwise"
     );
-    const originalSizeNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.resizeToOrignalImageSize }, {
-        default: () => {
-          return /* @__PURE__ */ h(ResizeSmallIcon, null);
-        }
-      }),
-      "tipOriginalSize"
-    );
     const zoomOutNode = withTooltip(
       /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.zoomOut }, { default: () => /* @__PURE__ */ h(ZoomOutIcon, null) }),
       "tipZoomOut"
     );
-    const downloadNode = withTooltip(
-      /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: this.handleDownloadClick }, { default: () => downloadIcon }),
-      "tipDownload"
-    );
     const closeNode = withTooltip(
       /* @__PURE__ */ h(UBaseIcon, { clsPrefix, onClick: () => this.close() }, { default: () => closeIcon }),
       "tipClose"
@@ -51190,17 +51419,13 @@ var _UImagePreview = defineComponent({
                   return null;
                 return /* @__PURE__ */ h("div", { class: `${clsPrefix}-image-preview-toolbar` }, renderToolbar ? renderToolbar({
                   nodes: {
-                    prev: prevNode,
-                    next: nextNode,
                     rotateCounterclockwise: rotateCounterclockwiseNode,
                     rotateClockwise: rotateClockwiseNode,
-                    resizeToOriginalSize: originalSizeNode,
                     zoomOut: zoomOutNode,
                     zoomIn: zoomInNode,
-                    download: downloadNode,
                     close: closeNode
                   }
-                }) : /* @__PURE__ */ h(Fragment, null, this.onPrev ? /* @__PURE__ */ h(Fragment, null, prevNode, nextNode) : null, rotateCounterclockwiseNode, rotateClockwiseNode, originalSizeNode, zoomOutNode, zoomInNode, downloadNode, closeNode));
+                }) : /* @__PURE__ */ h(Fragment, null, rotateCounterclockwiseNode, rotateClockwiseNode, zoomOutNode, zoomInNode, closeNode));
               }
             }) : null,
             /* @__PURE__ */ h(
@@ -51855,7 +52080,7 @@ var _USpin = defineComponent({
   }
 });
 
-function useUploadActionsRender(opts) {
+function useUploadActionsRender(options) {
   const {
     clsPrefix,
     listType,
@@ -51875,7 +52100,7 @@ function useUploadActionsRender(opts) {
     handleRetryClick,
     handleDownloadClick,
     capitalizeFirstLetter
-  } = opts;
+  } = options;
   const getExt = (name) => {
     const i = name.lastIndexOf(".");
     return i === -1 || i === name.length - 1 ? "" : name.slice(i + 1);
@@ -52002,159 +52227,6 @@ function useUploadActionsRender(opts) {
   return { icon, actionsNode };
 }
 
-function isImageFileType(type) {
-  return type.includes("image/");
-}
-function getExtname(url = "") {
-  const temp = url.split("/");
-  const filename = temp[temp.length - 1];
-  const filenameWithoutSuffix = filename.split(/#|\?/)[0];
-  return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
-}
-const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
-function capitalizeFirstLetter(str) {
-  if (!str) return str;
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-const isImageFile = file => {
-  if (file.type) {
-    return isImageFileType(file.type);
-  }
-  const fileNameExtension = getExtname(file.name || "");
-  if (imageExtensionRegex.test(fileNameExtension)) {
-    return true;
-  }
-  const url = file.thumbnailUrl || file.url || "";
-  const urlExtension = getExtname(url);
-  if (/^data:image\//.test(url) || imageExtensionRegex.test(urlExtension)) {
-    return true;
-  }
-  return false;
-};
-async function createImageDataUrl(file) {
-  return await new Promise(resolve => {
-    if (!file.type || !isImageFileType(file.type)) {
-      resolve("");
-      return;
-    }
-    resolve(window.URL.createObjectURL(file));
-  });
-}
-const environmentSupportFile = isBrowser$1 && window.FileReader && window.File;
-function isFileSystemDirectoryEntry(item) {
-  return item.isDirectory;
-}
-function isFileSystemFileEntry(item) {
-  return item.isFile;
-}
-async function getFilesFromEntries(entries, directory) {
-  const fileAndEntries = [];
-  let _resolve;
-  let requestCallbackCount = 0;
-  function lock() {
-    requestCallbackCount++;
-  }
-  function unlock() {
-    requestCallbackCount--;
-    if (!requestCallbackCount) {
-      _resolve(fileAndEntries);
-    }
-  }
-  function _getFilesFromEntries(entries2) {
-    entries2.forEach(entry => {
-      if (!entry) return;
-      lock();
-      if (directory && isFileSystemDirectoryEntry(entry)) {
-        const directoryReader = entry.createReader();
-        lock();
-        directoryReader.readEntries(entries3 => {
-          _getFilesFromEntries(entries3);
-          unlock();
-        }, () => {
-          unlock();
-        });
-      } else if (isFileSystemFileEntry(entry)) {
-        lock();
-        entry.file(file => {
-          fileAndEntries.push({
-            file,
-            entry,
-            source: "dnd"
-          });
-          unlock();
-        }, () => {
-          unlock();
-        });
-      }
-      unlock();
-    });
-  }
-  await new Promise(resolve => {
-    _resolve = resolve;
-    _getFilesFromEntries(entries);
-  });
-  return fileAndEntries;
-}
-function createSettledFileInfo(fileInfo) {
-  const {
-    id,
-    name,
-    percentage,
-    status,
-    url,
-    file,
-    thumbnailUrl,
-    type,
-    fullPath,
-    batchId
-  } = fileInfo;
-  return {
-    id,
-    name,
-    percentage: percentage ?? null,
-    status,
-    url: url ?? null,
-    file: file ?? null,
-    thumbnailUrl: thumbnailUrl ?? null,
-    type: type ?? null,
-    fullPath: fullPath ?? null,
-    batchId: batchId ?? null
-  };
-}
-function matchType(name, mimeType, accept) {
-  name = name.toLowerCase();
-  mimeType = mimeType.toLocaleLowerCase();
-  accept = accept.toLocaleLowerCase();
-  const acceptAtoms = accept.split(",").map(acceptAtom => acceptAtom.trim()).filter(Boolean);
-  return acceptAtoms.some(acceptAtom => {
-    if (acceptAtom.startsWith(".")) {
-      if (name.endsWith(acceptAtom)) return true;
-    } else if (acceptAtom.includes("/")) {
-      const [type, subtype] = mimeType.split("/");
-      const [acceptType, acceptSubtype] = acceptAtom.split("/");
-      if (acceptType === "*" || type && acceptType && acceptType === type) {
-        if (acceptSubtype === "*" || subtype && acceptSubtype && acceptSubtype === subtype) {
-          return true;
-        }
-      }
-    } else {
-      return true;
-    }
-    return false;
-  });
-}
-function download(url, name) {
-  if (!url) return;
-  const a = document.createElement("a");
-  a.href = url;
-  if (name !== void 0) {
-    a.download = name;
-  }
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-}
-
 const buttonThemeOverrides = {
   paddingMedium: "0 3px",
   heightMedium: "24px",
@@ -52232,7 +52304,12 @@ var UUploadFile = defineComponent({
         file: { status },
         listType
       } = props;
-      return ["finished"].includes(status) && mergedThumbnailUrlRef.value && listType === "image-card";
+      if (!["finished"].includes(status))
+        return false;
+      if (listType === "preview-list") {
+        return UUpload.isFilePreviewable(props.file);
+      }
+      return !!mergedThumbnailUrlRef.value && listType === "image-card";
     });
     async function handleRetryClick() {
       const onRetry = UUpload.onRetryRef.value;
@@ -52311,6 +52388,8 @@ var UUploadFile = defineComponent({
       } = UUpload;
       if (onPreview) {
         onPreview(props.file);
+      } else if (props.listType === "preview-list") {
+        UUpload.openFilePreview(props.file);
       } else if (props.listType === "image-card") {
         const { value } = imageRef;
         if (!value)
@@ -52397,7 +52476,8 @@ var UUploadFile = defineComponent({
               `${clsPrefix}-upload-file`,
               `${clsPrefix}-upload-file--${this.progressStatus}-status`,
               file.url && file.status !== "error" && imageCardTypes.includes(listType) && `${clsPrefix}-upload-file--with-url`,
-              `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`
+              `${clsPrefix}-upload-file--${listType === "image" || listType === "image-card" ? "image-card" : "text"}-type`,
+              listType === "preview-list" && `${clsPrefix}-upload-file--preview-list-type`
             ]
           },
           /* @__PURE__ */ h(
@@ -52565,11 +52645,17 @@ var _UUploadFileList = defineComponent({
       themeClassRef,
       maxReachedRef,
       showTriggerRef,
-      imageGroupPropsRef
+      imageGroupPropsRef,
+      previewSrcListRef,
+      previewShowRef,
+      previewCurrentRef
     } = UUpload;
     const isImageCardTypeRef = computed(
       () => listTypeRef.value === "image-card" || listTypeRef.value === "image"
     );
+    const isPreviewListTypeRef = computed(
+      () => listTypeRef.value === "preview-list"
+    );
     const renderFileList = () => mergedFileListRef.value.map((file) => /* @__PURE__ */ h(
       UUploadFile,
       {
@@ -52583,6 +52669,21 @@ var _UUploadFileList = defineComponent({
     const renderUploadFileList = () => isImageCardTypeRef.value ? /* @__PURE__ */ h(_UImageGroup, { ...imageGroupPropsRef.value }, { default: renderFileList }) : /* @__PURE__ */ h(FadeInExpandTransition, { group: true }, {
       default: renderFileList
     });
+    const renderPreview = () => /* @__PURE__ */ h(
+      _UImageGroup,
+      {
+        ...imageGroupPropsRef.value,
+        srcList: previewSrcListRef.value,
+        show: previewShowRef.value,
+        current: previewCurrentRef.value,
+        onUpdateShow: (show) => {
+          previewShowRef.value = show;
+        },
+        onUpdateCurrent: (current) => {
+          previewCurrentRef.value = current;
+        }
+      }
+    );
     return () => {
       const { value: mergedClsPrefix } = mergedClsPrefixRef;
       const { value: abstract } = abstractRef;
@@ -52601,6 +52702,7 @@ var _UUploadFileList = defineComponent({
           ]
         },
         renderUploadFileList(),
+        isPreviewListTypeRef.value && renderPreview(),
         showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && /* @__PURE__ */ h(_UUploadTrigger, null, slots)
       );
     };
@@ -52866,119 +52968,6 @@ function useUploadInternals(options) {
   };
 }
 
-const uploadProps = {
-  ...useTheme.props,
-  name: {
-    type: String,
-    default: "file"
-  },
-  accept: String,
-  action: String,
-  customRequest: Function,
-  directory: Boolean,
-  directoryDnd: { type: Boolean, default: void 0 },
-  method: {
-    type: String,
-    default: "POST"
-  },
-  multiple: Boolean,
-  showFileList: {
-    type: Boolean,
-    default: true
-  },
-  data: [Object, Function],
-  headers: [Object, Function],
-  withCredentials: Boolean,
-  responseType: {
-    type: String,
-    default: ""
-  },
-  disabled: {
-    type: Boolean,
-    default: void 0
-  },
-  vertical: {
-    type: Boolean,
-    default: false
-  },
-  icon: Object,
-  onChange: Function,
-  onRemove: Function,
-  onFinish: Function,
-  onError: Function,
-  onRetry: Function,
-  onBeforeUpload: Function,
-  isErrorState: Function,
-  /** currently not used */
-  onDownload: Function,
-  defaultUpload: {
-    type: Boolean,
-    default: true
-  },
-  fileList: Array,
-  "onUpdate:fileList": [Function, Array],
-  onUpdateFileList: [Function, Array],
-  fileListClass: String,
-  fileListStyle: [String, Object],
-  defaultFileList: {
-    type: Array,
-    default: () => []
-  },
-  showCancelButton: {
-    type: Boolean,
-    default: true
-  },
-  showRemoveButton: {
-    type: Boolean,
-    default: true
-  },
-  showDownloadButton: Boolean,
-  showRetryButton: {
-    type: Boolean,
-    default: true
-  },
-  customDownload: Function,
-  showPreviewButton: {
-    type: Boolean,
-    default: true
-  },
-  listType: {
-    type: String,
-    default: "text"
-  },
-  onPreview: Function,
-  shouldUseThumbnailUrl: {
-    type: Function,
-    default: (file) => {
-      if (!environmentSupportFile)
-        return false;
-      return isImageFile(file);
-    }
-  },
-  createThumbnailUrl: Function,
-  abstract: Boolean,
-  max: Number,
-  showTrigger: {
-    type: Boolean,
-    default: true
-  },
-  imageGroupProps: Object,
-  inputProps: Object,
-  triggerClass: String,
-  triggerStyle: [String, Object],
-  renderIcon: Function,
-  label: String,
-  size: {
-    type: String,
-    default: "medium"
-  },
-  title: String,
-  subtitle: String,
-  noIcon: {
-    type: Boolean,
-    default: false
-  }
-};
 var _UUpload = defineComponent({
   name: "Upload",
   props: uploadProps,
@@ -53028,15 +53017,15 @@ var _UUpload = defineComponent({
     function openFileDialog() {
       inputElRef.value?.click();
     }
-    function handleFileInputChange(e) {
-      const target = e.target;
+    function handleFileInputChange(event) {
+      const target = event.target;
       handleFileAddition(
         target.files ? Array.from(target.files).map((file) => ({
           file,
           entry: null,
           source: "input"
         })) : null,
-        e
+        event
       );
       target.value = "";
     }
@@ -53056,12 +53045,12 @@ var _UUpload = defineComponent({
       uploadKeyIndexRef.value += 1;
       return key;
     }
-    function handleFileAddition(fileAndEntries, e) {
+    function handleFileAddition(fileAndEntries, event) {
       if (!fileAndEntries || fileAndEntries.length === 0)
         return;
       const { onBeforeUpload } = props;
       fileAndEntries = mergedMultipleRef.value ? fileAndEntries : [fileAndEntries[0]];
-      const { max, accept } = props;
+      const { max, accept, maxSize } = props;
       fileAndEntries = fileAndEntries.filter(({ file, source }) => {
         if (source === "dnd" && accept?.trim()) {
           return matchType(file.name, file.type, accept);
@@ -53090,6 +53079,10 @@ var _UUpload = defineComponent({
             thumbnailUrl: null,
             fullPath: entry?.fullPath ?? `/${file.webkitRelativePath || file.name}`
           };
+          if (isFileSizeExceeded(file, maxSize)) {
+            fileInfo.status = "error";
+            return fileInfo;
+          }
           if (!onBeforeUpload || await onBeforeUpload({
             file: fileInfo,
             fileList: mergedFileListRef.value
@@ -53102,7 +53095,7 @@ var _UUpload = defineComponent({
         let nextTickChain = Promise.resolve();
         fileInfos.forEach((fileInfo) => {
           nextTickChain = nextTickChain.then(nextTick).then(() => {
-            fileInfo && doChange(fileInfo, e, {
+            fileInfo && doChange(fileInfo, event, {
               append: true
             });
           });
@@ -53129,6 +53122,15 @@ var _UUpload = defineComponent({
       filesToUpload.forEach((file) => {
         const { status } = file;
         if (status === "pending" || status === "error" && shouldReupload) {
+          if (isFileSizeExceeded(file.file, props.maxSize)) {
+            if (status === "pending") {
+              const fileAfterChange = Object.assign({}, file, {
+                status: "error"
+              });
+              doChange(fileAfterChange);
+            }
+            return;
+          }
           if (props.customRequest) {
             customSubmitImpl({
               inst: {
@@ -53209,6 +53211,26 @@ var _UUpload = defineComponent({
       }
       return "";
     }
+    function isFilePreviewable(file) {
+      return props.shouldUseThumbnailUrl(file) && getFilePreviewSrc(file) !== null;
+    }
+    const previewFileListRef = computed(
+      () => mergedFileListRef.value.filter(isFilePreviewable)
+    );
+    const previewSrcListRef = computed(
+      () => previewFileListRef.value.map((file) => getFilePreviewSrc(file))
+    );
+    const previewShowRef = ref(false);
+    const previewCurrentRef = ref(0);
+    function openFilePreview(file) {
+      const index = previewFileListRef.value.findIndex(
+        ({ id }) => id === file.id
+      );
+      if (index < 0)
+        return;
+      previewCurrentRef.value = index;
+      previewShowRef.value = true;
+    }
     const cssVarsRef = computed(() => {
       const { value: size } = formItem.mergedSizeRef;
       const {
@@ -53328,7 +53350,12 @@ var _UUpload = defineComponent({
       imageGroupPropsRef: toRef(props, "imageGroupProps"),
       mergedDirectoryDndRef: computed(() => {
         return props.directoryDnd ?? props.directory;
-      })
+      }),
+      previewSrcListRef,
+      previewShowRef,
+      previewCurrentRef,
+      isFilePreviewable,
+      openFilePreview
     });
     const exposedMethods = {
       clear: () => {
@@ -54645,6 +54672,8 @@ var style$16 = cB("message-bubble", `
     width: fit-content;
     display: flex;
     flex-direction: column;
+    padding: 12px;
+    gap: 12px;
   `, [cM("own", `
       background-color: var(--u-message-bubble-background-color-own);
       color: var(--u-message-bubble-text-color-own);
@@ -54652,16 +54681,12 @@ var style$16 = cB("message-bubble", `
       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", `
+  `), cE("after-content", `
+    white-space: normal;
+  `), cE("meta", `
     display: flex;
     align-items: center;
     gap: 4px;
@@ -54833,6 +54858,12 @@ var _UMessageBubble = defineComponent({
       );
       return url ?? null;
     };
+    const getAttachmentUrl = (attachment) => {
+      if (!attachment.url || attachment.url === "#")
+        return null;
+      return attachment.url;
+    };
+    const isAttachmentPreviewable = (file) => Boolean(file.thumbnailUrl);
     const handleAttachmentDownload = async (file) => {
       if (props.onAttachmentDownload) {
         const attachment = normalizedAttachmentsRef.value.find(
@@ -54873,7 +54904,7 @@ var _UMessageBubble = defineComponent({
           name: attachment.name,
           status: attachment.status || MessageBubbleAttachmentStatus.FINISHED,
           percentage: attachment.percentage ?? null,
-          url: attachment.url ?? null,
+          url: getAttachmentUrl(attachment),
           thumbnailUrl: getThumbnailUrl(attachment),
           type: attachment.type ?? null,
           file: null,
@@ -54884,6 +54915,8 @@ var _UMessageBubble = defineComponent({
         _UUpload,
         {
           abstract: true,
+          listType: "preview-list",
+          shouldUseThumbnailUrl: isAttachmentPreviewable,
           fileList,
           fileListStyle: withPadding ? {
             display: "flex",
@@ -54924,8 +54957,10 @@ var _UMessageBubble = defineComponent({
         props.actions && props.actions.length > 0
       );
       const hasTitle = Boolean(props.title || slots.title);
+      const afterContentSlot = slots.afterContent || slots["after-content"];
+      const hasAfterContent = Boolean(afterContentSlot);
       const hasContentInsideBubble = Boolean(
-        props.content || slots.default || hasTitle || normalizedAttachmentsRef.value.length > 1
+        props.content || slots.default || hasAfterContent || hasTitle || normalizedAttachmentsRef.value.length > 1
       );
       const messageBubbleContent = hasContentInsideBubble ? /* @__PURE__ */ h(
         "div",
@@ -54944,7 +54979,14 @@ var _UMessageBubble = defineComponent({
           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))
+        (props.content || slots.default) && /* @__PURE__ */ h("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content)),
+        hasAfterContent && /* @__PURE__ */ h(
+          "div",
+          {
+            class: `${mergedClsPrefixRef.value}-message-bubble__after-content`
+          },
+          afterContentSlot?.(messagePayloadRef.value)
+        )
       ) : normalizedAttachmentsRef.value.length === 1 ? renderAttachment() : null;
       return /* @__PURE__ */ h(
         "div",
@@ -55586,6 +55628,21 @@ var _UChatMessages = defineComponent({
     const { mergedClsPrefixRef } = useConfig(props);
     const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
     const { localeRef } = useLocale("Chat");
+    const messageBubbleThemeOverridesRef = computed(() => {
+      const { self, peerOverrides } = themeRef.value;
+      return {
+        messageBubbleBackgroundColorOwn: self.messageBubbleBackgroundColorOwn,
+        messageBubbleBackgroundColorOther: self.messageBubbleBackgroundColorOther,
+        messageBubbleTextColorOwn: self.messageBubbleTextColorOwn,
+        messageBubbleTextColorOther: self.messageBubbleTextColorOther,
+        messageTimeColor: self.messageTimeColor,
+        attachmentBackgroundColorOwn: self.attachmentBackgroundColorOwn,
+        attachmentBackgroundColorOther: self.attachmentBackgroundColorOther,
+        unreadNotificationBackgroundColor: self.unreadNotificationBackgroundColor,
+        unreadNotificationTextColor: self.unreadNotificationTextColor,
+        ...peerOverrides.MessageBubble
+      };
+    });
     const cssVarsRef = computed(() => {
       const {
         common: {
@@ -55701,7 +55758,9 @@ var _UChatMessages = defineComponent({
         {
           type: MessageBubbleType.SERVICE,
           serviceVariant: MessageBubbleServiceVariant.UNREAD,
-          content: `${count} ${mergedUnreadNotificationTextRef.value}`
+          content: `${count} ${mergedUnreadNotificationTextRef.value}`,
+          theme: themeRef.value.peers.MessageBubble,
+          themeOverrides: messageBubbleThemeOverridesRef.value
         }
       );
     };
@@ -55713,7 +55772,9 @@ var _UChatMessages = defineComponent({
           key: String(message.id),
           type: MessageBubbleType.SERVICE,
           serviceVariant,
-          content: message.content
+          content: message.content,
+          theme: themeRef.value.peers.MessageBubble,
+          themeOverrides: messageBubbleThemeOverridesRef.value
         }
       );
     };
@@ -55756,12 +55817,15 @@ var _UChatMessages = defineComponent({
           retryText: mergedRetryTextRef.value,
           actions: getMessageBubbleActions(message),
           onRetry: handleMessageBubbleRetry,
-          onAttachmentDownload: handleMessageBubbleAttachmentDownload
+          onAttachmentDownload: handleMessageBubbleAttachmentDownload,
+          theme: themeRef.value.peers.MessageBubble,
+          themeOverrides: messageBubbleThemeOverridesRef.value
         },
         {
           bubbleActions: slots.bubbleActions ? () => slots.bubbleActions?.(message) : void 0,
           messageStatus: slots.messageStatus ? () => slots.messageStatus?.(message) : void 0,
           messageAttachment: slots.messageAttachment ? () => slots.messageAttachment?.(message) : void 0,
+          afterContent: slots.messageAfterContent ? () => slots.messageAfterContent?.(message) : void 0,
           "upload-file-title": slots.messageAttachmentTitle,
           "upload-file-subtitle": slots.messageAttachmentSubtitle
         }
@@ -56568,6 +56632,7 @@ var _UChatMainArea = defineComponent({
           messageAttachmentTitle: slots.messageAttachmentTitle,
           messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
           messageStatus: slots.messageStatus,
+          messageAfterContent: slots.messageAfterContent,
           bubbleActions: slots.bubbleActions
         }
       );
@@ -117061,7 +117126,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.3.0";
+var version = "2.3.2";
 
 function create({
   componentPrefix = "U",