npm - @xsolla/xui-b2b-notification-panel - Versions diffs - 0.196.1 → 0.197.1 - Mend

@xsolla/xui-b2b-notification-panel 0.196.1 → 0.197.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/web/index.js CHANGED Viewed

@@ -83,7 +83,11 @@ var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
   "fontSize",
   "fontWeight",
   "fontFamily",
-  "textDecoration"
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
 ]);
 function shouldForwardProp(key) {
   if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
@@ -294,6 +298,7 @@ var import_xui_button = require("@xsolla/xui-button");
 var import_xui_typography = require("@xsolla/xui-typography");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var ICON_TEST_ID = "notification-panel-icon";
 var NotificationPanel = ({
   variant = "notification",
   device = "desktop",
@@ -318,6 +323,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.alert.secondary,
       iconFrameBg: theme.colors.overlay.alert,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.primary,
       buttonTone: "alert",
       IconComponent: import_xui_icons_base.ExclamationMarkSq
     },
@@ -326,6 +332,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.warning.secondary,
       iconFrameBg: theme.colors.background.warning.primary,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.static.dark,
       buttonTone: "mono",
       IconComponent: import_xui_icons_base.ExclamationMarkSq
     },
@@ -334,6 +341,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.success.secondary,
       iconFrameBg: theme.colors.background.success.primary,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.static.dark,
       buttonTone: "brandExtra",
       IconComponent: import_xui_icons_base.CheckCr
     },
@@ -342,6 +350,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.neutral.secondary,
       iconFrameBg: theme.colors.overlay.mono,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.primary,
       buttonTone: "mono",
       IconComponent: import_xui_icons_base.InfoSq
     },
@@ -350,6 +359,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.brand.secondary,
       iconFrameBg: theme.colors.overlay.brand,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.primary,
       buttonTone: "brand",
       IconComponent: import_xui_icons_base.InfoSq
     }
@@ -429,7 +439,8 @@ var NotificationPanel = ({
                           {
                             size: config.announcementIconSize,
                             color: currentConfig.iconColor,
-                            variant: "solid"
+                            variant: "solid",
+                            "data-testid": ICON_TEST_ID
                           }
                         )),
                         title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -505,7 +516,8 @@ var NotificationPanel = ({
                   {
                     size: config.announcementIconSize,
                     color: currentConfig.iconColor,
-                    variant: "solid"
+                    variant: "solid",
+                    "data-testid": ICON_TEST_ID
                   }
                 )),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -586,7 +598,8 @@ var NotificationPanel = ({
                 {
                   size: config.mobileIconSize,
                   color: currentConfig.iconColor,
-                  variant: "solid"
+                  variant: "solid",
+                  "data-testid": ICON_TEST_ID
                 }
               )
             }
@@ -668,8 +681,9 @@ var NotificationPanel = ({
               IconComponent,
               {
                 size: config.iconSize,
-                color: currentConfig.iconColor,
-                variant: "solid"
+                color: currentConfig.frameIconColor,
+                variant: "solid",
+                "data-testid": ICON_TEST_ID
               }
             )
           }

package/web/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../../foundation/primitives-web/src/Box.tsx","../../../../foundation/primitives-web/src/filterDOMProps.ts","../../../../../node_modules/@emotion/memoize/dist/memoize.esm.js","../../../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type {\n NotificationPanelProps,\n NotificationPanelDevice,\n ActionButtonElement,\n} from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n IconButton,\n type ButtonProps,\n type IconButtonProps,\n type FlexButtonProps,\n} from \"@xsolla/xui-button\";\nimport { Typography } from \"@xsolla/xui-typography\";\nimport {\n ExclamationMarkSq,\n InfoSq,\n CheckCr,\n Remove,\n type BaseIconComponent,\n} from \"@xsolla/xui-icons-base\";\n\nexport type ActionButtonElement = React.ReactElement<\n ButtonProps \| IconButtonProps \| FlexButtonProps\n>;\n\nexport type NotificationPanelDevice = \"desktop\" \| \"mobile\";\n\nexport interface NotificationPanelProps extends ThemeOverrideProps {\n /*\n Layout variant.\n * - `notification` (default): full-height banner with an icon frame and a\n * stacked title/description.\n * - `announcement`: slim, single-line bar with an inline icon and the\n * title/description on one row.\n /\n variant?: \"notification\" \| \"announcement\";\n /\n Device layout mode.\n * - `desktop` (default): horizontal layout with actions on the right.\n * - `mobile`: Figma mobile layout — `notification` uses a three-column row\n * (icon \| stacked text + action \| close); `announcement` puts icon, title,\n * on one row with description below; action and close are grouped on the\n * right, top-aligned with the title row.\n /\n device?: NotificationPanelDevice;\n /* Visual variant/tone of the notification /\n type?: \"alert\" \| \"warning\" \| \"success\" \| \"neutral\" \| \"brand\";\n /* Title text (optional) /\n title?: string;\n /* Description text (optional) /\n description?: string;\n /* Show/hide the icon frame /\n showIcon?: boolean;\n /* Custom icon override (optional) /\n icon?: React.ReactNode;\n /\n Action button (optional - pass any Button/IconButton/FlexButton component).\n * `size` — plus `variant` and `background` for non-IconButton actions — falls\n * back to a panel default, but any value you set on the button element itself\n * takes precedence. `tone` is never overridden by the panel.\n /\n actionButton?: React.ReactElement;\n /* Show/hide close button /\n showCloseButton?: boolean;\n /* Close button click handler /\n onClose?: () => void;\n /\n Vertical alignment of the action/close button group — \"center\" (default) or\n * \"top\". Applies to the desktop `notification` variant only.\n /\n closeButtonAlign?: \"center\" \| \"top\";\n testID?: string;\n}\n\nexport const NotificationPanel: React.FC<NotificationPanelProps> = ({\n variant = \"notification\",\n device = \"desktop\",\n type = \"neutral\",\n title,\n description,\n showIcon = true,\n icon,\n actionButton,\n showCloseButton = true,\n onClose,\n closeButtonAlign = \"center\",\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel(device);\n\n const typeConfig: Record<\n NonNullable<NotificationPanelProps[\"type\"]>,\n {\n panelBg: string;\n /* Background of the slim announcement bar (and inline icon area). /\n announcementBg: string;\n iconFrameBg: string;\n iconColor: string;\n buttonTone: \"brand\" \| \"brandExtra\" \| \"alert\" \| \"mono\";\n IconComponent: BaseIconComponent;\n }\n > = {\n alert: {\n panelBg: theme.colors.overlay.alert,\n announcementBg: theme.colors.background.alert.secondary,\n iconFrameBg: theme.colors.overlay.alert,\n iconColor: theme.colors.content.primary,\n buttonTone: \"alert\",\n IconComponent: ExclamationMarkSq,\n },\n warning: {\n panelBg: theme.colors.overlay.warning,\n announcementBg: theme.colors.background.warning.secondary,\n iconFrameBg: theme.colors.background.warning.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: ExclamationMarkSq,\n },\n success: {\n panelBg: theme.colors.overlay.success,\n announcementBg: theme.colors.background.success.secondary,\n iconFrameBg: theme.colors.background.success.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brandExtra\",\n IconComponent: CheckCr,\n },\n neutral: {\n panelBg: theme.colors.overlay.mono,\n announcementBg: theme.colors.background.neutral.secondary,\n iconFrameBg: theme.colors.overlay.mono,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: InfoSq,\n },\n brand: {\n panelBg: theme.colors.overlay.brand,\n announcementBg: theme.colors.background.brand.secondary,\n iconFrameBg: theme.colors.overlay.brand,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brand\",\n IconComponent: InfoSq,\n },\n };\n\n const currentConfig = typeConfig[type];\n const IconComponent = currentConfig.IconComponent;\n\n const ariaProps = {\n role: type === \"alert\" ? \"alert\" : \"status\",\n \"aria-label\": `${type} ${variant} ${device}`,\n } as const;\n\n // IconButton (Box-based) stays RN-safe; FlexButton is web-DOM-only.\n const renderCloseButton = (iconSize: number) =>\n showCloseButton ? (\n <IconButton\n variant=\"tertiary\"\n tone=\"mono\"\n size=\"xs\"\n onPress={onClose}\n aria-label=\"Close notification\"\n icon={<Remove size={iconSize} />}\n hoverBackground=\"none\"\n />\n ) : null;\n\n const renderActionButton = () => {\n if (!isValidElement(actionButton)) return null;\n\n const element = actionButton as ActionButtonElement;\n const isIconButton =\n (element.type as { displayName?: string }).displayName === \"IconButton\";\n\n // Caller-supplied props on the element win; the values below are defaults\n // applied only when the caller omits them. (Previously they were hard-coded,\n // and cloneElement's second argument overrides the element's own props, so a\n // passed-in size/variant was silently ignored.)\n const props = element.props as Partial<\n ButtonProps & IconButtonProps & FlexButtonProps\n >;\n\n return cloneElement(\n element,\n isIconButton\n ? { size: props.size ?? \"xs\" }\n : {\n size: props.size ?? \"xs\",\n // Non-IconButton actions default to a text-only FlexButton (Primary\n // palette → content.primary text, no fill), per the Figma \"Flex\n // Button\" node. hoverBackground is left at its default so the subtle\n // mono hover overlay from the design is preserved.\n variant: props.variant ?? \"primary\",\n background: props.background ?? false,\n }\n );\n };\n\n if (variant === \"announcement\") {\n const isMobileAnnouncement = device === \"mobile\";\n\n if (isMobileAnnouncement) {\n const descriptionIndent = showIcon\n ? config.announcementIconSize + config.announcementContentGap\n : 0;\n\n return (\n <Box\n backgroundColor={currentConfig.announcementBg}\n flexDirection=\"row\"\n alignItems=\"stretch\"\n padding={config.announcementPadding}\n gap={config.announcementGap}\n overflow=\"hidden\"\n testID={testID}\n style={{\n backdropFilter: `blur(${config.announcementBlurRadius}px)`,\n }}\n {...ariaProps}\n >\n <Box\n flex={1}\n minWidth={0}\n flexDirection=\"column\"\n gap={config.textGap}\n >\n <Box\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={config.announcementContentGap}\n >\n {showIcon &&\n (icon \|\| (\n <IconComponent\n size={config.announcementIconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n ))}\n {title && (\n <Box flex={1} minWidth={0}>\n <Typography\n variant=\"bodyXsAccent\"\n color={theme.colors.content.primary}\n noWrap\n >\n {title}\n </Typography>\n </Box>\n )}\n </Box>\n\n {description && (\n <Box paddingLeft={descriptionIndent}>\n <Typography\n variant=\"bodyXs\"\n color={theme.colors.content.secondary}\n noWrap\n >\n {description}\n </Typography>\n </Box>\n )}\n </Box>\n\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexShrink={0}\n alignSelf=\"flex-start\"\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementButtonsGap}\n >\n {renderActionButton()}\n {renderCloseButton(config.announcementCloseIconSize)}\n </Box>\n )}\n </Box>\n );\n }\n\n return (\n <Box\n backgroundColor={currentConfig.announcementBg}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n padding={config.announcementPadding}\n gap={config.announcementGap}\n overflow=\"hidden\"\n testID={testID}\n style={{\n backdropFilter: `blur(${config.announcementBlurRadius}px)`,\n }}\n {...ariaProps}\n >\n <Box\n flex={1}\n minWidth={0}\n overflow=\"hidden\"\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementContentGap}\n >\n {showIcon &&\n (icon \|\| (\n <IconComponent\n size={config.announcementIconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n ))}\n <Box\n flex={1}\n minWidth={0}\n overflow=\"hidden\"\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementContentGap}\n >\n {title && (\n <Typography\n variant=\"bodyXsAccent\"\n color={theme.colors.content.primary}\n noWrap\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography\n variant=\"bodyXs\"\n color={theme.colors.content.secondary}\n noWrap\n >\n {description}\n </Typography>\n )}\n </Box>\n </Box>\n\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexShrink={0}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementButtonsGap}\n >\n {renderActionButton()}\n {renderCloseButton(config.announcementCloseIconSize)}\n </Box>\n )}\n </Box>\n );\n }\n\n if (device === \"mobile\") {\n return (\n <Box\n backgroundColor={currentConfig.panelBg}\n borderRadius={config.borderRadius}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n justifyContent=\"space-between\"\n overflow=\"hidden\"\n testID={testID}\n {...ariaProps}\n >\n {showIcon && (\n <Box\n alignSelf=\"stretch\"\n paddingTop={config.mobileIconColumnPaddingVertical}\n paddingBottom={config.mobileIconColumnPaddingVertical}\n paddingLeft={config.mobileIconColumnPaddingLeft}\n alignItems=\"flex-start\"\n justifyContent=\"flex-start\"\n >\n {icon \|\| (\n <IconComponent\n size={config.mobileIconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n )}\n </Box>\n )}\n\n <Box\n flex={1}\n minWidth={0}\n paddingHorizontal={config.mobileBodyPaddingHorizontal}\n paddingVertical={config.mobileBodyPaddingVertical}\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n justifyContent=\"center\"\n gap={config.mobileBodyContentGap}\n >\n {(title \|\| description) && (\n <Box alignSelf=\"stretch\" gap={config.textGap}>\n {title && (\n <Typography\n variant=\"bodySmAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography\n variant=\"bodyXs\"\n color={theme.colors.content.tertiary}\n >\n {description}\n </Typography>\n )}\n </Box>\n )}\n\n {actionButton && (\n <Box marginLeft={config.mobileNotificationActionButtonOffsetLeft}>\n {renderActionButton()}\n </Box>\n )}\n </Box>\n\n {showCloseButton && (\n <Box\n alignSelf=\"stretch\"\n flexDirection=\"row\"\n paddingTop={config.mobileCloseColumnPaddingVertical}\n paddingBottom={config.mobileCloseColumnPaddingVertical}\n paddingRight={config.mobileCloseColumnPaddingRight}\n alignItems=\"flex-start\"\n justifyContent=\"flex-end\"\n >\n {renderCloseButton(config.notificationCloseIconSize)}\n </Box>\n )}\n </Box>\n );\n }\n\n return (\n <Box\n backgroundColor={currentConfig.panelBg}\n borderRadius={config.borderRadius}\n flexDirection=\"row\"\n alignItems=\"stretch\"\n overflow=\"hidden\"\n testID={testID}\n {...ariaProps}\n >\n {/ Icon Frame /}\n {showIcon && (\n <Box\n backgroundColor={currentConfig.iconFrameBg}\n width={config.iconFrameWidth}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={{\n borderTopLeftRadius: config.borderRadius,\n borderBottomLeftRadius: config.borderRadius,\n }}\n >\n {icon \|\| (\n <IconComponent\n size={config.iconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n )}\n </Box>\n )}\n\n {/ Body /}\n <Box\n flex={1}\n flexDirection=\"row\"\n alignItems=\"center\"\n paddingHorizontal={config.bodyPaddingHorizontal}\n paddingVertical={config.bodyPaddingVertical}\n gap={config.contentGap}\n >\n {/ Text Content /}\n <Box flex={1} gap={config.textGap}>\n {title && (\n <Typography\n variant=\"bodyMdAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"bodySm\" color={theme.colors.content.tertiary}>\n {description}\n </Typography>\n )}\n </Box>\n\n {/ Buttons /}\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexDirection=\"row\"\n alignSelf={closeButtonAlign === \"top\" ? \"flex-start\" : undefined}\n alignItems=\"center\"\n flexShrink={0}\n gap={config.buttonsGap}\n >\n {renderActionButton()}\n {renderCloseButton(config.notificationCloseIconSize)}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nNotificationPanel.displayName = \"NotificationPanel\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredDiv = createFilteredElement(\"div\");\n\nconst StyledBox = styled(FilteredDiv)<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor \|\| \"transparent\"};\n border-color: ${(props) => props.borderColor \|\| \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth \|\| 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor \|\| props.borderColor \|\| \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor \|\| props.borderColor \|\| \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor \|\| props.borderColor \|\| \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor \|\| props.borderColor \|\| \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle \|\|\n (props.borderWidth \|\|\n props.borderBottomWidth \|\|\n props.borderTopWidth \|\|\n props.borderLeftWidth \|\|\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius \|\| 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height \|\| \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width \|\| \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth \|\| \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight \|\| \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth \|\| \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight \|\| \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding \|\| 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin \|\| 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection \|\| \"column\"};\n flex-wrap: ${(props) => props.flexWrap \|\| \"nowrap\"};\n align-items: ${(props) => props.alignItems \|\| \"stretch\"};\n justify-content: ${(props) => props.justifyContent \|\| \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick \|\| props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position \|\| \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap \|\| 0};\n align-self: ${(props) => props.alignSelf \|\| \"auto\"};\n overflow: ${(props) => props.overflow \|\| \"visible\"};\n overflow-x: ${(props) => props.overflowX \|\| \"visible\"};\n overflow-y: ${(props) => props.overflowY \|\| \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement \| HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n onError,\n onLoad,\n type,\n disabled,\n id,\n testID,\n \"data-testid\": dataTestId,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt \|\| \"\"}\n onError={onError}\n onLoad={onLoad}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n ...props.style,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n elementType={as}\n id={id}\n type={as === \"button\" ? type \|\| \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n data-testid={dataTestId \|\| testID}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport isPropValid from \"@emotion/is-prop-valid\";\n\n// Props that @emotion/is-prop-valid incorrectly treats as valid HTML.\n// These are React Native or component-specific props that match\n// valid HTML patterns (on event handlers, SVG attributes).\nexport const ADDITIONAL_BLOCKED_PROPS = new Set([\n // RN-only event handlers (pass isPropValid's on* pattern)\n \"onPress\",\n \"onChangeText\",\n \"onLayout\",\n \"onMoveShouldSetResponder\",\n \"onResponderGrant\",\n \"onResponderMove\",\n \"onResponderRelease\",\n \"onResponderTerminate\",\n // SVG attributes that pass isPropValid\n \"strokeWidth\",\n // CSS properties that pass isPropValid but are used as component props\n \"overflow\",\n \"cursor\",\n \"fontSize\",\n \"fontWeight\",\n \"fontFamily\",\n \"textDecoration\",\n]);\n\nfunction shouldForwardProp(key: string): boolean {\n if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;\n return isPropValid(key);\n}\n\n/*\n Creates a React component that renders the given HTML tag\n * but filters out non-HTML props before they reach the DOM.\n \n Uses @emotion/is-prop-valid (same library styled-components v4\n * uses internally) to automatically block invalid HTML attributes,\n * plus a small blocklist for false positives (RN on* handlers, SVG attrs).\n \n Usage: `const FilteredDiv = createFilteredElement(\"div\");`\n * Then: `const StyledBox = styled(FilteredDiv)<BoxProps>\\`...\\`;`\n \n styled-components can still read ALL props for CSS interpolation,\n * but only valid HTML attributes are forwarded to the DOM element.\n /\nexport function createFilteredElement(defaultTag: string) {\n const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(\n ({ children, elementType, ...props }, ref) => {\n const Tag = (elementType as string) \|\| defaultTag;\n const htmlProps: Record<string, unknown> = {};\n for (const key of Object.keys(props)) {\n if (shouldForwardProp(key)) {\n htmlProps[key] = props[key];\n }\n }\n return React.createElement(\n Tag,\n { ref, ...htmlProps },\n children as React.ReactNode\n );\n }\n );\n Component.displayName = `Filtered(${defaultTag})`;\n return Component;\n}\n","function memoize(fn) {\n var cache = {};\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport default memoize;\n","import memoize from '@emotion/memoize';\n\nvar reactPropsRegex = /^((children\|dangerouslySetInnerHTML\|key\|ref\|autoFocus\|defaultValue\|defaultChecked\|innerHTML\|suppressContentEditableWarning\|suppressHydrationWarning\|valueLink\|accept\|acceptCharset\|accessKey\|action\|allow\|allowUserMedia\|allowPaymentRequest\|allowFullScreen\|allowTransparency\|alt\|async\|autoComplete\|autoPlay\|capture\|cellPadding\|cellSpacing\|challenge\|charSet\|checked\|cite\|classID\|className\|cols\|colSpan\|content\|contentEditable\|contextMenu\|controls\|controlsList\|coords\|crossOrigin\|data\|dateTime\|decoding\|default\|defer\|dir\|disabled\|disablePictureInPicture\|download\|draggable\|encType\|form\|formAction\|formEncType\|formMethod\|formNoValidate\|formTarget\|frameBorder\|headers\|height\|hidden\|high\|href\|hrefLang\|htmlFor\|httpEquiv\|id\|inputMode\|integrity\|is\|keyParams\|keyType\|kind\|label\|lang\|list\|loading\|loop\|low\|marginHeight\|marginWidth\|max\|maxLength\|media\|mediaGroup\|method\|min\|minLength\|multiple\|muted\|name\|nonce\|noValidate\|open\|optimum\|pattern\|placeholder\|playsInline\|poster\|preload\|profile\|radioGroup\|readOnly\|referrerPolicy\|rel\|required\|reversed\|role\|rows\|rowSpan\|sandbox\|scope\|scoped\|scrolling\|seamless\|selected\|shape\|size\|sizes\|slot\|span\|spellCheck\|src\|srcDoc\|srcLang\|srcSet\|start\|step\|style\|summary\|tabIndex\|target\|title\|type\|useMap\|value\|width\|wmode\|wrap\|about\|datatype\|inlist\|prefix\|property\|resource\|typeof\|vocab\|autoCapitalize\|autoCorrect\|autoSave\|color\|inert\|itemProp\|itemScope\|itemType\|itemID\|itemRef\|on\|results\|security\|unselectable\|accentHeight\|accumulate\|additive\|alignmentBaseline\|allowReorder\|alphabetic\|amplitude\|arabicForm\|ascent\|attributeName\|attributeType\|autoReverse\|azimuth\|baseFrequency\|baselineShift\|baseProfile\|bbox\|begin\|bias\|by\|calcMode\|capHeight\|clip\|clipPathUnits\|clipPath\|clipRule\|colorInterpolation\|colorInterpolationFilters\|colorProfile\|colorRendering\|contentScriptType\|contentStyleType\|cursor\|cx\|cy\|d\|decelerate\|descent\|diffuseConstant\|direction\|display\|divisor\|dominantBaseline\|dur\|dx\|dy\|edgeMode\|elevation\|enableBackground\|end\|exponent\|externalResourcesRequired\|fill\|fillOpacity\|fillRule\|filter\|filterRes\|filterUnits\|floodColor\|floodOpacity\|focusable\|fontFamily\|fontSize\|fontSizeAdjust\|fontStretch\|fontStyle\|fontVariant\|fontWeight\|format\|from\|fr\|fx\|fy\|g1\|g2\|glyphName\|glyphOrientationHorizontal\|glyphOrientationVertical\|glyphRef\|gradientTransform\|gradientUnits\|hanging\|horizAdvX\|horizOriginX\|ideographic\|imageRendering\|in\|in2\|intercept\|k\|k1\|k2\|k3\|k4\|kernelMatrix\|kernelUnitLength\|kerning\|keyPoints\|keySplines\|keyTimes\|lengthAdjust\|letterSpacing\|lightingColor\|limitingConeAngle\|local\|markerEnd\|markerMid\|markerStart\|markerHeight\|markerUnits\|markerWidth\|mask\|maskContentUnits\|maskUnits\|mathematical\|mode\|numOctaves\|offset\|opacity\|operator\|order\|orient\|orientation\|origin\|overflow\|overlinePosition\|overlineThickness\|panose1\|paintOrder\|pathLength\|patternContentUnits\|patternTransform\|patternUnits\|pointerEvents\|points\|pointsAtX\|pointsAtY\|pointsAtZ\|preserveAlpha\|preserveAspectRatio\|primitiveUnits\|r\|radius\|refX\|refY\|renderingIntent\|repeatCount\|repeatDur\|requiredExtensions\|requiredFeatures\|restart\|result\|rotate\|rx\|ry\|scale\|seed\|shapeRendering\|slope\|spacing\|specularConstant\|specularExponent\|speed\|spreadMethod\|startOffset\|stdDeviation\|stemh\|stemv\|stitchTiles\|stopColor\|stopOpacity\|strikethroughPosition\|strikethroughThickness\|string\|stroke\|strokeDasharray\|strokeDashoffset\|strokeLinecap\|strokeLinejoin\|strokeMiterlimit\|strokeOpacity\|strokeWidth\|surfaceScale\|systemLanguage\|tableValues\|targetX\|targetY\|textAnchor\|textDecoration\|textRendering\|textLength\|to\|transform\|u1\|u2\|underlinePosition\|underlineThickness\|unicode\|unicodeBidi\|unicodeRange\|unitsPerEm\|vAlphabetic\|vHanging\|vIdeographic\|vMathematical\|values\|vectorEffect\|version\|vertAdvY\|vertOriginX\|vertOriginY\|viewBox\|viewTarget\|visibility\|widths\|wordSpacing\|writingMode\|x\|xHeight\|x1\|x2\|xChannelSelector\|xlinkActuate\|xlinkArcrole\|xlinkHref\|xlinkRole\|xlinkShow\|xlinkTitle\|xlinkType\|xmlBase\|xmlns\|xmlnsXlink\|xmlLang\|xmlSpace\|y\|y1\|y2\|yChannelSelector\|z\|zoomAndPan\|for\|class\|autofocus)\|(([Dd][Aa][Tt][Aa]\|[Aa][Rr][Ii][Aa]\|x)-.))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar index = memoize(function (prop) {\n return reactPropsRegex.test(prop) \|\| prop.charCodeAt(0) === 111\n /* o /\n && prop.charCodeAt(1) === 110\n / n /\n && prop.charCodeAt(2) < 91;\n}\n/ Z+1 */\n);\n\nexport default index;\n"],"mappings":"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","names":["import_react","import_react","React","styled","React","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../../foundation/primitives-web/src/Box.tsx","../../../../foundation/primitives-web/src/filterDOMProps.ts","../../../../../node_modules/@emotion/memoize/dist/memoize.esm.js","../../../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type {\n NotificationPanelProps,\n NotificationPanelDevice,\n ActionButtonElement,\n} from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n IconButton,\n type ButtonProps,\n type IconButtonProps,\n type FlexButtonProps,\n} from \"@xsolla/xui-button\";\nimport { Typography } from \"@xsolla/xui-typography\";\nimport {\n ExclamationMarkSq,\n InfoSq,\n CheckCr,\n Remove,\n type BaseIconComponent,\n} from \"@xsolla/xui-icons-base\";\n\nexport type ActionButtonElement = React.ReactElement<\n ButtonProps \| IconButtonProps \| FlexButtonProps\n>;\n\nexport type NotificationPanelDevice = \"desktop\" \| \"mobile\";\n\n/** Test id on the default type icon, so its colour is assertable. /\nconst ICON_TEST_ID = \"notification-panel-icon\";\n\nexport interface NotificationPanelProps extends ThemeOverrideProps {\n /\n Layout variant.\n * - `notification` (default): full-height banner with an icon frame and a\n * stacked title/description.\n * - `announcement`: slim, single-line bar with an inline icon and the\n * title/description on one row.\n /\n variant?: \"notification\" \| \"announcement\";\n /\n Device layout mode.\n * - `desktop` (default): horizontal layout with actions on the right.\n * - `mobile`: Figma mobile layout — `notification` uses a three-column row\n * (icon \| stacked text + action \| close); `announcement` puts icon, title,\n * on one row with description below; action and close are grouped on the\n * right, top-aligned with the title row.\n /\n device?: NotificationPanelDevice;\n /* Visual variant/tone of the notification /\n type?: \"alert\" \| \"warning\" \| \"success\" \| \"neutral\" \| \"brand\";\n /* Title text (optional) /\n title?: string;\n /* Description text (optional) /\n description?: string;\n /* Show/hide the icon frame /\n showIcon?: boolean;\n /* Custom icon override (optional). Rendered as authored — the panel does not recolour it. /\n icon?: React.ReactNode;\n /\n Action button (optional - pass any Button/IconButton/FlexButton component).\n * `size` — plus `variant` and `background` for non-IconButton actions — falls\n * back to a panel default, but any value you set on the button element itself\n * takes precedence. `tone` is never overridden by the panel.\n /\n actionButton?: React.ReactElement;\n /* Show/hide close button /\n showCloseButton?: boolean;\n /* Close button click handler /\n onClose?: () => void;\n /\n Vertical alignment of the action/close button group — \"center\" (default) or\n * \"top\". Applies to the desktop `notification` variant only.\n /\n closeButtonAlign?: \"center\" \| \"top\";\n testID?: string;\n}\n\nexport const NotificationPanel: React.FC<NotificationPanelProps> = ({\n variant = \"notification\",\n device = \"desktop\",\n type = \"neutral\",\n title,\n description,\n showIcon = true,\n icon,\n actionButton,\n showCloseButton = true,\n onClose,\n closeButtonAlign = \"center\",\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel(device);\n\n const typeConfig: Record<\n NonNullable<NotificationPanelProps[\"type\"]>,\n {\n panelBg: string;\n /* Background of the slim announcement bar (and inline icon area). /\n announcementBg: string;\n iconFrameBg: string;\n /\n Glyph colour when the icon sits directly on the panel or announcement\n * surface — the mobile `notification` icon column and both\n * `announcement` layouts. Those surfaces are `overlay.` /\n `background..secondary`, which track the theme, so the glyph tracks\n it too via `content.primary`.\n /\n iconColor: string;\n /\n Glyph colour inside the desktop `notification` icon frame.\n \n `warning` and `success` fill that frame with a solid light token\n * (`background.warning.primary` #ffc380 / `background.success.primary`\n * #95ff80 — the same value in light and dark), so their glyph uses the\n * theme-independent `content.static.dark`. `content.primary` would be\n * near-white in dark mode and wash the icon out (XUITSD-4). Every other\n * type fills the frame with a translucent overlay over `panelBg`, where\n * `content.primary` is correct.\n /\n frameIconColor: string;\n buttonTone: \"brand\" \| \"brandExtra\" \| \"alert\" \| \"mono\";\n IconComponent: BaseIconComponent;\n }\n > = {\n alert: {\n panelBg: theme.colors.overlay.alert,\n announcementBg: theme.colors.background.alert.secondary,\n iconFrameBg: theme.colors.overlay.alert,\n iconColor: theme.colors.content.primary,\n frameIconColor: theme.colors.content.primary,\n buttonTone: \"alert\",\n IconComponent: ExclamationMarkSq,\n },\n warning: {\n panelBg: theme.colors.overlay.warning,\n announcementBg: theme.colors.background.warning.secondary,\n iconFrameBg: theme.colors.background.warning.primary,\n iconColor: theme.colors.content.primary,\n frameIconColor: theme.colors.content.static.dark,\n buttonTone: \"mono\",\n IconComponent: ExclamationMarkSq,\n },\n success: {\n panelBg: theme.colors.overlay.success,\n announcementBg: theme.colors.background.success.secondary,\n iconFrameBg: theme.colors.background.success.primary,\n iconColor: theme.colors.content.primary,\n frameIconColor: theme.colors.content.static.dark,\n buttonTone: \"brandExtra\",\n IconComponent: CheckCr,\n },\n neutral: {\n panelBg: theme.colors.overlay.mono,\n announcementBg: theme.colors.background.neutral.secondary,\n iconFrameBg: theme.colors.overlay.mono,\n iconColor: theme.colors.content.primary,\n frameIconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: InfoSq,\n },\n brand: {\n panelBg: theme.colors.overlay.brand,\n announcementBg: theme.colors.background.brand.secondary,\n iconFrameBg: theme.colors.overlay.brand,\n iconColor: theme.colors.content.primary,\n frameIconColor: theme.colors.content.primary,\n buttonTone: \"brand\",\n IconComponent: InfoSq,\n },\n };\n\n const currentConfig = typeConfig[type];\n const IconComponent = currentConfig.IconComponent;\n\n const ariaProps = {\n role: type === \"alert\" ? \"alert\" : \"status\",\n \"aria-label\": `${type} ${variant} ${device}`,\n } as const;\n\n // IconButton (Box-based) stays RN-safe; FlexButton is web-DOM-only.\n const renderCloseButton = (iconSize: number) =>\n showCloseButton ? (\n <IconButton\n variant=\"tertiary\"\n tone=\"mono\"\n size=\"xs\"\n onPress={onClose}\n aria-label=\"Close notification\"\n icon={<Remove size={iconSize} />}\n hoverBackground=\"none\"\n />\n ) : null;\n\n const renderActionButton = () => {\n if (!isValidElement(actionButton)) return null;\n\n const element = actionButton as ActionButtonElement;\n const isIconButton =\n (element.type as { displayName?: string }).displayName === \"IconButton\";\n\n // Caller-supplied props on the element win; the values below are defaults\n // applied only when the caller omits them. (Previously they were hard-coded,\n // and cloneElement's second argument overrides the element's own props, so a\n // passed-in size/variant was silently ignored.)\n const props = element.props as Partial<\n ButtonProps & IconButtonProps & FlexButtonProps\n >;\n\n return cloneElement(\n element,\n isIconButton\n ? { size: props.size ?? \"xs\" }\n : {\n size: props.size ?? \"xs\",\n // Non-IconButton actions default to a text-only FlexButton (Primary\n // palette → content.primary text, no fill), per the Figma \"Flex\n // Button\" node. hoverBackground is left at its default so the subtle\n // mono hover overlay from the design is preserved.\n variant: props.variant ?? \"primary\",\n background: props.background ?? false,\n }\n );\n };\n\n if (variant === \"announcement\") {\n const isMobileAnnouncement = device === \"mobile\";\n\n if (isMobileAnnouncement) {\n const descriptionIndent = showIcon\n ? config.announcementIconSize + config.announcementContentGap\n : 0;\n\n return (\n <Box\n backgroundColor={currentConfig.announcementBg}\n flexDirection=\"row\"\n alignItems=\"stretch\"\n padding={config.announcementPadding}\n gap={config.announcementGap}\n overflow=\"hidden\"\n testID={testID}\n style={{\n backdropFilter: `blur(${config.announcementBlurRadius}px)`,\n }}\n {...ariaProps}\n >\n <Box\n flex={1}\n minWidth={0}\n flexDirection=\"column\"\n gap={config.textGap}\n >\n <Box\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n gap={config.announcementContentGap}\n >\n {showIcon &&\n (icon \|\| (\n <IconComponent\n size={config.announcementIconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n data-testid={ICON_TEST_ID}\n />\n ))}\n {title && (\n <Box flex={1} minWidth={0}>\n <Typography\n variant=\"bodyXsAccent\"\n color={theme.colors.content.primary}\n noWrap\n >\n {title}\n </Typography>\n </Box>\n )}\n </Box>\n\n {description && (\n <Box paddingLeft={descriptionIndent}>\n <Typography\n variant=\"bodyXs\"\n color={theme.colors.content.secondary}\n noWrap\n >\n {description}\n </Typography>\n </Box>\n )}\n </Box>\n\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexShrink={0}\n alignSelf=\"flex-start\"\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementButtonsGap}\n >\n {renderActionButton()}\n {renderCloseButton(config.announcementCloseIconSize)}\n </Box>\n )}\n </Box>\n );\n }\n\n return (\n <Box\n backgroundColor={currentConfig.announcementBg}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n padding={config.announcementPadding}\n gap={config.announcementGap}\n overflow=\"hidden\"\n testID={testID}\n style={{\n backdropFilter: `blur(${config.announcementBlurRadius}px)`,\n }}\n {...ariaProps}\n >\n <Box\n flex={1}\n minWidth={0}\n overflow=\"hidden\"\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementContentGap}\n >\n {showIcon &&\n (icon \|\| (\n <IconComponent\n size={config.announcementIconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n data-testid={ICON_TEST_ID}\n />\n ))}\n <Box\n flex={1}\n minWidth={0}\n overflow=\"hidden\"\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementContentGap}\n >\n {title && (\n <Typography\n variant=\"bodyXsAccent\"\n color={theme.colors.content.primary}\n noWrap\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography\n variant=\"bodyXs\"\n color={theme.colors.content.secondary}\n noWrap\n >\n {description}\n </Typography>\n )}\n </Box>\n </Box>\n\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexShrink={0}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementButtonsGap}\n >\n {renderActionButton()}\n {renderCloseButton(config.announcementCloseIconSize)}\n </Box>\n )}\n </Box>\n );\n }\n\n if (device === \"mobile\") {\n return (\n <Box\n backgroundColor={currentConfig.panelBg}\n borderRadius={config.borderRadius}\n flexDirection=\"row\"\n alignItems=\"flex-start\"\n justifyContent=\"space-between\"\n overflow=\"hidden\"\n testID={testID}\n {...ariaProps}\n >\n {showIcon && (\n <Box\n alignSelf=\"stretch\"\n paddingTop={config.mobileIconColumnPaddingVertical}\n paddingBottom={config.mobileIconColumnPaddingVertical}\n paddingLeft={config.mobileIconColumnPaddingLeft}\n alignItems=\"flex-start\"\n justifyContent=\"flex-start\"\n >\n {icon \|\| (\n <IconComponent\n size={config.mobileIconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n data-testid={ICON_TEST_ID}\n />\n )}\n </Box>\n )}\n\n <Box\n flex={1}\n minWidth={0}\n paddingHorizontal={config.mobileBodyPaddingHorizontal}\n paddingVertical={config.mobileBodyPaddingVertical}\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n justifyContent=\"center\"\n gap={config.mobileBodyContentGap}\n >\n {(title \|\| description) && (\n <Box alignSelf=\"stretch\" gap={config.textGap}>\n {title && (\n <Typography\n variant=\"bodySmAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography\n variant=\"bodyXs\"\n color={theme.colors.content.tertiary}\n >\n {description}\n </Typography>\n )}\n </Box>\n )}\n\n {actionButton && (\n <Box marginLeft={config.mobileNotificationActionButtonOffsetLeft}>\n {renderActionButton()}\n </Box>\n )}\n </Box>\n\n {showCloseButton && (\n <Box\n alignSelf=\"stretch\"\n flexDirection=\"row\"\n paddingTop={config.mobileCloseColumnPaddingVertical}\n paddingBottom={config.mobileCloseColumnPaddingVertical}\n paddingRight={config.mobileCloseColumnPaddingRight}\n alignItems=\"flex-start\"\n justifyContent=\"flex-end\"\n >\n {renderCloseButton(config.notificationCloseIconSize)}\n </Box>\n )}\n </Box>\n );\n }\n\n return (\n <Box\n backgroundColor={currentConfig.panelBg}\n borderRadius={config.borderRadius}\n flexDirection=\"row\"\n alignItems=\"stretch\"\n overflow=\"hidden\"\n testID={testID}\n {...ariaProps}\n >\n {/ Icon Frame /}\n {showIcon && (\n <Box\n backgroundColor={currentConfig.iconFrameBg}\n width={config.iconFrameWidth}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={{\n borderTopLeftRadius: config.borderRadius,\n borderBottomLeftRadius: config.borderRadius,\n }}\n >\n {icon \|\| (\n <IconComponent\n size={config.iconSize}\n color={currentConfig.frameIconColor}\n variant=\"solid\"\n data-testid={ICON_TEST_ID}\n />\n )}\n </Box>\n )}\n\n {/ Body /}\n <Box\n flex={1}\n flexDirection=\"row\"\n alignItems=\"center\"\n paddingHorizontal={config.bodyPaddingHorizontal}\n paddingVertical={config.bodyPaddingVertical}\n gap={config.contentGap}\n >\n {/ Text Content /}\n <Box flex={1} gap={config.textGap}>\n {title && (\n <Typography\n variant=\"bodyMdAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"bodySm\" color={theme.colors.content.tertiary}>\n {description}\n </Typography>\n )}\n </Box>\n\n {/ Buttons /}\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexDirection=\"row\"\n alignSelf={closeButtonAlign === \"top\" ? \"flex-start\" : undefined}\n alignItems=\"center\"\n flexShrink={0}\n gap={config.buttonsGap}\n >\n {renderActionButton()}\n {renderCloseButton(config.notificationCloseIconSize)}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nNotificationPanel.displayName = \"NotificationPanel\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredDiv = createFilteredElement(\"div\");\n\nconst StyledBox = styled(FilteredDiv)<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor \|\| \"transparent\"};\n border-color: ${(props) => props.borderColor \|\| \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth \|\| 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor \|\| props.borderColor \|\| \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor \|\| props.borderColor \|\| \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor \|\| props.borderColor \|\| \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor \|\| props.borderColor \|\| \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle \|\|\n (props.borderWidth \|\|\n props.borderBottomWidth \|\|\n props.borderTopWidth \|\|\n props.borderLeftWidth \|\|\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius \|\| 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height \|\| \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width \|\| \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth \|\| \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight \|\| \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth \|\| \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight \|\| \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding \|\| 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin \|\| 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection \|\| \"column\"};\n flex-wrap: ${(props) => props.flexWrap \|\| \"nowrap\"};\n align-items: ${(props) => props.alignItems \|\| \"stretch\"};\n justify-content: ${(props) => props.justifyContent \|\| \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick \|\| props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position \|\| \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap \|\| 0};\n align-self: ${(props) => props.alignSelf \|\| \"auto\"};\n overflow: ${(props) => props.overflow \|\| \"visible\"};\n overflow-x: ${(props) => props.overflowX \|\| \"visible\"};\n overflow-y: ${(props) => props.overflowY \|\| \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement \| HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n onError,\n onLoad,\n type,\n disabled,\n id,\n testID,\n \"data-testid\": dataTestId,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt \|\| \"\"}\n onError={onError}\n onLoad={onLoad}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n ...props.style,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n elementType={as}\n id={id}\n type={as === \"button\" ? type \|\| \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n data-testid={dataTestId \|\| testID}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport isPropValid from \"@emotion/is-prop-valid\";\n\n// Props that @emotion/is-prop-valid incorrectly treats as valid HTML.\n// These are React Native or component-specific props that match\n// valid HTML patterns (on event handlers, SVG attributes).\nexport const ADDITIONAL_BLOCKED_PROPS = new Set([\n // RN-only event handlers (pass isPropValid's on* pattern)\n \"onPress\",\n \"onChangeText\",\n \"onLayout\",\n \"onMoveShouldSetResponder\",\n \"onResponderGrant\",\n \"onResponderMove\",\n \"onResponderRelease\",\n \"onResponderTerminate\",\n // SVG attributes that pass isPropValid\n \"strokeWidth\",\n // CSS properties that pass isPropValid but are used as component props\n \"overflow\",\n \"cursor\",\n \"fontSize\",\n \"fontWeight\",\n \"fontFamily\",\n \"textDecoration\",\n // Cross-platform layout prop that Text consumes as CSS, never as an\n // attribute. Pinned explicitly because it is now spread into the styled\n // component rather than destructured away before it can reach the DOM.\n \"numberOfLines\",\n]);\n\nfunction shouldForwardProp(key: string): boolean {\n if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;\n return isPropValid(key);\n}\n\n/*\n Creates a React component that renders the given HTML tag\n * but filters out non-HTML props before they reach the DOM.\n \n Uses @emotion/is-prop-valid (same library styled-components v4\n * uses internally) to automatically block invalid HTML attributes,\n * plus a small blocklist for false positives (RN on* handlers, SVG attrs).\n \n Usage: `const FilteredDiv = createFilteredElement(\"div\");`\n * Then: `const StyledBox = styled(FilteredDiv)<BoxProps>\\`...\\`;`\n \n styled-components can still read ALL props for CSS interpolation,\n * but only valid HTML attributes are forwarded to the DOM element.\n /\nexport function createFilteredElement(defaultTag: string) {\n const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(\n ({ children, elementType, ...props }, ref) => {\n const Tag = (elementType as string) \|\| defaultTag;\n const htmlProps: Record<string, unknown> = {};\n for (const key of Object.keys(props)) {\n if (shouldForwardProp(key)) {\n htmlProps[key] = props[key];\n }\n }\n return React.createElement(\n Tag,\n { ref, ...htmlProps },\n children as React.ReactNode\n );\n }\n );\n Component.displayName = `Filtered(${defaultTag})`;\n return Component;\n}\n","function memoize(fn) {\n var cache = {};\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport default memoize;\n","import memoize from '@emotion/memoize';\n\nvar reactPropsRegex = /^((children\|dangerouslySetInnerHTML\|key\|ref\|autoFocus\|defaultValue\|defaultChecked\|innerHTML\|suppressContentEditableWarning\|suppressHydrationWarning\|valueLink\|accept\|acceptCharset\|accessKey\|action\|allow\|allowUserMedia\|allowPaymentRequest\|allowFullScreen\|allowTransparency\|alt\|async\|autoComplete\|autoPlay\|capture\|cellPadding\|cellSpacing\|challenge\|charSet\|checked\|cite\|classID\|className\|cols\|colSpan\|content\|contentEditable\|contextMenu\|controls\|controlsList\|coords\|crossOrigin\|data\|dateTime\|decoding\|default\|defer\|dir\|disabled\|disablePictureInPicture\|download\|draggable\|encType\|form\|formAction\|formEncType\|formMethod\|formNoValidate\|formTarget\|frameBorder\|headers\|height\|hidden\|high\|href\|hrefLang\|htmlFor\|httpEquiv\|id\|inputMode\|integrity\|is\|keyParams\|keyType\|kind\|label\|lang\|list\|loading\|loop\|low\|marginHeight\|marginWidth\|max\|maxLength\|media\|mediaGroup\|method\|min\|minLength\|multiple\|muted\|name\|nonce\|noValidate\|open\|optimum\|pattern\|placeholder\|playsInline\|poster\|preload\|profile\|radioGroup\|readOnly\|referrerPolicy\|rel\|required\|reversed\|role\|rows\|rowSpan\|sandbox\|scope\|scoped\|scrolling\|seamless\|selected\|shape\|size\|sizes\|slot\|span\|spellCheck\|src\|srcDoc\|srcLang\|srcSet\|start\|step\|style\|summary\|tabIndex\|target\|title\|type\|useMap\|value\|width\|wmode\|wrap\|about\|datatype\|inlist\|prefix\|property\|resource\|typeof\|vocab\|autoCapitalize\|autoCorrect\|autoSave\|color\|inert\|itemProp\|itemScope\|itemType\|itemID\|itemRef\|on\|results\|security\|unselectable\|accentHeight\|accumulate\|additive\|alignmentBaseline\|allowReorder\|alphabetic\|amplitude\|arabicForm\|ascent\|attributeName\|attributeType\|autoReverse\|azimuth\|baseFrequency\|baselineShift\|baseProfile\|bbox\|begin\|bias\|by\|calcMode\|capHeight\|clip\|clipPathUnits\|clipPath\|clipRule\|colorInterpolation\|colorInterpolationFilters\|colorProfile\|colorRendering\|contentScriptType\|contentStyleType\|cursor\|cx\|cy\|d\|decelerate\|descent\|diffuseConstant\|direction\|display\|divisor\|dominantBaseline\|dur\|dx\|dy\|edgeMode\|elevation\|enableBackground\|end\|exponent\|externalResourcesRequired\|fill\|fillOpacity\|fillRule\|filter\|filterRes\|filterUnits\|floodColor\|floodOpacity\|focusable\|fontFamily\|fontSize\|fontSizeAdjust\|fontStretch\|fontStyle\|fontVariant\|fontWeight\|format\|from\|fr\|fx\|fy\|g1\|g2\|glyphName\|glyphOrientationHorizontal\|glyphOrientationVertical\|glyphRef\|gradientTransform\|gradientUnits\|hanging\|horizAdvX\|horizOriginX\|ideographic\|imageRendering\|in\|in2\|intercept\|k\|k1\|k2\|k3\|k4\|kernelMatrix\|kernelUnitLength\|kerning\|keyPoints\|keySplines\|keyTimes\|lengthAdjust\|letterSpacing\|lightingColor\|limitingConeAngle\|local\|markerEnd\|markerMid\|markerStart\|markerHeight\|markerUnits\|markerWidth\|mask\|maskContentUnits\|maskUnits\|mathematical\|mode\|numOctaves\|offset\|opacity\|operator\|order\|orient\|orientation\|origin\|overflow\|overlinePosition\|overlineThickness\|panose1\|paintOrder\|pathLength\|patternContentUnits\|patternTransform\|patternUnits\|pointerEvents\|points\|pointsAtX\|pointsAtY\|pointsAtZ\|preserveAlpha\|preserveAspectRatio\|primitiveUnits\|r\|radius\|refX\|refY\|renderingIntent\|repeatCount\|repeatDur\|requiredExtensions\|requiredFeatures\|restart\|result\|rotate\|rx\|ry\|scale\|seed\|shapeRendering\|slope\|spacing\|specularConstant\|specularExponent\|speed\|spreadMethod\|startOffset\|stdDeviation\|stemh\|stemv\|stitchTiles\|stopColor\|stopOpacity\|strikethroughPosition\|strikethroughThickness\|string\|stroke\|strokeDasharray\|strokeDashoffset\|strokeLinecap\|strokeLinejoin\|strokeMiterlimit\|strokeOpacity\|strokeWidth\|surfaceScale\|systemLanguage\|tableValues\|targetX\|targetY\|textAnchor\|textDecoration\|textRendering\|textLength\|to\|transform\|u1\|u2\|underlinePosition\|underlineThickness\|unicode\|unicodeBidi\|unicodeRange\|unitsPerEm\|vAlphabetic\|vHanging\|vIdeographic\|vMathematical\|values\|vectorEffect\|version\|vertAdvY\|vertOriginX\|vertOriginY\|viewBox\|viewTarget\|visibility\|widths\|wordSpacing\|writingMode\|x\|xHeight\|x1\|x2\|xChannelSelector\|xlinkActuate\|xlinkArcrole\|xlinkHref\|xlinkRole\|xlinkShow\|xlinkTitle\|xlinkType\|xmlBase\|xmlns\|xmlnsXlink\|xmlLang\|xmlSpace\|y\|y1\|y2\|yChannelSelector\|z\|zoomAndPan\|for\|class\|autofocus)\|(([Dd][Aa][Tt][Aa]\|[Aa][Rr][Ii][Aa]\|x)-.))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar index = memoize(function (prop) {\n return reactPropsRegex.test(prop) \|\| prop.charCodeAt(0) === 111\n /* o /\n && prop.charCodeAt(1) === 110\n / n /\n && prop.charCodeAt(2) < 91;\n}\n/ Z+1 */\n);\n\nexport default index;\n"],"mappings":"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","names":["import_react","import_react","React","styled","React","import_jsx_runtime"]}

package/web/index.mjs CHANGED Viewed

@@ -47,7 +47,11 @@ var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
   "fontSize",
   "fontWeight",
   "fontFamily",
-  "textDecoration"
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
 ]);
 function shouldForwardProp(key) {
   if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
@@ -265,6 +269,7 @@ import {
   Remove
 } from "@xsolla/xui-icons-base";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ICON_TEST_ID = "notification-panel-icon";
 var NotificationPanel = ({
   variant = "notification",
   device = "desktop",
@@ -289,6 +294,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.alert.secondary,
       iconFrameBg: theme.colors.overlay.alert,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.primary,
       buttonTone: "alert",
       IconComponent: ExclamationMarkSq
     },
@@ -297,6 +303,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.warning.secondary,
       iconFrameBg: theme.colors.background.warning.primary,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.static.dark,
       buttonTone: "mono",
       IconComponent: ExclamationMarkSq
     },
@@ -305,6 +312,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.success.secondary,
       iconFrameBg: theme.colors.background.success.primary,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.static.dark,
       buttonTone: "brandExtra",
       IconComponent: CheckCr
     },
@@ -313,6 +321,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.neutral.secondary,
       iconFrameBg: theme.colors.overlay.mono,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.primary,
       buttonTone: "mono",
       IconComponent: InfoSq
     },
@@ -321,6 +330,7 @@ var NotificationPanel = ({
       announcementBg: theme.colors.background.brand.secondary,
       iconFrameBg: theme.colors.overlay.brand,
       iconColor: theme.colors.content.primary,
+      frameIconColor: theme.colors.content.primary,
       buttonTone: "brand",
       IconComponent: InfoSq
     }
@@ -400,7 +410,8 @@ var NotificationPanel = ({
                           {
                             size: config.announcementIconSize,
                             color: currentConfig.iconColor,
-                            variant: "solid"
+                            variant: "solid",
+                            "data-testid": ICON_TEST_ID
                           }
                         )),
                         title && /* @__PURE__ */ jsx2(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx2(
@@ -476,7 +487,8 @@ var NotificationPanel = ({
                   {
                     size: config.announcementIconSize,
                     color: currentConfig.iconColor,
-                    variant: "solid"
+                    variant: "solid",
+                    "data-testid": ICON_TEST_ID
                   }
                 )),
                 /* @__PURE__ */ jsxs(
@@ -557,7 +569,8 @@ var NotificationPanel = ({
                 {
                   size: config.mobileIconSize,
                   color: currentConfig.iconColor,
-                  variant: "solid"
+                  variant: "solid",
+                  "data-testid": ICON_TEST_ID
                 }
               )
             }
@@ -639,8 +652,9 @@ var NotificationPanel = ({
               IconComponent,
               {
                 size: config.iconSize,
-                color: currentConfig.iconColor,
-                variant: "solid"
+                color: currentConfig.frameIconColor,
+                variant: "solid",
+                "data-testid": ICON_TEST_ID
               }
             )
           }