@uzum-tech/ui 0.1.2 → 1.0.1

package/es/menu/src/Submenu.d.ts

@@ -67,124 +67,113 @@ export declare const USubmenu: import("vue").DefineComponent<{
     menuProps: import("./Menu").MenuSetupProps;
     mergedTheme: import("vue").Ref<{
         common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            tertiaryColor: string;
-            tertiaryColorHover: string;
-            tertiaryColorActive: string;
-            tertiaryColorSuppl: string;
-            tertiaryElements: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textTertiary: string;
-            boxShadowHover: string;
-            boxShadowFocus: string;
-            boxShadowHoverChecked: string;
-            boxShadowFocusChecked: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            borderTagColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
             scrollbarColor: string;
             scrollbarColorHover: string;
             scrollbarWidth: string;
             scrollbarHeight: string;
             scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            avatarTextColor: string;
-            avatarIconColor: string;
-            invertedColor: string;
-            tooltipColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
             opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
+            brandPrimary50: string;
+            brandPrimary100: string;
+            brandPrimary200: string;
+            brandPrimary300: string;
+            brandPrimary400: string;
+            brandPrimary500: string;
+            brandPrimary550: string;
+            brandPrimary600: string;
+            brandSecondary500: string;
+            brandSecondary300: string;
+            brandSecondary600: string;
+            brandTertiary500: string;
+            brandTertiary300: string;
+            brandTertiary600: string;
+            brandQuaternary500: string;
+            brandQuaternary300: string;
+            brandQuaternary600: string;
+            brandQuinary500: string;
+            brandQuinary300: string;
+            brandQuinary600: string;
+            brandQuinary100: string;
+            surfacePrimary: string;
+            surfaceSecondary: string;
+            containerPrimary: string;
+            containerSecondary: string;
+            textPrimary: string;
+            textSecondary: string;
+            textTertiary: string;
+            textQuaternary: string;
+            textBrand: string;
+            elementsPrimary: string;
+            elementsSecondary: string;
+            elementsTertiary: string;
+            elementsQuaternary: string;
+            elementsQuinary: string;
+            elementsDarkQuinary: string;
+            elementsSenary: string;
+            elementsOnContainer: string;
+            transparencyPrimary: string;
+            transparencySecondary: string;
+            transparencyTertiary: string;
+            transparencyQuinary: string;
+            transparencyModal: string;
+            staticBlack: string;
+            staticDarkGrey: string;
+            staticWhite: string;
+            staticRed: string;
+            staticOrange: string;
+            staticGreen: string;
+            staticErrorAccent: string;
+            shadowDepth2: string;
             fontFamily: string;
             fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
             cubicBezierEaseInOut: string;
             cubicBezierEaseOut: string;
             cubicBezierEaseIn: string;
-            borderWidth: number;
-            borderTagWidth: number;
+            borderRadiusLarge: string;
             borderRadius: string;
+            borderRadiusMedium: string;
             borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
+            borderRadiusTiny: string;
             heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
             heightHuge: string;
+            fontDisplayLarge: string;
+            fontDisplaySmall: string;
+            fontHeadingLarge: string;
+            fontHeadingMedium: string;
+            fontHeadingSmall: string;
+            fontTitleLarge: string;
+            fontTitleMedium: string;
+            fontTitleSmall: string;
+            fontBodyLarge: string;
+            fontBodyMedium: string;
+            fontBodySmall: string;
+            lineHeightDisplayLarge: string;
+            lineHeightDisplaySmall: string;
+            lineHeightHeadingLarge: string;
+            lineHeightHeadingMedium: string;
+            lineHeightHeadingSmall: string;
+            lineHeightTitleLarge: string;
+            lineHeightTitleMedium: string;
+            lineHeightTitleSmall: string;
+            lineHeightBodyLarge: string;
+            lineHeightBodyMedium: string;
+            lineHeightBodySmall: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            fontWeightBold: string;
+            iconSmall: string;
+            iconMedium: string;
+            iconLarge: string;
+            iconHuge: string;
+            closeSmall: string;
+            closeMedium: string;
+            closeLarge: string;
+            closeHuge: string;
+            closeBorderRadius: string;
             name: "common";
         };
         self: {
@@ -270,9 +259,6 @@ export declare const USubmenu: import("vue").DefineComponent<{
         };
         peers: {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
-                borderRadius: string;
-                color: string;
-                textColor: string;
                 padding: string;
                 textPadding: string;
                 titleSize: string;
@@ -285,23 +271,47 @@ export declare const USubmenu: import("vue").DefineComponent<{
                 iconSize: string;
                 arrowSpace: string;
                 noArrowSpace: string;
+                borderRadius: string;
+                color: string;
+                textColor: string;
             }, {
                 Popover: import("../../_mixins").Theme<"Popover", {
-                    fontSize: string;
-                    borderRadius: string;
-                    color: string;
-                    dividerColor: string;
-                    textColor: string;
-                    boxShadow: string;
                     space: string;
                     spaceArrow: string;
                     arrowOffset: string;
                     arrowOffsetVertical: string;
                     arrowHeight: string;
                     padding: string;
+                    fontSize: string;
+                    borderRadius: string;
+                    color: string;
+                    dividerColor: string;
+                    textColor: string;
+                    boxShadow: string;
                 }, any>;
             }>;
             Dropdown: import("../../_mixins").Theme<"Dropdown", {
+                padding: string;
+                optionIconSizeSmall: string;
+                optionIconSizeMedium: string;
+                optionIconSizeLarge: string;
+                optionIconSizeHuge: string;
+                optionSuffixWidthSmall: string;
+                optionSuffixWidthMedium: string;
+                optionSuffixWidthLarge: string;
+                optionSuffixWidthHuge: string;
+                optionIconSuffixWidthSmall: string;
+                optionIconSuffixWidthMedium: string;
+                optionIconSuffixWidthLarge: string;
+                optionIconSuffixWidthHuge: string;
+                optionPrefixWidthSmall: string;
+                optionPrefixWidthMedium: string;
+                optionPrefixWidthLarge: string;
+                optionPrefixWidthHuge: string;
+                optionIconPrefixWidthSmall: string;
+                optionIconPrefixWidthMedium: string;
+                optionIconPrefixWidthLarge: string;
+                optionIconPrefixWidthHuge: string;
                 optionHeightSmall: string;
                 optionHeightMedium: string;
                 optionHeightLarge: string;
@@ -311,6 +321,8 @@ export declare const USubmenu: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 fontSizeHuge: string;
+                optionOpacityDisabled: string;
+                optionGroupHeaderBorderColor: string;
                 optionTextColor: string;
                 optionTextColorHover: string;
                 optionTextColorActive: string;
@@ -333,43 +345,20 @@ export declare const USubmenu: import("vue").DefineComponent<{
                 optionColorHoverInverted: string;
                 optionColorActiveInverted: string;
                 groupHeaderTextColorInverted: string;
-                optionOpacityDisabled: string;
-                optionGroupHeaderBorderColor: string;
-                padding: string;
-                optionIconSizeSmall: string;
-                optionIconSizeMedium: string;
-                optionIconSizeLarge: string;
-                optionIconSizeHuge: string;
-                optionSuffixWidthSmall: string;
-                optionSuffixWidthMedium: string;
-                optionSuffixWidthLarge: string;
-                optionSuffixWidthHuge: string;
-                optionIconSuffixWidthSmall: string;
-                optionIconSuffixWidthMedium: string;
-                optionIconSuffixWidthLarge: string;
-                optionIconSuffixWidthHuge: string;
-                optionPrefixWidthSmall: string;
-                optionPrefixWidthMedium: string;
-                optionPrefixWidthLarge: string;
-                optionPrefixWidthHuge: string;
-                optionIconPrefixWidthSmall: string;
-                optionIconPrefixWidthMedium: string;
-                optionIconPrefixWidthLarge: string;
-                optionIconPrefixWidthHuge: string;
             }, {
                 Popover: import("../../_mixins").Theme<"Popover", {
-                    fontSize: string;
-                    borderRadius: string;
-                    color: string;
-                    dividerColor: string;
-                    textColor: string;
-                    boxShadow: string;
                     space: string;
                     spaceArrow: string;
                     arrowOffset: string;
                     arrowOffsetVertical: string;
                     arrowHeight: string;
                     padding: string;
+                    fontSize: string;
+                    borderRadius: string;
+                    color: string;
+                    dividerColor: string;
+                    textColor: string;
+                    boxShadow: string;
                 }, any>;
             }>;
         };
@@ -377,36 +366,36 @@ export declare const USubmenu: import("vue").DefineComponent<{
             Tooltip?: {
                 peers?: {
                     Popover?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
-                        fontSize: string;
-                        borderRadius: string;
-                        color: string;
-                        dividerColor: string;
-                        textColor: string;
-                        boxShadow: string;
                         space: string;
                         spaceArrow: string;
                         arrowOffset: string;
                         arrowOffsetVertical: string;
                         arrowHeight: string;
                         padding: string;
-                    }, any>> | undefined;
-                } | undefined;
-            } | undefined;
-            Dropdown?: {
-                peers?: {
-                    Popover?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
                         fontSize: string;
                         borderRadius: string;
                         color: string;
                         dividerColor: string;
                         textColor: string;
                         boxShadow: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
+            Dropdown?: {
+                peers?: {
+                    Popover?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
                         space: string;
                         spaceArrow: string;
                         arrowOffset: string;
                         arrowOffsetVertical: string;
                         arrowHeight: string;
                         padding: string;
+                        fontSize: string;
+                        borderRadius: string;
+                        color: string;
+                        dividerColor: string;
+                        textColor: string;
+                        boxShadow: string;
                     }, any>> | undefined;
                 } | undefined;
             } | undefined;

package/es/menu/styles/dark.js

@@ -1,4 +1,3 @@
-import { changeColor } from 'seemly';
 import { tooltipDark } from '../../tooltip/styles';
 import { dropdownDark } from '../../dropdown/styles';
 import { commonDark } from '../../_styles/common';
@@ -10,18 +9,6 @@ const menuDark = {
         Tooltip: tooltipDark,
         Dropdown: dropdownDark
     },
-    self(vars) {
-        const { primaryColor, primaryColorSuppl } = vars;
-        const commonSelf = self(vars);
-        commonSelf.itemColorActive = changeColor(primaryColor, { alpha: 0.15 });
-        commonSelf.itemColorActiveHover = changeColor(primaryColor, { alpha: 0.15 });
-        commonSelf.itemColorActiveCollapsed = changeColor(primaryColor, {
-            alpha: 0.15
-        });
-        commonSelf.itemColorActiveInverted = primaryColorSuppl;
-        commonSelf.itemColorActiveHoverInverted = primaryColorSuppl;
-        commonSelf.itemColorActiveCollapsedInverted = primaryColorSuppl;
-        return commonSelf;
-    }
+    self
 };
 export default menuDark;

package/es/menu/styles/light.d.ts

@@ -201,9 +201,6 @@ declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
     dividerColor: string;
 }, {
     Tooltip: import("../../_mixins/use-theme").Theme<"Tooltip", {
-        borderRadius: string;
-        color: string;
-        textColor: string;
         padding: string;
         textPadding: string;
         titleSize: string;
@@ -216,23 +213,47 @@ declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
         iconSize: string;
         arrowSpace: string;
         noArrowSpace: string;
+        borderRadius: string;
+        color: string;
+        textColor: string;
     }, {
         Popover: import("../../_mixins/use-theme").Theme<"Popover", {
-            fontSize: string;
-            borderRadius: string;
-            color: string;
-            dividerColor: string;
-            textColor: string;
-            boxShadow: string;
             space: string;
             spaceArrow: string;
             arrowOffset: string;
             arrowOffsetVertical: string;
             arrowHeight: string;
             padding: string;
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
         }, any>;
     }>;
     Dropdown: import("../../_mixins/use-theme").Theme<"Dropdown", {
+        padding: string;
+        optionIconSizeSmall: string;
+        optionIconSizeMedium: string;
+        optionIconSizeLarge: string;
+        optionIconSizeHuge: string;
+        optionSuffixWidthSmall: string;
+        optionSuffixWidthMedium: string;
+        optionSuffixWidthLarge: string;
+        optionSuffixWidthHuge: string;
+        optionIconSuffixWidthSmall: string;
+        optionIconSuffixWidthMedium: string;
+        optionIconSuffixWidthLarge: string;
+        optionIconSuffixWidthHuge: string;
+        optionPrefixWidthSmall: string;
+        optionPrefixWidthMedium: string;
+        optionPrefixWidthLarge: string;
+        optionPrefixWidthHuge: string;
+        optionIconPrefixWidthSmall: string;
+        optionIconPrefixWidthMedium: string;
+        optionIconPrefixWidthLarge: string;
+        optionIconPrefixWidthHuge: string;
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
@@ -242,6 +263,8 @@ declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
         fontSizeMedium: string;
         fontSizeLarge: string;
         fontSizeHuge: string;
+        optionOpacityDisabled: string;
+        optionGroupHeaderBorderColor: string;
         optionTextColor: string;
         optionTextColorHover: string;
         optionTextColorActive: string;
@@ -264,43 +287,20 @@ declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
         optionColorHoverInverted: string;
         optionColorActiveInverted: string;
         groupHeaderTextColorInverted: string;
-        optionOpacityDisabled: string;
-        optionGroupHeaderBorderColor: string;
-        padding: string;
-        optionIconSizeSmall: string;
-        optionIconSizeMedium: string;
-        optionIconSizeLarge: string;
-        optionIconSizeHuge: string;
-        optionSuffixWidthSmall: string;
-        optionSuffixWidthMedium: string;
-        optionSuffixWidthLarge: string;
-        optionSuffixWidthHuge: string;
-        optionIconSuffixWidthSmall: string;
-        optionIconSuffixWidthMedium: string;
-        optionIconSuffixWidthLarge: string;
-        optionIconSuffixWidthHuge: string;
-        optionPrefixWidthSmall: string;
-        optionPrefixWidthMedium: string;
-        optionPrefixWidthLarge: string;
-        optionPrefixWidthHuge: string;
-        optionIconPrefixWidthSmall: string;
-        optionIconPrefixWidthMedium: string;
-        optionIconPrefixWidthLarge: string;
-        optionIconPrefixWidthHuge: string;
     }, {
         Popover: import("../../_mixins/use-theme").Theme<"Popover", {
-            fontSize: string;
-            borderRadius: string;
-            color: string;
-            dividerColor: string;
-            textColor: string;
-            boxShadow: string;
             space: string;
             spaceArrow: string;
             arrowOffset: string;
             arrowOffsetVertical: string;
             arrowHeight: string;
             padding: string;
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
         }, any>;
     }>;
 }>;

package/es/menu/styles/light.js

@@ -1,4 +1,3 @@
-import { changeColor } from 'seemly';
 import { tooltipLight } from '../../tooltip/styles';
 import { dropdownLight } from '../../dropdown/styles';
 import { commonLight } from '../../_styles/common';
@@ -44,9 +43,8 @@ export function createPartialInvertedVars(color, activeItemColor, activeTextColo
     };
 }
 export const self = (vars) => {
-    const { borderRadius, textColor3, primaryColor, textColor2, textColor1, fontSize, dividerColor, hoverColor, primaryColorHover } = vars;
-    return Object.assign({ borderRadius, color: '#0000', groupTextColor: textColor3, itemColorHover: hoverColor, itemColorActive: changeColor(primaryColor, { alpha: 0.1 }), itemColorActiveHover: changeColor(primaryColor, { alpha: 0.1 }), itemColorActiveCollapsed: changeColor(primaryColor, { alpha: 0.1 }), itemTextColor: textColor2, itemTextColorHover: textColor2, itemTextColorActive: primaryColor, itemTextColorActiveHover: primaryColor, itemTextColorChildActive: primaryColor, itemTextColorChildActiveHover: primaryColor, itemTextColorHorizontal: textColor2, itemTextColorHoverHorizontal: primaryColorHover, itemTextColorActiveHorizontal: primaryColor, itemTextColorActiveHoverHorizontal: primaryColor, itemTextColorChildActiveHorizontal: primaryColor, itemTextColorChildActiveHoverHorizontal: primaryColor, itemIconColor: textColor1, itemIconColorHover: textColor1, itemIconColorActive: primaryColor, itemIconColorActiveHover: primaryColor, itemIconColorChildActive: primaryColor, itemIconColorChildActiveHover: primaryColor, itemIconColorCollapsed: textColor1, itemIconColorHorizontal: textColor1, itemIconColorHoverHorizontal: primaryColorHover, itemIconColorActiveHorizontal: primaryColor, itemIconColorActiveHoverHorizontal: primaryColor, itemIconColorChildActiveHorizontal: primaryColor, itemIconColorChildActiveHoverHorizontal: primaryColor, itemHeight: '42px', arrowColor: textColor2, arrowColorHover: textColor2, arrowColorActive: primaryColor, arrowColorActiveHover: primaryColor, arrowColorChildActive: primaryColor, arrowColorChildActiveHover: primaryColor, colorInverted: '#0000', borderColorHorizontal: '#0000', fontSize,
-        dividerColor }, createPartialInvertedVars('#BBB', primaryColor, '#FFF', '#AAA'));
+    const { textSecondary, borderRadiusSmall, textTertiary, containerPrimary, textPrimary, elementsPrimary, elementsQuaternary, fontBodyMedium, brandPrimary500, containerSecondary } = vars;
+    return Object.assign({ borderRadius: borderRadiusSmall, color: '#0000', groupTextColor: textTertiary, itemColorHover: containerSecondary, itemColorActive: containerPrimary, itemColorActiveHover: containerPrimary, itemColorActiveCollapsed: containerPrimary, itemTextColor: textPrimary, itemTextColorHover: textPrimary, itemTextColorActive: brandPrimary500, itemTextColorActiveHover: brandPrimary500, itemTextColorChildActive: brandPrimary500, itemTextColorChildActiveHover: brandPrimary500, itemTextColorHorizontal: textPrimary, itemTextColorHoverHorizontal: textPrimary, itemTextColorActiveHorizontal: brandPrimary500, itemTextColorActiveHoverHorizontal: brandPrimary500, itemTextColorChildActiveHorizontal: brandPrimary500, itemTextColorChildActiveHoverHorizontal: brandPrimary500, itemIconColor: textPrimary, itemIconColorHover: textPrimary, itemIconColorActive: brandPrimary500, itemIconColorActiveHover: brandPrimary500, itemIconColorChildActive: brandPrimary500, itemIconColorChildActiveHover: brandPrimary500, itemIconColorCollapsed: textPrimary, itemIconColorHorizontal: textPrimary, itemIconColorHoverHorizontal: textPrimary, itemIconColorActiveHorizontal: brandPrimary500, itemIconColorActiveHoverHorizontal: brandPrimary500, itemIconColorChildActiveHorizontal: brandPrimary500, itemIconColorChildActiveHoverHorizontal: brandPrimary500, itemHeight: '40px', arrowColor: elementsPrimary, arrowColorHover: elementsPrimary, arrowColorActive: brandPrimary500, arrowColorActiveHover: brandPrimary500, arrowColorChildActive: brandPrimary500, arrowColorChildActiveHover: brandPrimary500, colorInverted: '#0000', borderColorHorizontal: elementsQuaternary, fontSize: fontBodyMedium, dividerColor: elementsQuaternary }, createPartialInvertedVars(textSecondary, elementsPrimary, brandPrimary500, textSecondary));
 };
 const menuLight = createTheme({
     name: 'Menu',

package/es/message/src/Message.d.ts

@@ -33,15 +33,10 @@ declare const _default: import("vue").DefineComponent<{
         '--u-close-icon-size': string;
         '--u-close-border-radius': string;
         '--u-close-size': string;
-        '--u-close-margin': string;
         '--u-text-color': string;
+        '--u-font-weight': string;
         '--u-color': string;
-        '--u-box-shadow': string;
-        '--u-icon-color-info': string;
-        '--u-icon-color-success': string;
-        '--u-icon-color-warning': string;
-        '--u-icon-color-error': string;
-        '--u-icon-color-loading': string;
+        '--u-icon-color': string;
         '--u-close-color-hover': string;
         '--u-close-color-pressed': string;
         '--u-close-icon-color': string;
@@ -49,6 +44,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-close-icon-color-hover': string;
         '--u-line-height': string;
         '--u-border-radius': string;
+        '--u-min-width': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;

package/es/message/src/Message.js

@@ -1,19 +1,12 @@
 import { computed, h, defineComponent, inject } from 'vue';
-import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
-import { UIconSwitchTransition, UBaseLoading, UBaseIcon, UBaseClose } from '../../_internal';
+import { InfoOutlineIcon } from '../../_internal/icons';
+import { UBaseLoading, UBaseIcon, UBaseClose } from '../../_internal';
 import { render, createKey } from '../../_utils';
 import { useConfig, useTheme, useThemeClass, useRtl } from '../../_mixins';
 import { messageLight } from '../styles';
 import { messageProps } from './message-props';
 import { messageProviderInjectionKey } from './context';
 import style from './styles/index.cssr';
-const iconRenderMap = {
-    info: () => h(InfoIcon, null),
-    success: () => h(SuccessIcon, null),
-    warning: () => h(WarningIcon, null),
-    error: () => h(ErrorIcon, null),
-    default: () => null
-};
 export default defineComponent({
     name: 'Message',
     props: Object.assign(Object.assign({}, messageProps), { render: Function }),
@@ -26,7 +19,7 @@ export default defineComponent({
         const themeRef = useTheme('Message', '-message', style, messageLight, messageProviderProps, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type } = props;
-            const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, iconColorInfo, iconColorSuccess, iconColorWarning, iconColorError, iconColorLoading, closeIconSize, closeBorderRadius, [createKey('textColor', type)]: textColor, [createKey('boxShadow', type)]: boxShadow, [createKey('color', type)]: color, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('closeIconColorHover', type)]: closeIconColorHover } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, closeIconSize, closeBorderRadius, [createKey('textColor', type)]: textColor, [createKey('color', type)]: color, [createKey('iconColor', type)]: iconColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('closeIconColorHover', type)]: closeIconColorHover, minWidth, fontWeight } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-margin': margin,
@@ -38,22 +31,18 @@ export default defineComponent({
                 '--u-close-icon-size': closeIconSize,
                 '--u-close-border-radius': closeBorderRadius,
                 '--u-close-size': closeSize,
-                '--u-close-margin': closeMargin,
                 '--u-text-color': textColor,
+                '--u-font-weight': fontWeight,
                 '--u-color': color,
-                '--u-box-shadow': boxShadow,
-                '--u-icon-color-info': iconColorInfo,
-                '--u-icon-color-success': iconColorSuccess,
-                '--u-icon-color-warning': iconColorWarning,
-                '--u-icon-color-error': iconColorError,
-                '--u-icon-color-loading': iconColorLoading,
+                '--u-icon-color': iconColor,
                 '--u-close-color-hover': closeColorHover,
                 '--u-close-color-pressed': closeColorPressed,
                 '--u-close-icon-color': closeIconColor,
                 '--u-close-icon-color-pressed': closeIconColorPressed,
                 '--u-close-icon-color-hover': closeIconColorHover,
                 '--u-line-height': lineHeight,
-                '--u-border-radius': borderRadius
+                '--u-border-radius': borderRadius,
+                '--u-min-width': minWidth
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -89,12 +78,9 @@ export default defineComponent({
                 this.rtlEnabled && `${mergedClsPrefix}-message--rtl`
             ] },
             (iconNode = createIconVNode(icon, type, mergedClsPrefix)) &&
-                showIcon ? (h("div", { class: `${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type` },
-                h(UIconSwitchTransition, null, {
-                    default: () => iconNode
-                }))) : null,
+                showIcon ? (h("div", { class: `${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type` }, iconNode)) : null,
             h("div", { class: `${mergedClsPrefix}-message__content` }, render(content)),
-            closable ? (h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-message__close`, onClick: handleClose, absolute: true })) : null))));
+            closable ? (h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-message__close`, onClick: handleClose })) : null))));
     }
 });
 function createIconVNode(icon, type, clsPrefix) {
@@ -102,7 +88,7 @@ function createIconVNode(icon, type, clsPrefix) {
         return icon();
     }
     else {
-        const innerIcon = type === 'loading' ? (h(UBaseLoading, { clsPrefix: clsPrefix, strokeWidth: 24, scale: 0.85 })) : (iconRenderMap[type]());
+        const innerIcon = type === 'loading' ? (h(UBaseLoading, { clsPrefix: clsPrefix, strokeWidth: 24, scale: 0.85 })) : (h(InfoOutlineIcon, null));
         if (!innerIcon)
             return null;
         return (h(UBaseIcon, { clsPrefix: clsPrefix, key: type }, {