@uzum-tech/ui 1.0.3 → 1.1.1

package/lib/_internal/account-option/src/AccountOption.d.ts

@@ -0,0 +1,162 @@
+import { type PropType, VNodeChild } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    icon: PropType<() => VNodeChild>;
+    avatar: PropType<() => VNodeChild>;
+    label: PropType<VNodeChild>;
+    value: (StringConstructor | NumberConstructor)[];
+    theme: PropType<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-height': string;
+        '--u-icon-width': string;
+        '--u-icon-height': string;
+        '--u-icon-margin': string;
+        '--u-icon-size': string;
+        '--u-label-margin': string;
+        '--u-label-color': string;
+        '--u-label-font-size': string;
+        '--u-label-font-weight': string;
+        '--u-label-line-height': string;
+        '--u-value-font-size': string;
+        '--u-value-font-weight': string;
+        '--u-value-line-height': string;
+        '--u-avatar-width': string;
+        '--u-avatar-height': string;
+        '--u-avatar-radius': string;
+        '--u-avatar-color': string;
+        '--u-avatar-icon-color': string;
+        '--u-avatar-size': string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: PropType<() => VNodeChild>;
+    avatar: PropType<() => VNodeChild>;
+    label: PropType<VNodeChild>;
+    value: (StringConstructor | NumberConstructor)[];
+    theme: PropType<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+}>>, {}, {}>;
+export default _default;

