@xsolla/xui-core 0.189.3 → 0.191.0

package/index.d.mts

@@ -7901,7 +7901,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             iconWrapperSize: number;
             radius: 8;
         };
-        notificationPanel: () => {
+        notificationPanel: (device?: "desktop" | "mobile") => {
             minHeight: number;
             iconFrameWidth: number;
             iconSize: number;
@@ -7912,6 +7912,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             contentGap: number;
             buttonsGap: number;
             closeButtonSize: number;
+            notificationCloseIconSize: number;
             titleFontSize: number;
             titleLineHeight: number;
             descriptionFontSize: number;
@@ -7923,6 +7924,15 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             announcementButtonsGap: number;
             announcementCloseIconSize: number;
             announcementBlurRadius: number;
+            mobileIconColumnPaddingVertical: number;
+            mobileIconColumnPaddingLeft: number;
+            mobileIconSize: number;
+            mobileBodyPaddingHorizontal: number;
+            mobileBodyPaddingVertical: number;
+            mobileBodyContentGap: number;
+            mobileNotificationActionButtonOffsetLeft: number;
+            mobileCloseColumnPaddingVertical: number;
+            mobileCloseColumnPaddingRight: number;
         };
         progress: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs" | "l" | "m" | "s") => {
             height: number;

package/index.d.ts

@@ -7901,7 +7901,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             iconWrapperSize: number;
             radius: 8;
         };
-        notificationPanel: () => {
+        notificationPanel: (device?: "desktop" | "mobile") => {
             minHeight: number;
             iconFrameWidth: number;
             iconSize: number;
@@ -7912,6 +7912,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             contentGap: number;
             buttonsGap: number;
             closeButtonSize: number;
+            notificationCloseIconSize: number;
             titleFontSize: number;
             titleLineHeight: number;
             descriptionFontSize: number;
@@ -7923,6 +7924,15 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             announcementButtonsGap: number;
             announcementCloseIconSize: number;
             announcementBlurRadius: number;
+            mobileIconColumnPaddingVertical: number;
+            mobileIconColumnPaddingLeft: number;
+            mobileIconSize: number;
+            mobileBodyPaddingHorizontal: number;
+            mobileBodyPaddingVertical: number;
+            mobileBodyContentGap: number;
+            mobileNotificationActionButtonOffsetLeft: number;
+            mobileCloseColumnPaddingVertical: number;
+            mobileCloseColumnPaddingRight: number;
         };
         progress: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs" | "l" | "m" | "s") => {
             height: number;

package/index.js

@@ -4470,30 +4470,44 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         };
         return configs[type];
       },
-      notificationPanel: () => ({
-        minHeight: 66,
-        iconFrameWidth: 54,
-        iconSize: 24,
-        borderRadius: radiusScale["100"],
-        bodyPaddingHorizontal: 16,
-        bodyPaddingVertical: 12,
-        textGap: 2,
-        contentGap: 24,
-        buttonsGap: 8,
-        closeButtonSize: 32,
-        titleFontSize: 16,
-        titleLineHeight: 20,
-        descriptionFontSize: 14,
-        descriptionLineHeight: 20,
-        // Announcement variant: slim, single-line banner
-        announcementPadding: 8,
-        announcementGap: 16,
-        announcementContentGap: 8,
-        announcementIconSize: 16,
-        announcementButtonsGap: 20,
-        announcementCloseIconSize: 16,
-        announcementBlurRadius: 4
-      }),
+      notificationPanel: (device = "desktop") => {
+        const desktop = {
+          minHeight: 66,
+          iconFrameWidth: 54,
+          iconSize: 24,
+          borderRadius: radiusScale["100"],
+          bodyPaddingHorizontal: 16,
+          bodyPaddingVertical: 12,
+          textGap: 2,
+          contentGap: 24,
+          buttonsGap: 8,
+          closeButtonSize: 32,
+          notificationCloseIconSize: 18,
+          titleFontSize: 16,
+          titleLineHeight: 20,
+          descriptionFontSize: 14,
+          descriptionLineHeight: 20,
+          // Announcement variant: slim, single-line banner
+          announcementPadding: 8,
+          announcementGap: 16,
+          announcementContentGap: 8,
+          announcementIconSize: 16,
+          announcementButtonsGap: 20,
+          announcementCloseIconSize: 16,
+          announcementBlurRadius: 4,
+          // Mobile notification: icon | content column | close column
+          mobileIconColumnPaddingVertical: 12,
+          mobileIconColumnPaddingLeft: 8,
+          mobileIconSize: 24,
+          mobileBodyPaddingHorizontal: 16,
+          mobileBodyPaddingVertical: 12,
+          mobileBodyContentGap: 24,
+          mobileNotificationActionButtonOffsetLeft: -4,
+          mobileCloseColumnPaddingVertical: 12,
+          mobileCloseColumnPaddingRight: 12
+        };
+        return desktop;
+      },
       progress: (size) => {
         const configs = {
           xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },