@uzum-tech/ui 1.2.4 → 1.3.0

package/dist/index.js

@@ -35433,8 +35433,11 @@
       staticRed: "#F24835",
       staticOrange: "#F48C2C",
       staticGreen: "#09B849",
+      staticDeepBlue: "#2F53CD",
       staticErrorAccent: "#CB0000",
-      shadowDepth2: "0 0 0 1px #424247"
+      shadowDepth2: "0 0 0 1px #424247",
+      // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+      shadowDepth: "0px 8px 8px 0px rgba(255, 255, 255, 0.25)"
       // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
     };
 
@@ -35497,8 +35500,10 @@
       staticRed: "#F24835",
       staticOrange: "#F48C2C",
       staticGreen: "#09B849",
+      staticDeepBlue: "#2F53CD",
       staticErrorAccent: "#CB0000",
-      shadowDepth2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
+      shadowDepth2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)",
+      shadowDepth: "0px 8px 8px 0px rgba(0, 0, 0, 0.25)"
     };
 
     const self$1j = vars => {
@@ -37362,6 +37367,188 @@
       self: self$1g
     };
 
+    var style$1x = cB("base-account-option", `
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--u-height);
+`, [cE("icon", `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--u-icon-width);
+    height: var(--u-icon-height);
+    margin: var(--u-icon-margin);
+    font-size: var(--u-icon-size);
+  `), cE("wrap", `
+    width: 10px;
+    flex-grow: 1;
+  `), cE("label", `
+    margin: var(--u-label-margin);
+    color: var(--u-label-color);
+    font-size: var(--u-label-font-size);
+    font-weight: var(--u-label-font-weight);
+    line-height: var(--u-label-line-height);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `), cE("value", `
+    font-size: var(--u-value-font-size);
+    font-weight: var(--u-value-font-weight);
+    line-height: var(--u-value-line-height);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `), cM("avatar", [cE("icon", `
+      width: var(--u-avatar-width);
+      height: var(--u-avatar-height);
+      border-radius: var(--u-avatar-radius);
+      background: var(--u-avatar-color);
+      color: var(--u-avatar-icon-color);
+      font-size: var(--u-avatar-size);
+    `)])]);
+
+    var commonVars$7 = {
+      iconWidth: "44px",
+      iconHeight: "44px",
+      iconMargin: "0 16px 0 0",
+      iconSize: "44px",
+      labelMargin: "0 0 4px 0",
+      avatarWidth: "44px",
+      avatarHeight: "28px",
+      avatarRadius: "4px",
+      avatarSize: "16px"
+    };
+
+    const self$1f = vars => {
+      const {
+        heightHuge,
+        fontBodyLarge,
+        fontTitleMedium,
+        lineHeightBodyLarge,
+        lineHeightTitleMedium,
+        fontWeight,
+        fontWeightStrong,
+        textSecondary,
+        elementsPrimary,
+        elementsSecondary
+      } = vars;
+      return {
+        ...commonVars$7,
+        height: heightHuge,
+        labelColor: textSecondary,
+        labelFontSize: fontBodyLarge,
+        labelFontWeight: fontWeight,
+        labelLineHeight: lineHeightBodyLarge,
+        valueFontSize: fontTitleMedium,
+        valueFontWeight: fontWeightStrong,
+        valueLineHeight: lineHeightTitleMedium,
+        avatarColor: elementsPrimary,
+        avatarIconColor: elementsSecondary
+      };
+    };
+    const accountOptionLight = {
+      name: "AccountOption",
+      common: derived,
+      self: self$1f
+    };
+
+    const accountOptionDark = {
+      name: "AccountOption",
+      common: derived$1,
+      self: self$1f
+    };
+
+    var UBaseAccountOption = vue.defineComponent({
+      name: "BaseClear",
+      inheritAttrs: false,
+      props: {
+        ...useTheme.props,
+        icon: Function,
+        avatar: Function,
+        label: [String, Object],
+        value: [String, Number]
+      },
+      setup(props) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme(
+          "AccountOption",
+          "-base-account-option",
+          style$1x,
+          accountOptionLight,
+          props,
+          mergedClsPrefixRef
+        );
+        const cssVarsRef = vue.computed(() => {
+          const {
+            self: {
+              height,
+              iconWidth,
+              iconHeight,
+              iconMargin,
+              iconSize,
+              labelMargin,
+              labelColor,
+              labelFontSize,
+              labelFontWeight,
+              labelLineHeight,
+              valueFontSize,
+              valueFontWeight,
+              valueLineHeight,
+              avatarWidth,
+              avatarHeight,
+              avatarRadius,
+              avatarColor,
+              avatarIconColor,
+              avatarSize
+            }
+          } = themeRef.value;
+          return {
+            "--u-height": height,
+            "--u-icon-width": iconWidth,
+            "--u-icon-height": iconHeight,
+            "--u-icon-margin": iconMargin,
+            "--u-icon-size": iconSize,
+            "--u-label-margin": labelMargin,
+            "--u-label-color": labelColor,
+            "--u-label-font-size": labelFontSize,
+            "--u-label-font-weight": labelFontWeight,
+            "--u-label-line-height": labelLineHeight,
+            "--u-value-font-size": valueFontSize,
+            "--u-value-font-weight": valueFontWeight,
+            "--u-value-line-height": valueLineHeight,
+            "--u-avatar-width": avatarWidth,
+            "--u-avatar-height": avatarHeight,
+            "--u-avatar-radius": avatarRadius,
+            "--u-avatar-color": avatarColor,
+            "--u-avatar-icon-color": avatarIconColor,
+            "--u-avatar-size": avatarSize
+          };
+        });
+        return {
+          mergedClsPrefix: mergedClsPrefixRef,
+          cssVars: cssVarsRef
+        };
+      },
+      render() {
+        const { mergedClsPrefix, cssVars } = this;
+        const icon = this.avatar || this.icon ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__icon` }, /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+          default: this.avatar || this.icon
+        })) : null;
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefix}-base-account-option`,
+              this.avatar && `${mergedClsPrefix}-base-account-option--avatar`
+            ],
+            style: cssVars
+          },
+          icon,
+          /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__wrap` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__label` }, this.label), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__value` }, this.value))
+        );
+      }
+    });
+
     function renderCheckMark(show, clsPrefix) {
       return /* @__PURE__ */ vue.h(vue.Transition, { name: "fade-in-scale-up-transition" }, {
         default: () => show ? /* @__PURE__ */ vue.h(
@@ -37595,7 +37782,7 @@
       })];
     }
 
-    var style$1x = cB("base-select-menu", `
+    var style$1w = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -37779,7 +37966,7 @@
         const themeRef = useTheme(
           "InternalSelectMenu",
           "-internal-select-menu",
-          style$1x,
+          style$1w,
           internalSelectMenuLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -38228,7 +38415,7 @@
       }
     });
 
-    var style$1w = cB("base-wave", `
+    var style$1v = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -38246,7 +38433,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-wave", style$1w, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-wave", style$1v, vue.toRef(props, "clsPrefix"));
         const selfRef = vue.ref(null);
         const activeRef = vue.ref(false);
         let animationTimerId = null;
@@ -38291,7 +38478,7 @@
       }
     });
 
-    var style$1v = cB("base-menu-mask", `
+    var style$1u = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -38314,7 +38501,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-menu-mask", style$1v, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-menu-mask", style$1u, vue.toRef(props, "clsPrefix"));
         const messageRef = vue.ref(null);
         let timerId = null;
         const uncontrolledShowRef = vue.ref(false);
@@ -38348,7 +38535,7 @@
       }
     });
 
-    const self$1f = vars => {
+    const self$1e = vars => {
       const {
         fontBodyMedium,
         containerPrimary,
@@ -38375,13 +38562,13 @@
     const popoverLight = {
       name: "Popover",
       common: derived,
-      self: self$1f
+      self: self$1e
     };
 
     const popoverDark = {
       name: "Popover",
       common: derived$1,
-      self: self$1f
+      self: self$1e
     };
 
     const oppositePlacement = {
@@ -38391,7 +38578,7 @@
       right: "left"
     };
     const arrowSize = "var(--u-arrow-height) * 1.414";
-    var style$1u = c$1([cB("popover", `
+    var style$1t = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -38582,7 +38769,7 @@
         const themeRef = useTheme(
           "Popover",
           "-popover",
-          style$1u,
+          style$1t,
           popoverLight,
           props,
           mergedClsPrefixRef
@@ -39387,7 +39574,7 @@
       }
     });
 
-    const self$1e = vars => {
+    const self$1d = vars => {
       const {
         opacityDisabled,
         borderRadiusSmall: borderRadius,
@@ -39561,13 +39748,13 @@
     const tagLight = {
       name: "Tag",
       common: derived,
-      self: self$1e
+      self: self$1d
     };
 
     const tagDark = {
       name: "Tag",
       common: derived$1,
-      self: self$1e
+      self: self$1d
     };
 
     var rtlStyle$q = cB("tag", [cM("rtl", `
@@ -39614,7 +39801,7 @@
       }
     };
 
-    var style$1t = cB("tag", `
+    var style$1s = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -39682,15 +39869,11 @@
     box-shadow: none;
     color: var(--u-text-color-checkable);
     background-color: var(--u-color-checkable);
-    border: var(--u-border); 
-    border-color: var(--u-color);
     transition: border-color .3s var(--u-bezier);
   `, [cNotM("disabled", [c$1("&:hover", "background-color: var(--u-color-hover-checkable);", [cNotM("checked", "color: var(--u-text-color-hover-checkable);")]), c$1("&:focus", `
-      background-color: var(--u-color-pressed-checkable); 
-      border: var(--u-border); 
+      background-color: var(--u-color-pressed-checkable);  
       transition: border-color .3s var(--u-bezier);`, [cNotM("checked", "color: var(--u-text-color-pressed-checkable);")]), c$1("&:active", `
       background-color: var(--u-color-pressed-checkable); 
-      border: var(--u-border); 
       transition: border-color .3s var(--u-bezier);`, [cNotM("checked", "color: var(--u-text-color-pressed-checkable);")])]), cM("checked", `
       color: var(--u-text-color-checked);
       background-color: var(--u-color-checked);
@@ -39749,7 +39932,7 @@
         const themeRef = useTheme(
           "Tag",
           "-tag",
-          style$1t,
+          style$1s,
           tagLight,
           props,
           mergedClsPrefixRef
@@ -39958,7 +40141,7 @@
               absolute: true
             }
           ) : null,
-          !this.checkable && this.mergedBordered ? /* @__PURE__ */ vue.h(
+          this.mergedBordered ? /* @__PURE__ */ vue.h(
             "div",
             {
               class: `${mergedClsPrefix}-tag__border`,
@@ -39969,7 +40152,7 @@
       }
     });
 
-    var style$1s = cB("base-clear", `
+    var style$1r = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -40010,7 +40193,7 @@
         onClear: Function
       },
       setup(props) {
-        useStyle("-base-clear", style$1s, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-clear", style$1r, vue.toRef(props, "clsPrefix"));
         return {
           handleMouseDown(e) {
             e.preventDefault();
@@ -40104,7 +40287,7 @@
       }
     });
 
-    const self$1d = vars => {
+    const self$1c = vars => {
       const {
         borderRadius,
         iconMedium,
@@ -40265,7 +40448,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$1d
+      self: self$1c
     });
 
     const internalSelectionDark = {
@@ -40274,7 +40457,7 @@
       peers: {
         Popover: popoverDark
       },
-      self: self$1d
+      self: self$1c
     };
 
     function generateSecondaryStates(state) {
@@ -40298,7 +40481,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
     }
-    var style$1r = c$1([cB("base-selection", `
+    var style$1q = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -40647,7 +40830,7 @@
         const themeRef = useTheme(
           "InternalSelection",
           "-internal-selection",
-          style$1r,
+          style$1q,
           internalSelectionLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -41728,7 +41911,7 @@
       })];
     }
 
-    var style$1q = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+    var style$1p = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -41847,7 +42030,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-slot-machine", style$1q, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-slot-machine", style$1p, vue.toRef(props, "clsPrefix"));
         const oldValueRef = vue.ref();
         const newValueRef = vue.ref();
         const numbersRef = vue.computed(() => {
@@ -42205,188 +42388,6 @@
       };
     }
 
-    var style$1p = cB("base-account-option", `
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: var(--u-height);
-`, [cE("icon", `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: var(--u-icon-width);
-    height: var(--u-icon-height);
-    margin: var(--u-icon-margin);
-    font-size: var(--u-icon-size);
-  `), cE("wrap", `
-    width: 10px;
-    flex-grow: 1;
-  `), cE("label", `
-    margin: var(--u-label-margin);
-    color: var(--u-label-color);
-    font-size: var(--u-label-font-size);
-    font-weight: var(--u-label-font-weight);
-    line-height: var(--u-label-line-height);
-    text-overflow: ellipsis;
-    overflow: hidden;
-  `), cE("value", `
-    font-size: var(--u-value-font-size);
-    font-weight: var(--u-value-font-weight);
-    line-height: var(--u-value-line-height);
-    text-overflow: ellipsis;
-    overflow: hidden;
-  `), cM("avatar", [cE("icon", `
-      width: var(--u-avatar-width);
-      height: var(--u-avatar-height);
-      border-radius: var(--u-avatar-radius);
-      background: var(--u-avatar-color);
-      color: var(--u-avatar-icon-color);
-      font-size: var(--u-avatar-size);
-    `)])]);
-
-    var commonVars$7 = {
-      iconWidth: "44px",
-      iconHeight: "44px",
-      iconMargin: "0 16px 0 0",
-      iconSize: "44px",
-      labelMargin: "0 0 4px 0",
-      avatarWidth: "44px",
-      avatarHeight: "28px",
-      avatarRadius: "4px",
-      avatarSize: "16px"
-    };
-
-    const self$1c = vars => {
-      const {
-        heightHuge,
-        fontBodyLarge,
-        fontTitleMedium,
-        lineHeightBodyLarge,
-        lineHeightTitleMedium,
-        fontWeight,
-        fontWeightStrong,
-        textSecondary,
-        elementsPrimary,
-        elementsSecondary
-      } = vars;
-      return {
-        ...commonVars$7,
-        height: heightHuge,
-        labelColor: textSecondary,
-        labelFontSize: fontBodyLarge,
-        labelFontWeight: fontWeight,
-        labelLineHeight: lineHeightBodyLarge,
-        valueFontSize: fontTitleMedium,
-        valueFontWeight: fontWeightStrong,
-        valueLineHeight: lineHeightTitleMedium,
-        avatarColor: elementsPrimary,
-        avatarIconColor: elementsSecondary
-      };
-    };
-    const accountOptionLight = {
-      name: "AccountOption",
-      common: derived,
-      self: self$1c
-    };
-
-    const accountOptionDark = {
-      name: "AccountOption",
-      common: derived$1,
-      self: self$1c
-    };
-
-    var UBaseAccountOption = vue.defineComponent({
-      name: "BaseClear",
-      inheritAttrs: false,
-      props: {
-        ...useTheme.props,
-        icon: Function,
-        avatar: Function,
-        label: [String, Object],
-        value: [String, Number]
-      },
-      setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme(
-          "AccountOption",
-          "-base-account-option",
-          style$1p,
-          accountOptionLight,
-          props,
-          mergedClsPrefixRef
-        );
-        const cssVarsRef = vue.computed(() => {
-          const {
-            self: {
-              height,
-              iconWidth,
-              iconHeight,
-              iconMargin,
-              iconSize,
-              labelMargin,
-              labelColor,
-              labelFontSize,
-              labelFontWeight,
-              labelLineHeight,
-              valueFontSize,
-              valueFontWeight,
-              valueLineHeight,
-              avatarWidth,
-              avatarHeight,
-              avatarRadius,
-              avatarColor,
-              avatarIconColor,
-              avatarSize
-            }
-          } = themeRef.value;
-          return {
-            "--u-height": height,
-            "--u-icon-width": iconWidth,
-            "--u-icon-height": iconHeight,
-            "--u-icon-margin": iconMargin,
-            "--u-icon-size": iconSize,
-            "--u-label-margin": labelMargin,
-            "--u-label-color": labelColor,
-            "--u-label-font-size": labelFontSize,
-            "--u-label-font-weight": labelFontWeight,
-            "--u-label-line-height": labelLineHeight,
-            "--u-value-font-size": valueFontSize,
-            "--u-value-font-weight": valueFontWeight,
-            "--u-value-line-height": valueLineHeight,
-            "--u-avatar-width": avatarWidth,
-            "--u-avatar-height": avatarHeight,
-            "--u-avatar-radius": avatarRadius,
-            "--u-avatar-color": avatarColor,
-            "--u-avatar-icon-color": avatarIconColor,
-            "--u-avatar-size": avatarSize
-          };
-        });
-        return {
-          mergedClsPrefix: mergedClsPrefixRef,
-          cssVars: cssVarsRef
-        };
-      },
-      render() {
-        const { mergedClsPrefix, cssVars } = this;
-        const icon = this.avatar || this.icon ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__icon` }, /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
-          default: this.avatar || this.icon
-        })) : null;
-        return /* @__PURE__ */ vue.h(
-          "div",
-          {
-            class: [
-              `${mergedClsPrefix}-base-account-option`,
-              this.avatar && `${mergedClsPrefix}-base-account-option--avatar`
-            ],
-            style: cssVars
-          },
-          icon,
-          /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__wrap` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__label` }, this.label), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-base-account-option__value` }, this.value))
-        );
-      }
-    });
-
     var commonVars$6 = {
       iconMargin: "16px",
       closeMargin: "12px",
@@ -59619,7 +59620,7 @@
         fontWeightBold,
         elementsPrimary,
         brandPrimary500,
-        shadowDepth2,
+        shadowDepth,
         iconLarge
       } = vars;
       return {
@@ -59675,7 +59676,7 @@
         thColorPopover: containerPrimary,
         thColorHoverPopover: containerPrimary,
         tdColorPopover: containerPrimary,
-        fixedBoxShadow: shadowDepth2,
+        fixedBoxShadow: shadowDepth,
         // loading
         loadingColor: brandPrimary500,
         loadingSize: iconLarge,
@@ -77667,7 +77668,9 @@
       footerBorderTop: "1px solid transparent",
       closeBorderRadius: "10px",
       subtitleMarginTop: "16px",
-      actionsSpace: "16px"
+      actionsSpace: "16px",
+      contentMargin: "0px",
+      contentBorderRadius: "0px"
     };
 
     const self$E = vars => {
@@ -78117,6 +78120,8 @@
     color: var(--u-text-color);
     box-sizing: border-box;
     max-width: 100%;
+    margin: var(--u-drawer-margin);
+    border-radius: var(--u-drawer-border-radius);
   `, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM("unselectable", `
       user-select: none; 
       -webkit-user-select: none;
@@ -78536,7 +78541,9 @@
               subtitleFontSize,
               subtitleTextColor,
               actionsSpace,
-              maskColor
+              maskColor,
+              contentMargin,
+              contentBorderRadius
             }
           } = themeRef.value;
           return {
@@ -78570,7 +78577,9 @@
             "--u-subtitle-line-height": subtitleLineHeight,
             "--u-subtitle-font-size": subtitleFontSize,
             "--u-subtitle-text-color": subtitleTextColor,
-            "--u-actions-space": actionsSpace
+            "--u-actions-space": actionsSpace,
+            "--u-drawer-margin": contentMargin,
+            "--u-drawer-border-radius": contentBorderRadius
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass("drawer", void 0, cssVarsRef, props) : void 0;
@@ -84316,16 +84325,19 @@
         textSecondary,
         staticGreen,
         staticOrange,
-        staticRed
+        staticRed,
+        staticDeepBlue
       } = vars;
       return {
         fontSize: fontBodyMedium,
         lineHeight: lineHeightBodyMedium,
         fontWeight: fontWeightStrong,
         iconSize: iconSmall,
+        iconColor: "",
         iconSpacing: "8px",
         textColor: textSecondary,
         successColor: staticGreen,
+        infoColor: staticDeepBlue,
         warningColor: staticOrange,
         dangerColor: staticRed
       };
@@ -84354,7 +84366,8 @@
         elementsTertiary,
         brandPrimary300,
         textSecondary,
-        staticWhite
+        staticWhite,
+        staticGreen
       } = vars;
       return {
         stepHeaderFontSizeSmall: fontBodySmall,
@@ -84365,6 +84378,10 @@
         indicatorSizeMedium: "28px",
         indicatorIconSizeSmall: "14px",
         indicatorIconSizeMedium: "18px",
+        indicatorIconColorProcess: textPrimary,
+        indicatorIconColorWait: textSecondary,
+        indicatorIconColorFinish: staticGreen,
+        indicatorIconColorError: staticRed,
         stepHeaderFontWeight: fontWeightStrong,
         indicatorTextColorProcess: staticWhite,
         indicatorTextColorWait: textSecondary,
@@ -96172,16 +96189,20 @@
     });
 
     var style$j = cB("status", `
-  display: flex;
+  display: inline-flex;
   font-size: var(--u-font-size);
   line-height: var(--u-line-height);
   font-weight: var(--u-font-weight);
   color: var(--u-text-color);
+  padding: 2px 8px;
+  border-radius: 16px;
+  background-color: var(--u-background-color);
 `, [cE("icon", `
     display: flex;
     align-items: center;
     height: var(--u-line-height);
     font-size: var(--u-icon-size);
+    color: var(--u-icon-color);
     margin-right: var(--u-icon-spacing);
     flex-shrink: 0;
   `, [c$1("&:last-child", `
@@ -96191,6 +96212,8 @@
     const statusProps = {
       ...useTheme.props,
       color: String,
+      filled: Boolean,
+      noIcon: Boolean,
       type: {
         type: String,
         default: "default"
@@ -96209,21 +96232,17 @@
           props,
           mergedClsPrefixRef
         );
-        const mergedRenderIconRef = vue.computed(() => {
-          if (slots.icon) {
-            return slots.icon;
-          }
-          switch (props.type) {
-            case "success":
-              return () => /* @__PURE__ */ vue.h(SuccessIcon, null);
-            case "warning":
-              return () => /* @__PURE__ */ vue.h(WarningIcon, null);
-            case "error":
-              return () => /* @__PURE__ */ vue.h(ErrorIcon, null);
-            case "default":
-              return () => /* @__PURE__ */ vue.h(InactiveIcon, null);
-          }
-        });
+        const iconRenderer = {
+          success: () => /* @__PURE__ */ vue.h(SuccessIcon, null),
+          info: () => /* @__PURE__ */ vue.h(InfoIcon, null),
+          warning: () => /* @__PURE__ */ vue.h(WarningIcon, null),
+          error: () => /* @__PURE__ */ vue.h(ErrorIcon, null),
+          default: () => resolveWrappedSlot(slots.icon, (icon) => icon) || /* @__PURE__ */ vue.h(InactiveIcon, null)
+        };
+        const renderIcon = () => {
+          const renderer = iconRenderer[props.type] || iconRenderer.default;
+          return renderer();
+        };
         const cssVarsRef = vue.computed(() => {
           const {
             common: { cubicBezierEaseInOut },
@@ -96232,7 +96251,9 @@
               warningColor,
               dangerColor,
               successColor,
+              infoColor,
               iconSize,
+              iconColor,
               fontSize,
               lineHeight,
               fontWeight,
@@ -96244,6 +96265,9 @@
             case "success":
               color = successColor;
               break;
+            case "info":
+              color = infoColor;
+              break;
             case "warning":
               color = warningColor;
               break;
@@ -96254,10 +96278,12 @@
           return {
             "--u-bezier": cubicBezierEaseInOut,
             "--u-text-color": props.color || color,
+            "--u-background-color": props.filled ? `${props.color || color}10` : "transparent",
             "--u-font-size": fontSize,
             "--u-font-weight": fontWeight,
             "--u-line-height": lineHeight,
             "--u-icon-size": iconSize,
+            "--u-icon-color": iconColor || props.color || color,
             "--u-icon-spacing": iconSpacing
           };
         });
@@ -96271,7 +96297,7 @@
         ) : void 0;
         return {
           mergedClsPrefix: mergedClsPrefixRef,
-          mergedRenderIcon: mergedRenderIconRef,
+          mergedRenderIcon: renderIcon,
           cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
           themeClass: themeClassHandle?.themeClass,
           onRender: themeClassHandle?.onRender
@@ -96286,11 +96312,12 @@
             class: [
               `${mergedClsPrefix}-status`,
               `${mergedClsPrefix}-status--${this.type}`,
-              this.themeClass
+              this.themeClass,
+              { [`${mergedClsPrefix}-status--filled`]: this.filled }
             ],
             style: this.cssVars
           },
-          /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-status__icon` }, /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })),
+          !this.noIcon && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-status__icon` }, /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })),
           $slots.default && /* @__PURE__ */ vue.h("span", { class: `${mergedClsPrefix}-status__description` }, $slots.default())
         );
       }
@@ -96390,7 +96417,29 @@
       `, [iconSwitchTransition()]), cB("base-icon", `
         color: var(--u-indicator-text-color);
         transition: color .3s var(--u-bezier);
-      `, [iconSwitchTransition()])])]), cM("vertical", "flex-direction: column;", [cNotM("show-description", [c$1(">", [cB("step", "padding-bottom: 8px;")])]), c$1(">", [cB("step", "margin-bottom: 16px;", [c$1("&:last-child", "margin-bottom: 0;"), c$1(">", [cB("step-indicator", [c$1(">", [cB("step-splitor", `
+      `, [iconSwitchTransition()])])]), cM("vertical", "flex-direction: column;", [cNotM("show-description", [c$1(">", [cB("step", "padding-bottom: 8px;")])]), c$1(">", [cB("step", "margin-bottom: 16px;", [cM("history-variant", [`
+          margin-top: 12px;
+          margin-bottom: 24px;
+          color: var(--u-header-text-color);
+          `, c$1(">", [cB("step-indicator", [`
+              background-color: transparent;
+              box-shadow: none;
+              color: var(--u-header-text-color);
+              `, cB("step-indicator-slot", [cB("icon", `
+                  color: var(--u-step-icon-color);
+                  transition: color .3s var(--u-bezier);
+                `, [iconSwitchTransition()]), cB("base-icon", `
+                  color: var(--u-step-icon-color);
+                  transition: color .3s var(--u-bezier);
+                `, [iconSwitchTransition()])]), c$1(">", [cB("step-splitor", `
+                  position: absolute;
+                  bottom: -24px;
+                  width: 2px;
+                  background-color: var(--u-color-target);
+                  margin: 0 !important;
+                  left: calc(var(--u-indicator-size) / 2);
+                  height: calc(100% - var(--u-indicator-size));
+                `)])]), cB("step-content", [cE("description", "margin-top: 8px;")])])]), c$1("&:last-child", "margin-bottom: 0;"), c$1(">", [cB("step-indicator", [c$1(">", [cB("step-splitor", `
                 position: absolute;
                 bottom: -8px;
                 width: 1px;
@@ -96423,6 +96472,10 @@
         default: "medium"
       },
       vertical: Boolean,
+      variant: {
+        type: String,
+        default: "default"
+      },
       "onUpdate:current": [Function, Array],
       onUpdateCurrent: [Function, Array]
     };