package/lib/_internal/account-option/src/AccountOption.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _mixins_1 = require("../../../_mixins");
+const icon_1 = require("../../icon");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const styles_1 = require("../styles");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'BaseClear',
+    inheritAttrs: false,
+    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { icon: Function, avatar: Function, label: [String, Object], value: [String, Number] }),
+    setup(props) {
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('AccountOption', '-base-account-option', index_cssr_1.default, styles_1.accountOptionLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.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 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-base-account-option__icon` }, (0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+            default: this.avatar || this.icon
+        }))) : null;
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-base-account-option`,
+                this.avatar && `${mergedClsPrefix}-base-account-option--avatar`
+            ], style: cssVars },
+            icon,
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-base-account-option__wrap` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-base-account-option__label` }, this.label),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-base-account-option__value` }, this.value))));
+    }
+});

package/lib/_internal/account-option/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_internal/account-option/src/styles/index.cssr.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../../_utils/cssr");
+exports.default = (0, cssr_1.cB)('base-account-option', `
+ display: flex;
+ align-items: center;
+ position: relative;
+ height: var(--u-height);
+`, [(0, cssr_1.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);
+ `), (0, cssr_1.cE)('wrap', `
+ width: 10px;
+ flex-grow: 1;
+ `), (0, cssr_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;
+ `), (0, cssr_1.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;
+ `), (0, cssr_1.cM)('avatar', [(0, cssr_1.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);
+ `)])]);

package/lib/_internal/account-option/styles/_common.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    iconWidth: string;
+    iconHeight: string;
+    iconMargin: string;
+    iconSize: string;
+    labelMargin: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    avatarRadius: string;
+    avatarSize: string;
+};
+export default _default;

package/lib/_internal/account-option/styles/_common.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    iconWidth: '44px',
+    iconHeight: '44px',
+    iconMargin: '0 16px 0 0',
+    iconSize: '44px',
+    labelMargin: '0 0 4px 0',
+    avatarWidth: '44px',
+    avatarHeight: '28px',
+    avatarRadius: '4px',
+    avatarSize: '16px'
+};

package/lib/_internal/account-option/styles/dark.d.ts

@@ -0,0 +1,2 @@
+import { type AccountOptionTheme } from './light';
+export declare const accountOptionDark: AccountOptionTheme;

package/lib/_internal/account-option/styles/dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accountOptionDark = void 0;
+const common_1 = require("../../../_styles/common");
+const light_1 = require("./light");
+exports.accountOptionDark = {
+    name: 'AccountOption',
+    common: common_1.commonDark,
+    self: light_1.self
+};

package/lib/_internal/account-option/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { accountOptionDark } from './dark';
+export { accountOptionLight } from './light';
+export type { AccountOptionTheme, AccountOptionThemeVars } from './light';

package/lib/_internal/account-option/styles/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accountOptionLight = exports.accountOptionDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "accountOptionDark", { enumerable: true, get: function () { return dark_1.accountOptionDark; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "accountOptionLight", { enumerable: true, get: function () { return light_1.accountOptionLight; } });

package/lib/_internal/account-option/styles/light.d.ts

@@ -0,0 +1,26 @@
+import type { ThemeCommonVars } from '../../../_styles/common';
+import { type Theme } from '../../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    height: string;
+    labelColor: string;
+    labelFontSize: string;
+    labelFontWeight: string;
+    labelLineHeight: string;
+    valueFontSize: string;
+    valueFontWeight: string;
+    valueLineHeight: string;
+    avatarColor: string;
+    avatarIconColor: string;
+    iconWidth: string;
+    iconHeight: string;
+    iconMargin: string;
+    iconSize: string;
+    labelMargin: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    avatarRadius: string;
+    avatarSize: string;
+};
+export type AccountOptionThemeVars = ReturnType<typeof self>;
+export declare const accountOptionLight: Theme<'AccountOption', AccountOptionThemeVars>;
+export type AccountOptionTheme = typeof accountOptionLight;

package/lib/_internal/account-option/styles/light.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accountOptionLight = exports.self = void 0;
+const common_1 = require("../../../_styles/common");
+const _common_1 = __importDefault(require("./_common"));
+const self = (vars) => {
+    const { heightHuge, fontBodyLarge, fontTitleMedium, lineHeightBodyLarge, lineHeightTitleMedium, fontWeight, fontWeightStrong, textSecondary, elementsPrimary, elementsSecondary } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { height: heightHuge, labelColor: textSecondary, labelFontSize: fontBodyLarge, labelFontWeight: fontWeight, labelLineHeight: lineHeightBodyLarge, valueFontSize: fontTitleMedium, valueFontWeight: fontWeightStrong, valueLineHeight: lineHeightTitleMedium, avatarColor: elementsPrimary, avatarIconColor: elementsSecondary });
+};
+exports.self = self;
+exports.accountOptionLight = {
+    name: 'AccountOption',
+    common: common_1.commonLight,
+    self: exports.self
+};

package/lib/_internal/index.d.ts

@@ -22,3 +22,4 @@ export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './che
 export type { CheckboxBaseProps, UseCheckbox, OnUpdateChecked, OnUpdateCheckedImpl, CheckboxInst } from './checkbox';
 export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';
 export type { OnUpdateValue, OnUpdateValueImpl, RadioGroupInjection, UseRadio, RadioBaseProps } from './radio';
+export { default as UBaseAccountOption } from './account-option';

package/lib/_internal/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRadio = exports.radioGroupInjectionKey = exports.radioBaseProps = exports.useCheckbox = exports.checkboxBaseProps = exports.checkboxGroupInjectionKey = exports.UxScrollbar = exports.UScrollbar = exports.UBaseSuffix = exports.UBaseClear = exports.UBaseSlotMachine = exports.UInternalSelection = exports.UBaseMenuMask = exports.UBaseWave = exports.UInternalSelectMenu = exports.UBaseSkeleton = exports.UBaseLoading = exports.UBaseFocusDetector = exports.UBaseIcon = exports.UBaseClose = exports.UFadeInExpandTransition = exports.UIconSwitchTransition = void 0;
+exports.UBaseAccountOption = exports.useRadio = exports.radioGroupInjectionKey = exports.radioBaseProps = exports.useCheckbox = exports.checkboxBaseProps = exports.checkboxGroupInjectionKey = exports.UxScrollbar = exports.UScrollbar = exports.UBaseSuffix = exports.UBaseClear = exports.UBaseSlotMachine = exports.UInternalSelection = exports.UBaseMenuMask = exports.UBaseWave = exports.UInternalSelectMenu = exports.UBaseSkeleton = exports.UBaseLoading = exports.UBaseFocusDetector = exports.UBaseIcon = exports.UBaseClose = exports.UFadeInExpandTransition = exports.UIconSwitchTransition = void 0;
 var icon_switch_transition_1 = require("./icon-switch-transition");
 Object.defineProperty(exports, "UIconSwitchTransition", { enumerable: true, get: function () { return __importDefault(icon_switch_transition_1).default; } });
 var fade_in_expand_transition_1 = require("./fade-in-expand-transition");
@@ -43,3 +43,5 @@ var radio_1 = require("./radio");
 Object.defineProperty(exports, "radioBaseProps", { enumerable: true, get: function () { return radio_1.radioBaseProps; } });
 Object.defineProperty(exports, "radioGroupInjectionKey", { enumerable: true, get: function () { return radio_1.radioGroupInjectionKey; } });
 Object.defineProperty(exports, "useRadio", { enumerable: true, get: function () { return radio_1.useRadio; } });
+var account_option_1 = require("./account-option");
+Object.defineProperty(exports, "UBaseAccountOption", { enumerable: true, get: function () { return __importDefault(account_option_1).default; } });

package/lib/_internal/select-menu/src/SelectMenu.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     multiple: BooleanConstructor;
+    account: BooleanConstructor;
     size: {
         type: PropType<Size>;
         default: string;
@@ -474,6 +475,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     multiple: BooleanConstructor;
+    account: BooleanConstructor;
     size: {
         type: PropType<Size>;
         default: string;
@@ -686,6 +688,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     inlineThemeDisabled: boolean;
     scrollable: boolean;
+    account: boolean;
     showCheckmark: boolean;
     labelField: string;
     autoPending: boolean;

package/lib/_internal/select-menu/src/SelectMenu.js

@@ -30,7 +30,7 @@ exports.default = (0, vue_1.defineComponent)({
         }, treeMate: {
             type: Object,
             required: true
-        }, multiple: Boolean, size: {
+        }, multiple: Boolean, account: Boolean, size: {
             type: String,
             default: 'medium'
         }, value: {
@@ -251,6 +251,7 @@ exports.default = (0, vue_1.defineComponent)({
             nodePropsRef: (0, vue_1.toRef)(props, 'nodeProps'),
             showCheckmarkRef: (0, vue_1.toRef)(props, 'showCheckmark'),
             multipleRef: (0, vue_1.toRef)(props, 'multiple'),
+            accountRef: (0, vue_1.toRef)(props, 'account'),
             valueRef: (0, vue_1.toRef)(props, 'value'),
             renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
             renderOptionRef: (0, vue_1.toRef)(props, 'renderOption'),

package/lib/_internal/select-menu/src/SelectOption.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     multiple: Ref<boolean>;
+    account: Ref<boolean>;
     isGrouped: import("vue").ComputedRef<boolean | null>;
     showCheckmark: Ref<boolean>;
     nodeProps: Ref<import("./interface").NodeProps | undefined>;

package/lib/_internal/select-menu/src/SelectOption.js

@@ -6,6 +6,7 @@ const _utils_1 = require("../../../_utils");
 const icons_1 = require("../../icons");
 const icon_1 = require("../../icon");
 const interface_1 = require("./interface");
+const __1 = require("../..");
 function renderCheckMark(show, clsPrefix) {
     return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
         default: () => show ? ((0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: clsPrefix, class: `${clsPrefix}-base-select-option__check` }, {
@@ -26,7 +27,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { valueRef, pendingTmNodeRef, multipleRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter
+        const { valueRef, pendingTmNodeRef, multipleRef, accountRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.internalSelectionMenuInjectionKey);
         const isPendingRef = (0, vooks_1.useMemo)(() => {
@@ -56,6 +57,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return {
             multiple: multipleRef,
+            account: accountRef,
             isGrouped: (0, vooks_1.useMemo)(() => {
                 const { tmNode } = props;
                 const { parent } = tmNode;
@@ -87,14 +89,17 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove } = this;
+        const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove, account } = this;
         const checkmark = renderCheckMark(isSelected, clsPrefix);
-        const children = renderLabel
-            ? [renderLabel(rawNode, isSelected), showCheckmark && checkmark]
-            : [
-                (0, _utils_1.render)(rawNode[this.labelField], rawNode, isSelected),
+        const label = renderLabel
+            ? renderLabel(rawNode, isSelected)
+            : (0, _utils_1.render)(rawNode[this.labelField], rawNode, isSelected);
+        const children = account
+            ? [
+                (0, vue_1.h)(__1.UBaseAccountOption, Object.assign({}, rawNode, { label: label })),
                 showCheckmark && checkmark
-            ];
+            ]
+            : [label, showCheckmark && checkmark];
         const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode);
         const node = ((0, vue_1.h)("div", Object.assign({}, attrs, { class: [
                 `${clsPrefix}-base-select-option`,
@@ -105,7 +110,8 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${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 === null || attrs === void 0 ? void 0 : attrs.style) || '', rawNode.style || ''], onClick: (0, _utils_1.mergeEventHandlers)([handleClick, attrs === null || attrs === void 0 ? void 0 : attrs.onClick]), onMouseenter: (0, _utils_1.mergeEventHandlers)([
                 handleMouseEnter,

package/lib/_internal/select-menu/src/interface.d.ts

@@ -22,6 +22,7 @@ export interface InternalSelectMenuInjection {
     valueSetRef: Ref<Set<number | string>>;
     pendingTmNodeRef: Ref<TreeNode<SelectBaseOption> | null>;
     multipleRef: Ref<boolean>;
+    accountRef: Ref<boolean>;
     valueRef: Ref<string | number | Array<string | number> | null>;
     renderLabelRef: Ref<RenderLabel | undefined>;
     renderOptionRef: Ref<RenderOption | undefined>;

package/lib/_internal/select-menu/src/styles/index.cssr.js

@@ -73,6 +73,7 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
+ width: 100%;
  `), (0, cssr_1.cM)('show-checkmark', `
  padding-right: calc(var(--u-option-padding-right) + 20px);
  `), (0, cssr_1.c)('&::before', `
@@ -96,9 +97,9 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  padding-left: var(--u-option-padding-left);
  `), (0, cssr_1.cM)('pending', [(0, cssr_1.c)('&::before', `
  background-color: var(--u-option-color-pending);
- `)]), (0, cssr_1.cM)('selected', `
+ `)]), (0, cssr_1.cM)('selected', [(0, cssr_1.cNotM)('account', `
  color: var(--u-option-text-color-active);
- `, [(0, cssr_1.c)('&::before', `
+ `), (0, cssr_1.c)('&::before', `
  background-color: var(--u-option-color-active);
  `), (0, cssr_1.cM)('pending', [(0, cssr_1.c)('&::before', `
  background-color: var(--u-option-color-active-pending);
@@ -109,7 +110,7 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  `), (0, cssr_1.cM)('selected', `
  opacity: var(--u-option-opacity-disabled);
  `)]), (0, cssr_1.cE)('check', `
- font-size: 16px;
+ font-size: 24px;
  position: absolute;
  right: calc(var(--u-option-padding-right) - 4px);
  top: calc(50% - 7px);