@uzum-tech/ui 1.8.1 → 1.9.0

package/lib/notification/src/NotificationProvider.d.ts

@@ -77,6 +77,8 @@ export declare const notificationProviderProps: {
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -88,6 +90,8 @@ export declare const notificationProviderProps: {
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -99,6 +103,8 @@ export declare const notificationProviderProps: {
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -110,6 +116,8 @@ export declare const notificationProviderProps: {
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -121,6 +129,8 @@ export declare const notificationProviderProps: {
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -132,13 +142,23 @@ export declare const notificationProviderProps: {
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
@@ -168,6 +188,8 @@ export declare const notificationProviderProps: {
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -179,6 +201,8 @@ export declare const notificationProviderProps: {
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -190,6 +214,8 @@ export declare const notificationProviderProps: {
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -201,6 +227,8 @@ export declare const notificationProviderProps: {
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -212,6 +240,8 @@ export declare const notificationProviderProps: {
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -223,13 +253,23 @@ export declare const notificationProviderProps: {
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
@@ -259,6 +299,8 @@ export declare const notificationProviderProps: {
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -270,6 +312,8 @@ export declare const notificationProviderProps: {
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -281,6 +325,8 @@ export declare const notificationProviderProps: {
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -292,6 +338,8 @@ export declare const notificationProviderProps: {
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -303,6 +351,8 @@ export declare const notificationProviderProps: {
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -314,13 +364,23 @@ export declare const notificationProviderProps: {
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>>;
 };
@@ -365,6 +425,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -376,6 +438,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -387,6 +451,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -398,6 +464,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -409,6 +477,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -420,13 +490,23 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
@@ -456,6 +536,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -467,6 +549,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -478,6 +562,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -489,6 +575,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -500,6 +588,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -511,13 +601,23 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
@@ -547,6 +647,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -558,6 +660,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -569,6 +673,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -580,6 +686,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -591,6 +699,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -602,13 +712,23 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>>;
 }, {
@@ -690,6 +810,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -701,6 +823,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -712,6 +836,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -723,6 +849,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -734,6 +862,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -745,13 +875,23 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
@@ -781,6 +921,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -792,6 +934,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -803,6 +947,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -814,6 +960,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -825,6 +973,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -836,13 +986,23 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Notification", {
@@ -872,6 +1032,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColor: string;
         descriptionTextColor: string;
         actionTextColor: string;
+        iconWrapperColor: string;
+        iconWrapperPulseColor: string;
         colorSuccess: string;
         iconColorSuccess: string;
         textColorSuccess: string;
@@ -883,6 +1045,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorSuccess: string;
         descriptionTextColorSuccess: string;
         actionTextColorSuccess: string;
+        iconWrapperColorSuccess: string;
+        iconWrapperPulseColorSuccess: string;
         colorInfo: string;
         iconColorInfo: string;
         textColorInfo: string;
@@ -894,6 +1058,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorInfo: string;
         descriptionTextColorInfo: string;
         actionTextColorInfo: string;
+        iconWrapperColorInfo: string;
+        iconWrapperPulseColorInfo: string;
         colorWarning: string;
         iconColorWarning: string;
         textColorWarning: string;
@@ -905,6 +1071,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorWarning: string;
         descriptionTextColorWarning: string;
         actionTextColorWarning: string;
+        iconWrapperColorWarning: string;
+        iconWrapperPulseColorWarning: string;
         colorError: string;
         iconColorError: string;
         textColorError: string;
@@ -916,6 +1084,8 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorError: string;
         descriptionTextColorError: string;
         actionTextColorError: string;
+        iconWrapperColorError: string;
+        iconWrapperPulseColorError: string;
         colorPrimary: string;
         iconColorPrimary: string;
         textColorPrimary: string;
@@ -927,13 +1097,23 @@ declare const _default: import("vue").DefineComponent<{
         titleTextColorPrimary: string;
         descriptionTextColorPrimary: string;
         actionTextColorPrimary: string;
+        iconWrapperColorPrimary: string;
+        iconWrapperPulseColorPrimary: string;
         width: string;
         padding: string;
         closeBorderRadius: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
     }>>>;
 }>>, {

package/lib/notification/src/styles/index.cssr.js

@@ -134,6 +134,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
+ padding-top: var(--u-padding-top);
+ padding-bottom: var(--u-padding-bottom);
  padding-left: var(--u-padding-left);
  padding-right: var(--u-padding-right);
  width: var(--u-width);
@@ -143,12 +145,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  border-radius: var(--u-border-radius);
  box-sizing: border-box;
  opacity: 1;
- `, [(0, cssr_1.cE)('avatar', [(0, cssr_1.cB)('icon', {
+ box-shadow: 0 0 20px 0 rgba(68, 83, 113, 0.10), 0 12px 20px 0 rgba(68, 83, 113, 0.05);
+ `, [(0, cssr_1.cE)('avatar', [(0, cssr_1.cB)('icon-wrapper', `
+ `), (0, cssr_1.cB)('icon', {
   color: 'var(--u-icon-color)'
 }), (0, cssr_1.cB)('base-icon', {
   color: 'var(--u-icon-color)'
 })]), (0, cssr_1.cM)('show-avatar', [(0, cssr_1.cB)('notification-main', `
- margin-left: calc(var(--u-avatar-size) + 16px);
+ margin-left: 16px;
  width: calc(100% - var(--u-avatar-size) + 16px); 
  `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('notification-main', [(0, cssr_1.c)('> *:first-child', `
  padding-right: var(--u-close-size);
@@ -161,9 +165,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier);
  `)]), (0, cssr_1.cE)('avatar', `
- position: absolute;
- top: var(--u-padding-top);
- left: var(--u-padding-left);
+ position: relative;
  width: var(--u-avatar-size);
  height: var(--u-avatar-size);
  font-size: var(--u-avatar-size);
@@ -171,18 +173,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  align-items: center;
  justify-content: center;
  `, [(0, cssr_1.cB)('icon', 'transition: color .3s var(--u-bezier);')]), (0, cssr_1.cB)('notification-main', `
- padding-top: var(--u-padding-top);
- padding-bottom: var(--u-padding-bottom);
+ padding-top: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-left: 8px;
  width: calc(100% - 8px);
+ justify-content: center;
  `, [(0, cssr_1.cB)('notification-main-footer', `
  display: flex;
  align-items: center;
  justify-content: space-between;
- margin-top: 12px;
+ margin-top: 8px;
  `, [(0, cssr_1.cE)('meta', `
  font-size: var(--u-meta-font-size);
  transition: color .3s var(--u-bezier-ease-out);
@@ -191,6 +193,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  cursor: pointer;
  transition: color .3s var(--u-bezier-ease-out);
  color: var(--u-action-text-color);
+ width: 100%;
+ margin-top: 16px;
  `)]), (0, cssr_1.cE)('header', `
  font-weight: var(--u-title-font-weight);
  font-size: var(--u-title-font-size);