@@ -96460,7 +96513,7 @@
             class: [
               `${mergedClsPrefix}-steps`,
               this.rtlEnabled && `${mergedClsPrefix}-steps--rtl`,
-              this.vertical && `${mergedClsPrefix}-steps--vertical`
+              (this.vertical || this.variant === "history") && `${mergedClsPrefix}-steps--vertical`
             ]
           },
           stepsWithIndex(flatten$3(getSlot$1(this)))
@@ -96468,12 +96521,76 @@
       }
     });
 
+    const _hoisted_1$2 = {
+      xmlns: 'http://www.w3.org/2000/svg',
+      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+      viewBox: '0 0 24 24'
+    };
+    const _hoisted_2$2 = /*#__PURE__*/vue.createElementVNode('g', {
+      fill: 'none'
+    }, [/*#__PURE__*/vue.createElementVNode('path', {
+      d: 'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2zm0 1.5a8.5 8.5 0 1 0 0 17a8.5 8.5 0 0 0 0-17zm-1.25 9.94l4.47-4.47a.75.75 0 0 1 1.133.976l-.073.084l-5 5a.75.75 0 0 1-.976.073l-.084-.073l-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073l1.97 1.97l4.47-4.47l-4.47 4.47z',
+      fill: 'currentColor'
+    })], -1
+    /* HOISTED */);
+
+    const _hoisted_3$2 = [_hoisted_2$2];
+    var HistoryFinishIcon = vue.defineComponent({
+      name: 'CheckmarkCircle24Regular',
+      render: function render(_ctx, _cache) {
+        return vue.openBlock(), vue.createElementBlock('svg', _hoisted_1$2, _hoisted_3$2);
+      }
+    });
+
+    const _hoisted_1$1 = {
+      xmlns: 'http://www.w3.org/2000/svg',
+      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+      viewBox: '0 0 24 24'
+    };
+    const _hoisted_2$1 = /*#__PURE__*/vue.createElementVNode('g', {
+      fill: 'none'
+    }, [/*#__PURE__*/vue.createElementVNode('path', {
+      d: 'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2zm0 1.5a8.5 8.5 0 1 0 0 17a8.5 8.5 0 0 0 0-17zm3.446 4.897l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l2.47 2.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-2.47 2.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-2.47-2.47a.75.75 0 0 1-.072-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l2.47-2.47a.75.75 0 0 1 .976-.072z',
+      fill: 'currentColor'
+    })], -1
+    /* HOISTED */);
+
+    const _hoisted_3$1 = [_hoisted_2$1];
+    var HistoryErrorIcon = vue.defineComponent({
+      name: 'DismissCircle24Regular',
+      render: function render(_ctx, _cache) {
+        return vue.openBlock(), vue.createElementBlock('svg', _hoisted_1$1, _hoisted_3$1);
+      }
+    });
+
+    const _hoisted_1 = {
+      xmlns: 'http://www.w3.org/2000/svg',
+      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+      viewBox: '0 0 24 24'
+    };
+    const _hoisted_2 = /*#__PURE__*/vue.createElementVNode('g', {
+      fill: 'none'
+    }, [/*#__PURE__*/vue.createElementVNode('path', {
+      d: 'M21.03 2.97a3.578 3.578 0 0 1 0 5.06L9.062 20a2.25 2.25 0 0 1-.999.58l-5.116 1.395a.75.75 0 0 1-.92-.921l1.395-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.578 3.578 0 0 1 5.06 0zM15 6.06L5.062 16a.75.75 0 0 0-.193.333l-1.05 3.85l3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9L15 6.06zm2.03-2.03l-.97.97L19 7.94l.97-.97a2.079 2.079 0 0 0-2.94-2.94z',
+      fill: 'currentColor'
+    })], -1
+    /* HOISTED */);
+
+    const _hoisted_3 = [_hoisted_2];
+    var EditIcon = vue.defineComponent({
+      name: 'Edit24Regular',
+      render: function render(_ctx, _cache) {
+        return vue.openBlock(), vue.createElementBlock('svg', _hoisted_1, _hoisted_3);
+      }
+    });
+
     const stepProps = {
       status: String,
       title: String,
       description: String,
       disabled: Boolean,
       noIcon: Boolean,
+      variant: String,
       // index will be filled by parent steps, not user
       internalIndex: {
         type: Number,
@@ -96494,33 +96611,41 @@
           mergedClsPrefixRef,
           stepsSlots
         } = USteps;
-        const verticalRef = vue.computed(() => {
-          return stepsProps.vertical;
-        });
-        const noIconRef = vue.computed(() => {
-          return props.noIcon;
+        const variantRef = vue.computed(
+          () => stepsProps.variant || "default"
+        );
+        const noIconRef = vue.computed(() => props.noIcon);
+        const variantBehaviors = vue.computed(() => {
+          const variant = variantRef.value;
+          return {
+            variant,
+            isVerticalOrHistory: stepsProps.vertical || variant === "history",
+            shouldRenderSplitor: !stepsProps.vertical && variant !== "history"
+          };
         });
-        const mergedStatusRef = vue.computed(
-          () => {
-            const { status } = props;
-            if (status) {
-              return status;
-            } else {
-              const { internalIndex } = props;
-              const { current } = stepsProps;
-              if (current === void 0)
-                return "process";
-              if (internalIndex < current) {
-                return "finish";
-              } else if (internalIndex === current) {
-                return stepsProps.status || "process";
-              } else if (internalIndex > current) {
-                return "wait";
-              }
-            }
+        const mergedStatusRef = vue.computed(() => {
+          const { status } = props;
+          if (status)
+            return status;
+          const { internalIndex } = props;
+          const { current, status: stepsStatus } = stepsProps;
+          if (variantRef.value === "history") {
+            if (current === void 0)
+              return "process";
+            if (internalIndex < current)
+              return "process";
+            if (internalIndex === current)
+              return stepsStatus || "process";
+            return "wait";
+          }
+          if (current === void 0)
             return "process";
-          }
-        );
+          if (internalIndex < current)
+            return "finish";
+          if (internalIndex === current)
+            return stepsStatus || "process";
+          return "wait";
+        });
         const cssVarsRef = vue.computed(() => {
           const { value: status } = mergedStatusRef;
           const { size } = stepsProps;
@@ -96537,7 +96662,8 @@
               [createKey("headerTextColor", status)]: headerTextColor,
               [createKey("splitorColor", status)]: splitorColor,
               [createKey("indicatorColor", status)]: indicatorColor,
-              [createKey("descriptionTextColor", status)]: descriptionTextColor
+              [createKey("descriptionTextColor", status)]: descriptionTextColor,
+              [createKey("indicatorIconColor", status)]: indicatorIconColor
             }
           } = mergedThemeRef.value;
           return {
@@ -96552,7 +96678,8 @@
             "--u-indicator-text-color": indicatorTextColor,
             "--u-splitor-color": splitorColor,
             "--u-step-header-font-size": stepHeaderFontSize,
-            "--u-step-header-font-weight": stepHeaderFontWeight
+            "--u-step-header-font-weight": stepHeaderFontWeight,
+            "--u-step-icon-color": indicatorIconColor
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass(
@@ -96578,6 +96705,43 @@
             }
           } : void 0;
         });
+        const iconRenderer = {
+          history: {
+            finish: () => renderFinishIcon("history"),
+            error: () => renderErrorIcon("history"),
+            default: () => resolveWrappedSlot(slots.icon, (icon) => icon || renderHistoryIcon())
+          },
+          default: {
+            finish: () => renderFinishIcon(),
+            error: () => renderErrorIcon(),
+            default: () => resolveWrappedSlot(
+              slots.icon,
+              (icon) => icon || renderInternalIndex()
+            )
+          }
+        };
+        const renderIcon = () => {
+          const variant = variantBehaviors.value.variant;
+          const status = mergedStatusRef.value;
+          const rendererGroup = iconRenderer[variant] || iconRenderer.default;
+          if (status in rendererGroup) {
+            return rendererGroup[status]();
+          }
+          return rendererGroup.default();
+        };
+        const renderFinishIcon = (variant = "default") => /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "finish" }, {
+          default: () => variant === "history" ? resolveSlot(stepsSlots["finish-icon"], () => [
+            /* @__PURE__ */ vue.h(HistoryFinishIcon, null)
+          ]) : resolveSlot(stepsSlots["finish-icon"], () => [/* @__PURE__ */ vue.h(Checkmark, null)])
+        });
+        const renderErrorIcon = (variant = "default") => /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "error" }, {
+          default: () => variant === "history" ? resolveSlot(stepsSlots["error-icon"], () => [
+            /* @__PURE__ */ vue.h(HistoryErrorIcon, null)
+          ]) : resolveSlot(stepsSlots["error-icon"], () => [/* @__PURE__ */ vue.h(ErrorIcon$1, null)])
+        });
+        const renderHistoryIcon = () => /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "history" }, {
+          default: () => resolveSlot(stepsSlots["history-icon"], () => [/* @__PURE__ */ vue.h(EditIcon, null)])
+        });
         const renderInternalIndex = () => /* @__PURE__ */ vue.h(
           "div",
           {
@@ -96586,27 +96750,12 @@
           },
           props.internalIndex
         );
-        const renderFinishIcon = () => /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "finish" }, {
-          default: () => resolveSlot(stepsSlots["finish-icon"], () => [/* @__PURE__ */ vue.h(Checkmark, null)])
-        });
-        const renderErrorIcon = () => /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "error" }, {
-          default: () => resolveSlot(stepsSlots["error-icon"], () => [/* @__PURE__ */ vue.h(ErrorIcon$1, null)])
-        });
-        const renderIcon = () => {
-          return resolveWrappedSlot(slots.icon, (icon) => {
-            const mergedStatus = mergedStatusRef.value;
-            if (mergedStatus === "finish")
-              return renderFinishIcon();
-            if (mergedStatus === "error")
-              return renderErrorIcon();
-            return icon || renderInternalIndex();
-          });
-        };
         return {
           renderIcon,
           stepsSlots,
           mergedClsPrefix: mergedClsPrefixRef,
-          vertical: verticalRef,
+          variantBehaviors,
+          variant: variantRef,
           noIcon: noIconRef,
           mergedStatus: mergedStatusRef,
           handleStepClick,
@@ -96616,7 +96765,15 @@
         };
       },
       render() {
-        const { mergedClsPrefix, onRender, handleStepClick, disabled, renderIcon } = this;
+        const {
+          mergedClsPrefix,
+          onRender,
+          handleStepClick,
+          disabled,
+          renderIcon,
+          variantBehaviors,
+          noIcon
+        } = this;
         const descriptionNode = resolveWrappedSlot(
           this.$slots.default,
           (children) => {
@@ -96637,20 +96794,21 @@
               !disabled && handleStepClick && `${mergedClsPrefix}-step--clickable`,
               this.themeClass,
               descriptionNode && `${mergedClsPrefix}-step--show-description`,
-              `${mergedClsPrefix}-step--${this.mergedStatus}-status`
+              `${mergedClsPrefix}-step--${this.mergedStatus}-status`,
+              `${mergedClsPrefix}-step--${this.variant}-variant`
             ],
             style: this.cssVars,
             onClick: handleStepClick
           },
-          this.vertical || !this.noIcon ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-indicator` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-indicator-slot` }, /* @__PURE__ */ vue.h(UIconSwitchTransition, null, { default: renderIcon })), this.vertical ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-splitor` }) : null) : null,
+          variantBehaviors.isVerticalOrHistory || !noIcon ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-indicator` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-indicator-slot` }, /* @__PURE__ */ vue.h(UIconSwitchTransition, null, { default: renderIcon })), variantBehaviors.isVerticalOrHistory ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-splitor` }) : null) : null,
           /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-content` }, /* @__PURE__ */ vue.h(
             "div",
             {
-              class: `${mergedClsPrefix}-step-content-header ${mergedClsPrefix}-step-content-header${this.noIcon ? "--column" : ""}`
+              class: `${mergedClsPrefix}-step-content-header ${mergedClsPrefix}-step-content-header${noIcon ? "--column" : ""}`
             },
             /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-content-header__title` }, resolveSlot(this.$slots.title, () => [this.title])),
