@uzum-tech/ui 1.0.3 → 1.1.1

package/dist/index.js

@@ -3448,7 +3448,7 @@
     }
 
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
-    const style$1F = c([c('.v-binder-follower-container', {
+    const style$1G = c([c('.v-binder-follower-container', {
       position: 'absolute',
       left: '0',
       right: '0',
@@ -3527,7 +3527,7 @@
           }
         });
         const ssrAdapter = useSsrAdapter();
-        style$1F.mount({
+        style$1G.mount({
           id: 'vueuc/binder',
           head: true,
           anchorMetaName: cssrAnchorMetaName$1,
@@ -4810,7 +4810,7 @@
 
     /* eslint-disable @typescript-eslint/strict-boolean-expressions */
     const hiddenAttr = 'v-hidden';
-    const style$1E = c('[v-hidden]', {
+    const style$1F = c('[v-hidden]', {
       display: 'none!important'
     });
     var VOverflow = vue.defineComponent({
@@ -4911,7 +4911,7 @@
           }
         }
         const ssrAdapter = useSsrAdapter();
-        style$1E.mount({
+        style$1F.mount({
           id: 'vueuc/overflow',
           head: true,
           anchorMetaName: cssrAnchorMetaName$1,
@@ -33869,7 +33869,7 @@
       };
     }
 
-    var style$1D = cB("affix", [cM("affixed", {
+    var style$1E = cB("affix", [cM("affixed", {
       position: "fixed"
     }, [cM("absolute-positioned", {
       position: "absolute"
@@ -33929,7 +33929,7 @@
       props: affixProps,
       setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useStyle("-affix", style$1D, mergedClsPrefixRef);
+        useStyle("-affix", style$1E, mergedClsPrefixRef);
         let scrollTarget = null;
         const stickToTopRef = vue.ref(false);
         const stickToBottomRef = vue.ref(false);
@@ -34887,7 +34887,7 @@
       }
     });
 
-    var style$1C = cB("base-icon", `
+    var style$1D = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -34923,7 +34923,7 @@
         onMouseup: Function
       },
       setup(props) {
-        useStyle("-base-icon", style$1C, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-icon", style$1D, vue.toRef(props, "clsPrefix"));
       },
       render() {
         return /* @__PURE__ */ vue.h(
@@ -34943,7 +34943,7 @@
       }
     });
 
-    var style$1B = cB("base-close", `
+    var style$1C = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -35015,7 +35015,7 @@
         absolute: Boolean
       },
       setup(props) {
-        useStyle("-base-close", style$1B, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-close", style$1C, vue.toRef(props, "clsPrefix"));
         return () => {
           const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
           const Tag = isButtonTag ? "button" : "div";
@@ -35095,7 +35095,7 @@
       })];
     }
 
-    var style$1A = c$1([c$1("@keyframes loading-container-rotate", `
+    var style$1B = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -35265,7 +35265,7 @@
         ...exposedLoadingProps
       },
       setup(props) {
-        useStyle("-base-loading", style$1A, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-loading", style$1B, vue.toRef(props, "clsPrefix"));
       },
       render() {
         const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -35501,7 +35501,7 @@
       shadowDepth2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
     };
 
-    const self$1h = vars => {
+    const self$1i = vars => {
       const {
         heightSmall,
         heightMedium,
@@ -35522,10 +35522,10 @@
     const skeletonLight$1 = {
       name: "Skeleton",
       common: derived,
-      self: self$1h
+      self: self$1i
     };
 
-    var style$1z = c$1([cB("skeleton", `
+    var style$1A = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -35581,7 +35581,7 @@
         const themeRef = useTheme(
           "Skeleton",
           "-skeleton",
-          style$1z,
+          style$1A,
           skeletonLight$1,
           props,
           mergedClsPrefixRef
@@ -36330,7 +36330,7 @@
       return treemate;
     }
 
-    const self$1g = vars => {
+    const self$1h = vars => {
       const {
         fontBodyMedium,
         fontBodyLarge,
@@ -36356,16 +36356,16 @@
     const emptyLight = {
       name: "Empty",
       common: derived,
-      self: self$1g
+      self: self$1h
     };
 
     const emptyDark$1 = {
       name: "Empty",
       common: derived$1,
-      self: self$1g
+      self: self$1h
     };
 
-    var style$1y = cB("empty", `
+    var style$1z = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -36415,7 +36415,7 @@
         const themeRef = useTheme(
           "Empty",
           "-empty",
-          style$1y,
+          style$1z,
           emptyLight,
           props,
           mergedClsPrefixRef
@@ -36487,7 +36487,7 @@
       }
     });
 
-    const self$1f = vars => {
+    const self$1g = vars => {
       const {
         scrollbarColor,
         scrollbarColorHover
@@ -36500,13 +36500,13 @@
     const scrollbarLight = {
       name: "Scrollbar",
       common: derived,
-      self: self$1f
+      self: self$1g
     };
 
     const scrollbarDark = {
       name: "Scrollbar",
       common: derived$1,
-      self: self$1f
+      self: self$1g
     };
 
     var rtlStyle$r = cB("scrollbar", [cM("rtl", `
@@ -36545,7 +36545,7 @@
       })];
     }
 
-    var style$1x = cB("scrollbar", `
+    var style$1y = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -37089,7 +37089,7 @@
         const themeRef = useTheme(
           "Scrollbar",
           "-scrollbar",
-          style$1x,
+          style$1y,
           scrollbarLight,
           props,
           mergedClsPrefixRef
@@ -37292,7 +37292,7 @@
     });
     const XScrollbar = Scrollbar$1;
 
-    const self$1e = vars => {
+    const self$1f = vars => {
       const {
         borderRadius,
         iconMedium,
@@ -37349,7 +37349,7 @@
         Scrollbar: scrollbarLight,
         Empty: emptyLight
       },
-      self: self$1e
+      self: self$1f
     });
 
     const internalSelectMenuDark = {
@@ -37359,7 +37359,7 @@
         Scrollbar: scrollbarDark,
         Empty: emptyDark$1
       },
-      self: self$1e
+      self: self$1f
     };
 
     function renderCheckMark(show, clsPrefix) {
@@ -37393,6 +37393,7 @@
           valueRef,
           pendingTmNodeRef,
           multipleRef,
+          accountRef,
           valueSetRef,
           renderLabelRef,
           renderOptionRef,
@@ -37431,6 +37432,7 @@
         }
         return {
           multiple: multipleRef,
+          account: accountRef,
           isGrouped: useMemo(() => {
             const { tmNode } = props;
             const { parent } = tmNode;
@@ -37473,17 +37475,19 @@
           renderLabel,
           handleClick,
           handleMouseEnter,
-          handleMouseMove
+          handleMouseMove,
+          account
         } = this;
         const checkmark = renderCheckMark(isSelected, clsPrefix);
-        const children = renderLabel ? [renderLabel(rawNode, isSelected), showCheckmark && checkmark] : [
-          render$1(
-            rawNode[this.labelField],
-            rawNode,
-            isSelected
-          ),
+        const label = renderLabel ? renderLabel(rawNode, isSelected) : render$1(
+          rawNode[this.labelField],
+          rawNode,
+          isSelected
+        );
+        const children = account ? [
+          /* @__PURE__ */ vue.h(UBaseAccountOption, { ...rawNode, label }),
           showCheckmark && checkmark
-        ];
+        ] : [label, showCheckmark && checkmark];
         const attrs = nodeProps?.(rawNode);
         const node = /* @__PURE__ */ vue.h(
           "div",
@@ -37498,7 +37502,8 @@
                 [`${clsPrefix}-base-select-option--selected`]: isSelected,
                 [`${clsPrefix}-base-select-option--grouped`]: isGrouped,
                 [`${clsPrefix}-base-select-option--pending`]: isPending,
-                [`${clsPrefix}-base-select-option--show-checkmark`]: showCheckmark
+                [`${clsPrefix}-base-select-option--show-checkmark`]: showCheckmark,
+                [`${clsPrefix}-base-select-option--account`]: account
               }
             ],
             style: [attrs?.style || "", rawNode.style || ""],
@@ -37590,7 +37595,7 @@
       })];
     }
 
-    var style$1w = cB("base-select-menu", `
+    var style$1x = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -37655,6 +37660,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      width: 100%;
     `), cM("show-checkmark", `
       padding-right: calc(var(--u-option-padding-right) + 20px);
     `), c$1("&::before", `
@@ -37678,9 +37684,9 @@
       padding-left: var(--u-option-padding-left);
     `), cM("pending", [c$1("&::before", `
         background-color: var(--u-option-color-pending);
-      `)]), cM("selected", `
-      color: var(--u-option-text-color-active);
-    `, [c$1("&::before", `
+      `)]), cM("selected", [cNotM("account", `
+        color: var(--u-option-text-color-active);
+      `), c$1("&::before", `
         background-color: var(--u-option-color-active);
       `), cM("pending", [c$1("&::before", `
           background-color: var(--u-option-color-active-pending);
@@ -37691,7 +37697,7 @@
       `), cM("selected", `
         opacity: var(--u-option-opacity-disabled);
       `)]), cE("check", `
-      font-size: 16px;
+      font-size: 24px;
       position: absolute;
       right: calc(var(--u-option-padding-right) - 4px);
       top: calc(50% - 7px);
@@ -37718,6 +37724,7 @@
           required: true
         },
         multiple: Boolean,
+        account: Boolean,
         size: {
           type: String,
           default: "medium"
@@ -37772,7 +37779,7 @@
         const themeRef = useTheme(
           "InternalSelectMenu",
           "-internal-select-menu",
-          style$1w,
+          style$1x,
           internalSelectMenuLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -37965,6 +37972,7 @@
           nodePropsRef: vue.toRef(props, "nodeProps"),
           showCheckmarkRef: vue.toRef(props, "showCheckmark"),
           multipleRef: vue.toRef(props, "multiple"),
+          accountRef: vue.toRef(props, "account"),
           valueRef: vue.toRef(props, "value"),
           renderLabelRef: vue.toRef(props, "renderLabel"),
           renderOptionRef: vue.toRef(props, "renderOption"),
@@ -38220,7 +38228,7 @@
       }
     });
 
-    var style$1v = cB("base-wave", `
+    var style$1w = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -38238,7 +38246,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-wave", style$1v, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-wave", style$1w, vue.toRef(props, "clsPrefix"));
         const selfRef = vue.ref(null);
         const activeRef = vue.ref(false);
         let animationTimerId = null;
@@ -38283,7 +38291,7 @@
       }
     });
 
-    var style$1u = cB("base-menu-mask", `
+    var style$1v = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -38306,7 +38314,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-menu-mask", style$1u, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-menu-mask", style$1v, vue.toRef(props, "clsPrefix"));
         const messageRef = vue.ref(null);
         let timerId = null;
         const uncontrolledShowRef = vue.ref(false);
@@ -38340,7 +38348,7 @@
       }
     });
 
-    const self$1d = vars => {
+    const self$1e = vars => {
       const {
         fontBodyMedium,
         containerPrimary,
@@ -38367,13 +38375,13 @@
     const popoverLight = {
       name: "Popover",
       common: derived,
-      self: self$1d
+      self: self$1e
     };
 
     const popoverDark = {
       name: "Popover",
       common: derived$1,
-      self: self$1d
+      self: self$1e
     };
 
     const oppositePlacement = {
@@ -38383,7 +38391,7 @@
       right: "left"
     };
     const arrowSize = "var(--u-arrow-height) * 1.414";
-    var style$1t = c$1([cB("popover", `
+    var style$1u = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -38574,7 +38582,7 @@
         const themeRef = useTheme(
           "Popover",
           "-popover",
-          style$1t,
+          style$1u,
           popoverLight,
           props,
           mergedClsPrefixRef
@@ -39379,7 +39387,7 @@
       }
     });
 
-    const self$1c = vars => {
+    const self$1d = vars => {
       const {
         opacityDisabled,
         borderRadiusSmall: borderRadius,
@@ -39553,13 +39561,13 @@
     const tagLight = {
       name: "Tag",
       common: derived,
-      self: self$1c
+      self: self$1d
     };
 
     const tagDark = {
       name: "Tag",
       common: derived$1,
-      self: self$1c
+      self: self$1d
     };
 
     var rtlStyle$q = cB("tag", [cM("rtl", `
@@ -39606,7 +39614,7 @@
       }
     };
 
-    var style$1s = cB("tag", `
+    var style$1t = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -39741,7 +39749,7 @@
         const themeRef = useTheme(
           "Tag",
           "-tag",
-          style$1s,
+          style$1t,
           tagLight,
           props,
           mergedClsPrefixRef
@@ -39961,7 +39969,7 @@
       }
     });
 
-    var style$1r = cB("base-clear", `
+    var style$1s = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -40002,7 +40010,7 @@
         onClear: Function
       },
       setup(props) {
-        useStyle("-base-clear", style$1r, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-clear", style$1s, vue.toRef(props, "clsPrefix"));
         return {
           handleMouseDown(e) {
             e.preventDefault();
@@ -40096,7 +40104,7 @@
       }
     });
 
-    const self$1b = vars => {
+    const self$1c = vars => {
       const {
         borderRadius,
         iconMedium,
@@ -40167,9 +40175,11 @@
         placeholderColor: textSecondary,
         placeholderColorDisabled: textSecondary,
         color: elementsSecondary,
+        colorFilled: elementsTertiary,
         colorDisabled: elementsTertiary,
         colorActive: elementsSecondary,
         border: `2px solid ${elementsQuaternary}`,
+        borderFilled: "none",
         borderHover: `2px solid ${elementsPrimary}`,
         borderActive: `2px solid ${elementsPrimary}`,
         borderFocus: `2px solid ${elementsPrimary}`,
@@ -40255,7 +40265,7 @@
       peers: {
         Popover: popoverLight
       },
-      self: self$1b
+      self: self$1c
     });
 
     const internalSelectionDark = {
@@ -40264,7 +40274,7 @@
       peers: {
         Popover: popoverDark
       },
-      self: self$1b
+      self: self$1c
     };
 
     function generateSecondaryStates(state) {
@@ -40288,7 +40298,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
     }
-    var style$1q = c$1([cB("base-selection", `
+    var style$1r = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -40375,6 +40385,7 @@
       padding-top: 4px;
       padding-bottom: 4px;
       flex-wrap: wrap;
+      align-content: center;
       align-items: center;
       width: 100%;
       vertical-align: bottom;
@@ -40437,7 +40448,15 @@
           border: var(--u-border-active);
         `), cB("base-suffix", [cE("arrow", `
             color: var(--u-arrow-color-hover);
-          `)]), cB("base-selection-label", "background-color: var(--u-color-active);"), cB("base-selection-tags", "background-color: var(--u-color-active);")])]), cM("skeleton", "cursor: not-allowed;"), cM("disabled", "cursor: not-allowed;", [cE("border", `
+          `)]), cNotM("filled", [cB("base-selection-label", "background-color: var(--u-color-active);"), cB("base-selection-tags", "background-color: var(--u-color-active);")])])]), cM("filled", [cB("base-selection-label", `
+        background-color: var(--u-color-filled);
+      `), cB("base-selection-tags", `
+        background-color: var(--u-color-filled);
+      `), cE("border", `
+        border: var(--u-border-filled);
+      `), cE("state-border", `
+        border: var(--u-border-filled);
+      `)]), cM("skeleton", "cursor: not-allowed;"), cM("disabled", "cursor: not-allowed;", [cE("border", `
         border: var(--u-border-disabled);
       `), cE("filter-counter", `
         color: var(--u-filter-counter-text-color-disabled);
@@ -40463,7 +40482,7 @@
         cursor: not-allowed;
         color: var(--u-placeholder-color-disabled);
       `), cM("secondary-selected", [generateSecondaryStates("-disabled")])]), cB("base-selection-input-tag", `
-      line-height: calc(var(--u-height) - 12px);
+      // line-height: calc(var(--u-height) - 12px);
       outline: none;
       display: none;
       position: relative;
@@ -40501,7 +40520,7 @@
         caret-color: var(--u-caret-color-secondary);
       `), cB("base-selection-tags", `
         padding-right: calc(var(--u-padding-right) + var(--u-arrow-size) + 37px + var(--u-clear-size));
-      `), cNotM("disabled", [c$1("&:hover", [generateSecondaryStates("-hover"), cB("base-clear", "--u-clear-color-hover: var(--u-clear-color-hover-secondary)")]), cM("focus", [generateSecondaryStates("-focus")]), cM("active", [generateSecondaryStates("-active")])])]), ["warning", "error"].map(status => cM(`${status}-status`, [cE("state-border", `border: var(--u-border-${status});`), cNotM("secondary-selected", [cNotM("disabled", [cM("active", [cB("base-selection-label", `background-color: var(--u-color-active-${status});`), cB("base-selection-tags", `background-color: var(--u-color-active-${status});`)])])]), cNotM("disabled", [cM("active", [cE("state-border", `
+      `), cNotM("disabled", [c$1("&:hover", [generateSecondaryStates("-hover"), cB("base-clear", "--u-clear-color-hover: var(--u-clear-color-hover-secondary)")]), cM("focus", [generateSecondaryStates("-focus")]), cM("active", [generateSecondaryStates("-active")])])]), ["warning", "error"].map(status => cM(`${status}-status`, [cE("state-border", `border: var(--u-border-${status});`), cNotM("secondary-selected", [cNotM("disabled", [cNotM("filled", [cM("active", [cB("base-selection-label", `background-color: var(--u-color-active-${status});`), cB("base-selection-tags", `background-color: var(--u-color-active-${status});`)])])])]), cNotM("disabled", [cM("active", [cE("state-border", `
             box-shadow: var(--u-box-shadow-active-${status});
             border: var(--u-border-active-${status});
           `)]), cM("focus", [cE("state-border", `
@@ -40570,6 +40589,7 @@
           type: String,
           default: "value"
         },
+        tagField: String,
         multiple: Boolean,
         filterable: Boolean,
         clearable: Boolean,
@@ -40587,6 +40607,7 @@
         },
         inputProps: Object,
         focused: Boolean,
+        filled: Boolean,
         renderTag: Function,
         onKeydown: Function,
         onClick: Function,
@@ -40599,13 +40620,15 @@
         onPatternFocus: Function,
         onPatternBlur: Function,
         renderLabel: Function,
+        renderTagLabel: Function,
         status: String,
         inlineThemeDisabled: Boolean,
         ignoreComposition: { type: Boolean, default: true },
         onResize: Function,
         round: Boolean,
         counter: Boolean,
-        secondary: Boolean
+        secondary: Boolean,
+        account: Boolean
       },
       setup(props) {
         const patternInputMirrorRef = vue.ref(null);
@@ -40624,7 +40647,7 @@
         const themeRef = useTheme(
           "InternalSelection",
           "-internal-selection",
-          style$1q,
+          style$1r,
           internalSelectionLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -40977,6 +41000,8 @@
               colorFocusSecondary,
               textColorFocusSecondary,
               borderFocusSecondary,
+              borderFilled,
+              colorFilled,
               [createKey("clearSize", size)]: clearSize,
               [createKey("arrowSize", size)]: arrowSize,
               [createKey("padding", size)]: padding,
@@ -40995,6 +41020,7 @@
           return {
             "--u-bezier": cubicBezierEaseInOut,
             "--u-border": border,
+            "--u-border-filled": borderFilled,
             "--u-border-active": borderActive,
             "--u-border-focus": borderFocus,
             "--u-border-hover": borderHover,
@@ -41005,6 +41031,7 @@
             "--u-box-shadow-hover": boxShadowHover,
             "--u-caret-color": caretColor,
             "--u-color": color,
+            "--u-color-filled": colorFilled,
             "--u-color-active": colorActive,
             "--u-color-disabled": colorDisabled,
             "--u-line-height": lineHeight,
@@ -41137,6 +41164,7 @@
           getCounter,
           getTail,
           renderLabel: props.renderLabel,
+          renderTagLabel: props.renderTagLabel,
           cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
           themeClass: themeClassHandle?.themeClass,
           onRender: themeClassHandle?.onRender,
@@ -41159,7 +41187,10 @@
           clsPrefix,
           onRender,
           renderTag,
-          renderLabel
+          renderLabel,
+          tagField,
+          renderTagLabel,
+          account
         } = this;
         onRender?.();
         const maxTagCountResponsive = maxTagCount === "responsive";
@@ -41192,34 +41223,41 @@
         let body;
         if (multiple) {
           const { labelField } = this;
-          const createTag = (option) => /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: `${clsPrefix}-base-selection-tag-wrapper`,
-              key: option.value
-            },
-            renderTag ? renderTag({
-              option,
-              handleClose: () => {
-                this.handleDeleteOption(option);
-              }
-            }) : /* @__PURE__ */ vue.h(
-              UTag,
+          const createTag = (option) => {
+            const icon = option.avatar || option.icon ? () => /* @__PURE__ */ vue.h(UBaseIcon, { clsPrefix }, {
+              default: option.avatar || option.icon
+            }) : null;
+            const selectedFunctionForLabel = renderTagLabel || renderLabel;
+            return /* @__PURE__ */ vue.h(
+              "div",
               {
-                size: this.tagSize,
-                closable: !option.disabled,
-                disabled,
-                onClose: () => {
+                class: `${clsPrefix}-base-selection-tag-wrapper`,
+                key: option.value
+              },
+              renderTag ? renderTag({
+                option,
+                handleClose: () => {
                   this.handleDeleteOption(option);
+                }
+              }) : /* @__PURE__ */ vue.h(
+                UTag,
+                {
+                  size: this.tagSize,
+                  closable: !option.disabled,
+                  disabled,
+                  onClose: () => {
+                    this.handleDeleteOption(option);
+                  },
+                  internalCloseIsButtonTag: false,
+                  internalCloseFocusable: false
                 },
-                internalCloseIsButtonTag: false,
-                internalCloseFocusable: false
-              },
-              {
-                default: () => renderLabel ? renderLabel(option, true) : render$1(option[labelField], option, true)
-              }
-            )
-          );
+                {
+                  icon: account ? icon : null,
+                  default: () => selectedFunctionForLabel ? selectedFunctionForLabel(option, true) : render$1(option[tagField || labelField], option, true)
+                }
+              )
+            );
+          };
           const createOriginalTagNodes = () => (maxTagCountNumeric ? this.selectedOptions.slice(0, maxTagCount) : this.selectedOptions).map(createTag);
           const input = filterable ? /* @__PURE__ */ vue.h(
             "div",
@@ -41383,10 +41421,16 @@
             }
           ) : popoverTrigger, placeholder);
         } else {
+          let children;
+          if (this.label !== void 0) {
+            const label = renderLabel ? renderLabel(this.selectedOption, true) : render$1(this.label, this.selectedOption, true);
+            children = account && /* @__PURE__ */ vue.h(UBaseAccountOption, { ...this.selectedOption, label }) || label;
+          }
           if (filterable) {
             const hasInput = this.pattern || this.isComposing;
-            const showPlaceholder = !hasInput && !this.selected;
-            const showSelectedLabel = !hasInput && this.selected;
+            const isAccountFocused = this.patternInputFocused && this.account;
+            const showPlaceholder = !isAccountFocused && !hasInput && !this.selected;
+            const showSelectedLabel = !isAccountFocused && !hasInput && this.selected;
             body = /* @__PURE__ */ vue.h(
               "div",
               {
@@ -41422,7 +41466,7 @@
                   option: this.selectedOption,
                   handleClose: () => {
                   }
-                }) : renderLabel ? renderLabel(this.selectedOption, true) : render$1(this.label, this.selectedOption, true))
+                }) : children)
               ) : null,
               showPlaceholder ? /* @__PURE__ */ vue.h(
                 "div",
@@ -41453,7 +41497,7 @@
                   option: this.selectedOption,
                   handleClose: () => {
                   }
-                }) : renderLabel ? renderLabel(this.selectedOption, true) : render$1(this.label, this.selectedOption, true))
+                }) : children)
               ) : /* @__PURE__ */ vue.h(
                 "div",
                 {
@@ -41481,6 +41525,7 @@
                 [`${clsPrefix}-base-selection--selected`]: this.selected || this.active && this.pattern,
                 [`${clsPrefix}-base-selection--disabled`]: this.disabled,
                 [`${clsPrefix}-base-selection--multiple`]: this.multiple,
+                [`${clsPrefix}-base-selection--filled`]: this.filled,
                 [`${clsPrefix}-base-selection--skeleton`]: this.loadingSkeleton,
                 // focus is not controlled by selection itself since it always need
                 // to be managed together with menu. provide :focus style will cause
@@ -41683,7 +41728,7 @@
       })];
     }
 
-    var style$1p = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+    var style$1q = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -41802,7 +41847,7 @@
         }
       },
       setup(props) {
-        useStyle("-base-slot-machine", style$1p, vue.toRef(props, "clsPrefix"));
+        useStyle("-base-slot-machine", style$1q, vue.toRef(props, "clsPrefix"));
         const oldValueRef = vue.ref();
         const newValueRef = vue.ref();
         const numbersRef = vue.computed(() => {
@@ -42160,6 +42205,188 @@
       };
     }
 
+    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$6 = {
+      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$1b = vars => {
+      const {
+        heightHuge,
+        fontBodyLarge,
+        fontTitleMedium,
+        lineHeightBodyLarge,
+        lineHeightTitleMedium,
+        fontWeight,
+        fontWeightStrong,
+        textSecondary,
+        elementsPrimary,
+        elementsSecondary
+      } = vars;
+      return {
+        ...commonVars$6,
+        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$1b
+    };
+
+    const accountOptionDark = {
+      name: "AccountOption",
+      common: derived$1,
+      self: self$1b
+    };
+
+    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$5 = {
       iconMargin: "16px",
       closeMargin: "12px",
@@ -46639,18 +46866,28 @@
     const self$12 = vars => {
       const {
         brandQuaternary500,
+        elementsPrimary,
         staticGreen,
         staticRed,
         staticOrange,
-        fontBodySmall
+        fontBodySmall,
+        textPrimary,
+        textQuaternary
       } = vars;
       return {
         color: staticRed,
+        colorPrime: elementsPrimary,
         colorInfo: brandQuaternary500,
         colorSuccess: staticGreen,
         colorError: staticRed,
         colorWarning: staticOrange,
-        fontSize: fontBodySmall
+        fontSize: fontBodySmall,
+        textColor: textPrimary,
+        textColorPrime: textQuaternary,
+        textColorInfo: textPrimary,
+        textColorSuccess: textQuaternary,
+        textColorError: textQuaternary,
+        textColorWarning: textQuaternary
       };
     };
     const badgeLight = {
@@ -46712,7 +46949,7 @@
       transition:
         background-color .3s var(--u-bezier),
         color .3s var(--u-bezier);
-      color: #FFF;
+      color: var(--u-text-color);
       position: absolute;
       height: 18px;
       line-height: 18px;
@@ -46765,6 +47002,7 @@
       showZero: Boolean,
       processing: Boolean,
       color: String,
+      textColor: String,
       offset: Array
     };
     var Badge = vue.defineComponent({
@@ -46796,17 +47034,22 @@
         });
         const rtlEnabledRef = useRtl("Badge", mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
-          const { type, color: propColor } = props;
+          const { type, color: propColor, textColor: propTextColor } = props;
           const {
             common: { cubicBezierEaseInOut, cubicBezierEaseOut },
-            self: { [createKey("color", type)]: color, fontSize }
+            self: {
+              [createKey("color", type)]: color,
+              [createKey("textColor", type)]: textColor,
+              fontSize
+            }
           } = themeRef.value;
           return {
             "--u-font-size": fontSize,
             "--u-color": propColor || color,
             "--u-ripple-color": propColor || color,
             "--u-bezier": cubicBezierEaseInOut,
-            "--u-ripple-bezier": cubicBezierEaseOut
+            "--u-ripple-bezier": cubicBezierEaseOut,
+            "--u-text-color": propTextColor || textColor
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass(
@@ -57064,6 +57307,9 @@
         type: String,
         default: "children"
       },
+      filled: Boolean,
+      tagField: String,
+      renderTagLabel: Function,
       renderLabel: Function,
       renderOption: Function,
       renderTag: Function,
@@ -57099,7 +57345,8 @@
       secondary: Boolean,
       /** deprecated */
       onChange: [Function, Array],
-      items: Array
+      items: Array,
+      account: Boolean
     };
     var USelect = vue.defineComponent({
       name: "Select",
@@ -57276,8 +57523,13 @@
           }
           return null;
         });
+        const mergedSizeRef = vue.computed(() => {
+          if (props.account)
+            return "huge";
+          return formItem.mergedSizeRef.value;
+        });
         const formItem = useFormItem(props);
-        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
+        const { mergedDisabledRef, mergedStatusRef } = formItem;
         function doUpdateValue(value, option) {
           const {
             onChange,
@@ -57782,7 +58034,11 @@
                   ignoreComposition: this.ignoreComposition,
                   round: this.round,
                   counter: this.counter,
-                  secondary: this.secondary
+                  secondary: this.secondary,
+                  account: this.account,
+                  tagField: this.tagField,
+                  renderTagLabel: this.renderTagLabel,
+                  filled: this.filled
                 },
                 {
                   arrow: () => [this.$slots.arrow?.()]
@@ -57831,6 +58087,7 @@
                             ],
                             clsPrefix: this.mergedClsPrefix,
                             focusable: true,
+                            account: this.account,
                             labelField: this.labelField,
                             valueField: this.valueField,
                             autoPending: true,
@@ -106402,7 +106659,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.0.3";
+    var version = "1.1.1";
 
     function create({
       componentPrefix = "U",
@@ -106480,6 +106737,7 @@
     const darkTheme = {
       name: "dark",
       common: derived$1,
+      AccountOption: accountOptionDark,
       Alert: alertDark,
       Anchor: anchorDark,
       AutoComplete: autoCompleteDark,
@@ -106568,6 +106826,7 @@
     const lightTheme = {
       name: "light",
       common: derived,
+      AccountOption: accountOptionLight,
       Alert: alertLight,
       Anchor: anchorLight,
       AutoComplete: autoCompleteLight,
@@ -106937,8 +107196,8 @@
                         alignItems: "center",
                         justifyContent: "center",
                         borderRadius: "50%",
-                        backgroundColor: "var(--popover-color)",
-                        color: "var(--text-color-2)",
+                        backgroundColor: "var(--elements-secondary)",
+                        color: "var(--text-primary)",
                         transition: "color .3s var(--cubic-bezier-ease-in-out), background-color .3s var(--cubic-bezier-ease-in-out), box-shadow .3s var(--cubic-bezier-ease-in-out)",
                         boxShadow: "0 2px 8px 0px rgba(0, 0, 0, .12)",
                         cursor: "pointer"