-            this.noIcon && !this.vertical ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` }) : null,
-            !this.vertical && !this.noIcon ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-splitor` }) : null
+            noIcon && variantBehaviors.shouldRenderSplitor ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` }) : null,
+            !noIcon && variantBehaviors.shouldRenderSplitor ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-step-splitor` }) : null
           ), descriptionNode)
         );
       }
@@ -104237,7 +104395,7 @@
           maxReachedRef,
           listTypeRef,
           dragOverRef,
-          openOpenFileDialog,
+          openFileDialog,
           draggerInsideRef,
           handleFileAddition,
           mergedDirectoryDndRef,
@@ -104249,7 +104407,7 @@
         function handleTriggerClick() {
           if (mergedDisabledRef.value || maxReachedRef.value)
             return;
-          openOpenFileDialog();
+          openFileDialog();
         }
         function handleTriggerDragOver(e) {
           e.preventDefault();
@@ -104786,7 +104944,7 @@
       }
     });
 
-    var style$2 = c$1([cB("upload", "width: 100%;", [cM("dragger-inside", [cB("upload-trigger", `
+    var style$2 = 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);
@@ -105345,7 +105503,7 @@
         const mergedFileListRef = vue.computed(
           () => _mergedFileListRef.value.map(createSettledFileInfo)
         );
-        function openOpenFileDialog() {
+        function openFileDialog() {
           inputElRef.value?.click();
         }
         function handleFileInputChange(e) {
@@ -105573,7 +105731,8 @@
             "--u-dragger-icon-color": draggerIconColor,
             "--u-dragger-title-color": draggerTitleColor,
             "--u-dragger-text-color": draggerTextColor,
-            "--u-label-color": labelColor
+            "--u-label-color": labelColor,
+            "--u-upload-width": props.listType === "image-card" ? "auto" : "100%"
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass("upload", void 0, cssVarsRef, props) : void 0;
@@ -105598,7 +105757,7 @@
           getFileThumbnailUrlResolver,
           listTypeRef: vue.toRef(props, "listType"),
           dragOverRef,
-          openOpenFileDialog,
+          openFileDialog,
           draggerInsideRef,
           handleFileAddition,
           mergedDisabledRef: formItem.mergedDisabledRef,
@@ -105620,7 +105779,7 @@
             uncontrolledFileListRef.value = [];
           },
           submit,
-          openOpenFileDialog
+          openFileDialog
         };
         return {
           mergedClsPrefix: mergedClsPrefixRef,
@@ -106772,7 +106931,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.2.4";
+    var version = "1.3.0";
 
     function create({
       componentPrefix = "U",