npm - @fairmint/ui - Versions diffs - 0.3.18 → 0.3.19 - Mend

@fairmint/ui 0.3.18 → 0.3.19

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 (11) hide show

package/dist/components/generic/Banner/Banner.cjs CHANGED Viewed

@@ -252,7 +252,9 @@ function Banner({
             style: {
               color: tokens.icon,
               gridArea: "icon",
-              alignSelf: "center"
+              // Top-left of the container — matches Alert; stays with the title
+              // when description/actions stretch the grid row span.
+              alignSelf: "start"
             },
             children: iconNode
           }

package/dist/components/generic/Banner/Banner.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.cjs","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" \| \"neutral\" \| \"info\" \| \"success\" \| \"warning\" \| \"error\";\nexport type BannerPresentation = \"inline\" \| \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport type BannerActions =\n \| readonly [BannerActionProps]\n \| readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /* Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. /\n title?: ReactNode;\n /* Supporting context. Omit for a title-only banner. /\n description?: ReactNode;\n /* Semantic meaning and visual treatment. @default \"brand\" /\n tone?: BannerTone;\n /* Inline content callout or full-width page-edge treatment. @default \"inline\" /\n presentation?: BannerPresentation;\n /* Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. /\n icon?: ReactNode \| null;\n /* Optional badge label displayed beside the title. /\n badgeLabel?: ReactNode;\n /* Optional standardized CTA. /\n action?: BannerActionProps;\n /* Up to two CTAs in visual order: secondary first, primary last. /\n actions?: BannerActions;\n /* Override the default accessible role. Error defaults to alert; other tones use status. /\n role?: AriaRole;\n /* Accessible label for the banner region. Defaults to the string title when possible. /\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/\n Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n /\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle \|\| hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") \|\| \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" \|\| typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/\n Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined \|\| badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n alignSelf: \"center\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined \|\| badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":["colors","fairmintVars","jsxs","jsx","radii","Text","Box","fontSizes","layout","spacing","ThemeIcon","Group","Badge","index","Button"],"mappings":"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"}
1	+ {"version":3,"file":"Banner.cjs","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" \| \"neutral\" \| \"info\" \| \"success\" \| \"warning\" \| \"error\";\nexport type BannerPresentation = \"inline\" \| \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport type BannerActions =\n \| readonly [BannerActionProps]\n \| readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /* Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. /\n title?: ReactNode;\n /* Supporting context. Omit for a title-only banner. /\n description?: ReactNode;\n /* Semantic meaning and visual treatment. @default \"brand\" /\n tone?: BannerTone;\n /* Inline content callout or full-width page-edge treatment. @default \"inline\" /\n presentation?: BannerPresentation;\n /* Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. /\n icon?: ReactNode \| null;\n /* Optional badge label displayed beside the title. /\n badgeLabel?: ReactNode;\n /* Optional standardized CTA. /\n action?: BannerActionProps;\n /* Up to two CTAs in visual order: secondary first, primary last. /\n actions?: BannerActions;\n /* Override the default accessible role. Error defaults to alert; other tones use status. /\n role?: AriaRole;\n /* Accessible label for the banner region. Defaults to the string title when possible. /\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/\n Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n /\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle \|\| hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") \|\| \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" \|\| typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/\n Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined \|\| badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n // Top-left of the container — matches Alert; stays with the title\n // when description/actions stretch the grid row span.\n alignSelf: \"start\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined \|\| badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":["colors","fairmintVars","jsxs","jsx","radii","Text","Box","fontSizes","layout","spacing","ThemeIcon","Group","Badge","index","Button"],"mappings":"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"}

package/dist/components/generic/Banner/Banner.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACxF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,aAAa,GACrB,SAAS,CAAC,iBAAiB,CAAC,GAC5B,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,oGAAoG;IACpG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,qFAAqF;IACrF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8ND;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAuB,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAc,GACf,EAAE,WAAW,~~2CA6Hb~~"}
1	+ {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACxF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,aAAa,GACrB,SAAS,CAAC,iBAAiB,CAAC,GAC5B,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,oGAAoG;IACpG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,qFAAqF;IACrF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8ND;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAuB,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAc,GACf,EAAE,WAAW,2CA+Hb"}

package/dist/components/generic/Banner/Banner.js CHANGED Viewed

@@ -250,7 +250,9 @@ function Banner({
             style: {
               color: tokens.icon,
               gridArea: "icon",
-              alignSelf: "center"
+              // Top-left of the container — matches Alert; stays with the title
+              // when description/actions stretch the grid row span.
+              alignSelf: "start"
             },
             children: iconNode
           }

package/dist/components/generic/Banner/Banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.js","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" \| \"neutral\" \| \"info\" \| \"success\" \| \"warning\" \| \"error\";\nexport type BannerPresentation = \"inline\" \| \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport type BannerActions =\n \| readonly [BannerActionProps]\n \| readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /* Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. /\n title?: ReactNode;\n /* Supporting context. Omit for a title-only banner. /\n description?: ReactNode;\n /* Semantic meaning and visual treatment. @default \"brand\" /\n tone?: BannerTone;\n /* Inline content callout or full-width page-edge treatment. @default \"inline\" /\n presentation?: BannerPresentation;\n /* Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. /\n icon?: ReactNode \| null;\n /* Optional badge label displayed beside the title. /\n badgeLabel?: ReactNode;\n /* Optional standardized CTA. /\n action?: BannerActionProps;\n /* Up to two CTAs in visual order: secondary first, primary last. /\n actions?: BannerActions;\n /* Override the default accessible role. Error defaults to alert; other tones use status. /\n role?: AriaRole;\n /* Accessible label for the banner region. Defaults to the string title when possible. /\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/\n Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n /\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle \|\| hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") \|\| \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" \|\| typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/\n Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined \|\| badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n alignSelf: \"center\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined \|\| badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Banner.js","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" \| \"neutral\" \| \"info\" \| \"success\" \| \"warning\" \| \"error\";\nexport type BannerPresentation = \"inline\" \| \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport type BannerActions =\n \| readonly [BannerActionProps]\n \| readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /* Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. /\n title?: ReactNode;\n /* Supporting context. Omit for a title-only banner. /\n description?: ReactNode;\n /* Semantic meaning and visual treatment. @default \"brand\" /\n tone?: BannerTone;\n /* Inline content callout or full-width page-edge treatment. @default \"inline\" /\n presentation?: BannerPresentation;\n /* Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. /\n icon?: ReactNode \| null;\n /* Optional badge label displayed beside the title. /\n badgeLabel?: ReactNode;\n /* Optional standardized CTA. /\n action?: BannerActionProps;\n /* Up to two CTAs in visual order: secondary first, primary last. /\n actions?: BannerActions;\n /* Override the default accessible role. Error defaults to alert; other tones use status. /\n role?: AriaRole;\n /* Accessible label for the banner region. Defaults to the string title when possible. /\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/\n Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n /\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle \|\| hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") \|\| \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" \|\| typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/\n Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined \|\| badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n // Top-left of the container — matches Alert; stays with the title\n // when description/actions stretch the grid row span.\n alignSelf: \"start\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined \|\| badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/primitives/Alert/Alert.cjs CHANGED Viewed

@@ -132,6 +132,10 @@ function Alert({
       // Slightly more room on the trailing edge than Mantine's symmetric md.
       paddingInlineEnd: spacing.spacing.lg
     },
+    // Top-align the icon with the title rather than centering against multi-line body.
+    wrapper: {
+      alignItems: "flex-start"
+    },
     body: {
       // Tighter than Mantine's default spacing.xs between title and body.
       gap: "0.25rem"
@@ -163,6 +167,7 @@ function Alert({
       ...surfaceStyles,
       ...resolved,
       root: mergePart("root", resolved.root),
+      wrapper: mergePart("wrapper", resolved.wrapper),
       body: mergePart("body", resolved.body),
       title: mergePart("title", resolved.title),
       label: mergePart("label", resolved.label),
@@ -173,6 +178,7 @@ function Alert({
     ...surfaceStyles,
     ...styles,
     root: mergePart("root", styles?.root),
+    wrapper: mergePart("wrapper", styles?.wrapper),
     body: mergePart("body", styles?.body),
     title: mergePart("title", styles?.title),
     label: mergePart("label", styles?.label),

package/dist/components/primitives/Alert/Alert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/primitives/Alert/Alert.tsx"],"sourcesContent":["import { Alert as MantineAlert, type AlertProps as MantineAlertProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\nexport type AlertTone = \"info\" \| \"success\" \| \"warning\" \| \"error\";\n\nexport interface AlertActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport interface AlertProps extends Omit<MantineAlertProps, \"icon\"> {\n /\n Optional CTA rendered with Banner-aligned button styling.\n * Prefer this over embedding buttons in `children`.\n /\n action?: AlertActionProps;\n /* MUI-compat severity. Prefer Fairmint color tokens via `color`. /\n severity?: string;\n sx?: Sx;\n /\n Icon before content. Pass `null` to hide.\n * When omitted, a default tone icon is shown.\n */\n icon?: ReactNode \| null;\n}\n\nconst colorMap: Record<string, string> = {\n error: colors.error,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst TONE_TOKENS = {\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst SeverityIcon = ({ tone }: { tone: AlertTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n \"data-fairmint-alert-icon\": tone,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst COLOR_TO_TONE: Record<string, AlertTone> = {\n error: \"error\",\n red: \"error\",\n danger: \"error\",\n warning: \"warning\",\n yellow: \"warning\",\n orange: \"warning\",\n success: \"success\",\n green: \"success\",\n teal: \"success\",\n info: \"info\",\n blue: \"info\",\n indigo: \"info\",\n};\n\nfunction resolveTone(severity?: string, color?: MantineAlertProps[\"color\"]): AlertTone {\n if (severity) {\n const fromSeverity = COLOR_TO_TONE[String(severity).toLowerCase()];\n if (fromSeverity) return fromSeverity;\n }\n\n if (typeof color === \"string\") {\n const fromColor = COLOR_TO_TONE[color] ?? COLOR_TO_TONE[color.toLowerCase()];\n if (fromColor) return fromColor;\n }\n\n return \"info\";\n}\n\nconst actionVariant = (tone: AlertTone): ButtonProps[\"variant\"] => {\n if (tone === \"info\") return \"light\";\n return \"filled\";\n};\n\nexport function Alert({\n action,\n children,\n className,\n classNames,\n color,\n icon,\n severity,\n styles,\n sx,\n style,\n variant = \"light\",\n ...props\n}: AlertProps) {\n const sxStyle = useSxStyle(sx);\n const tone = resolveTone(severity, color);\n const tokens = TONE_TOKENS[tone];\n const resolvedColor = severity ? colorMap[severity] \|\| severity : (color ?? colors.info);\n const needsCompat = severity !== undefined \|\| sx !== undefined;\n const resolvedIcon = icon === null ? null : (icon ?? <SeverityIcon tone={tone} />);\n\n const surfaceStyles = {\n root: {\n // Slightly more room on the trailing edge than Mantine's symmetric md.\n paddingInlineEnd: spacing.lg,\n } as CSSProperties,\n body: {\n // Tighter than Mantine's default spacing.xs between title and body.\n gap: \"0.25rem\",\n } as CSSProperties,\n title: {\n color: fairmintVars.colorTextPrimary,\n fontWeight: 600,\n } as CSSProperties,\n label: {\n color: fairmintVars.colorTextPrimary,\n } as CSSProperties,\n message: {\n color: fairmintVars.colorTextSecondary,\n } as CSSProperties,\n icon: {\n backgroundColor: \"transparent\",\n color: tokens.icon,\n width: 20,\n height: 20,\n minWidth: 20,\n // Match the root padding used when there is no icon (spacing.md).\n marginInlineEnd: spacing.md,\n } as CSSProperties,\n };\n\n const mergePart = (\n key: keyof typeof surfaceStyles,\n override: CSSProperties \| undefined,\n ): CSSProperties => ({ ...surfaceStyles[key], ...override });\n\n const mergedStyles: AlertProps[\"styles\"] =\n typeof styles === \"function\"\n ? (theme, params, ctx) => {\n const resolved = styles(theme, params, ctx);\n return {\n ...surfaceStyles,\n ...resolved,\n root: mergePart(\"root\", resolved.root),\n body: mergePart(\"body\", resolved.body),\n title: mergePart(\"title\", resolved.title),\n label: mergePart(\"label\", resolved.label),\n message: mergePart(\"message\", resolved.message),\n icon: mergePart(\"icon\", resolved.icon),\n };\n }\n : {\n ...surfaceStyles,\n ...styles,\n root: mergePart(\"root\", styles?.root),\n body: mergePart(\"body\", styles?.body),\n title: mergePart(\"title\", styles?.title),\n label: mergePart(\"label\", styles?.label),\n message: mergePart(\"message\", styles?.message),\n icon: mergePart(\"icon\", styles?.icon),\n };\n\n const classNameMap = typeof classNames === \"function\" ? undefined : classNames;\n\n return (\n <MantineAlert\n className={\n needsCompat\n ? [\n \"MuiAlert-root\",\n \"fairmint-alert-root\",\n severity\n ? `MuiAlert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n severity\n ? `fairmint-alert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n className,\n ]\n .filter(Boolean)\n .join(\" \")\n : className\n }\n classNames={\n needsCompat\n ? {\n ...classNameMap,\n body: [\"fairmint-alert-body\", classNameMap?.body].filter(Boolean).join(\" \"),\n icon: [\"fairmint-alert-icon\", classNameMap?.icon].filter(Boolean).join(\" \"),\n message: [\"fairmint-alert-message\", classNameMap?.message].filter(Boolean).join(\" \"),\n root: [\"fairmint-alert-root\", classNameMap?.root].filter(Boolean).join(\" \"),\n wrapper: [\"fairmint-alert-wrapper\", classNameMap?.wrapper].filter(Boolean).join(\" \"),\n }\n : classNames\n }\n color={resolvedColor}\n data-tone={tone}\n icon={resolvedIcon}\n radius=\"lg\"\n style={{\n ...sxStyle,\n ...style,\n }}\n styles={mergedStyles}\n vars={() => ({\n root: {\n \"--alert-bg\": tokens.background,\n \"--alert-color\": tokens.icon,\n \"--alert-bd\": `1px solid ${tokens.border}`,\n },\n })}\n variant={variant}\n {...props}\n >\n {children}\n {action ? (\n <span\n className=\"fairmint-alert-action\"\n style={{\n display: \"block\",\n marginTop: spacing.xs,\n }}\n >\n <Button\n {...action}\n color={resolvedColor}\n size={action.size ?? \"sm\"}\n variant={actionVariant(tone)}\n style={{\n ...action.style,\n boxSizing: \"border-box\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n }}\n >\n {action.label}\n </Button>\n </span>\n ) : null}\n </MantineAlert>\n );\n}\n"],"names":["colors","fairmintVars","jsxs","jsx","sx","useSxStyle","spacing","MantineAlert","Button"],"mappings":"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"}
1	+ {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/primitives/Alert/Alert.tsx"],"sourcesContent":["import { Alert as MantineAlert, type AlertProps as MantineAlertProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\nexport type AlertTone = \"info\" \| \"success\" \| \"warning\" \| \"error\";\n\nexport interface AlertActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport interface AlertProps extends Omit<MantineAlertProps, \"icon\"> {\n /\n Optional CTA rendered with Banner-aligned button styling.\n * Prefer this over embedding buttons in `children`.\n /\n action?: AlertActionProps;\n /* MUI-compat severity. Prefer Fairmint color tokens via `color`. /\n severity?: string;\n sx?: Sx;\n /\n Icon before content. Pass `null` to hide.\n * When omitted, a default tone icon is shown.\n */\n icon?: ReactNode \| null;\n}\n\nconst colorMap: Record<string, string> = {\n error: colors.error,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst TONE_TOKENS = {\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst SeverityIcon = ({ tone }: { tone: AlertTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n \"data-fairmint-alert-icon\": tone,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst COLOR_TO_TONE: Record<string, AlertTone> = {\n error: \"error\",\n red: \"error\",\n danger: \"error\",\n warning: \"warning\",\n yellow: \"warning\",\n orange: \"warning\",\n success: \"success\",\n green: \"success\",\n teal: \"success\",\n info: \"info\",\n blue: \"info\",\n indigo: \"info\",\n};\n\nfunction resolveTone(severity?: string, color?: MantineAlertProps[\"color\"]): AlertTone {\n if (severity) {\n const fromSeverity = COLOR_TO_TONE[String(severity).toLowerCase()];\n if (fromSeverity) return fromSeverity;\n }\n\n if (typeof color === \"string\") {\n const fromColor = COLOR_TO_TONE[color] ?? COLOR_TO_TONE[color.toLowerCase()];\n if (fromColor) return fromColor;\n }\n\n return \"info\";\n}\n\nconst actionVariant = (tone: AlertTone): ButtonProps[\"variant\"] => {\n if (tone === \"info\") return \"light\";\n return \"filled\";\n};\n\nexport function Alert({\n action,\n children,\n className,\n classNames,\n color,\n icon,\n severity,\n styles,\n sx,\n style,\n variant = \"light\",\n ...props\n}: AlertProps) {\n const sxStyle = useSxStyle(sx);\n const tone = resolveTone(severity, color);\n const tokens = TONE_TOKENS[tone];\n const resolvedColor = severity ? colorMap[severity] \|\| severity : (color ?? colors.info);\n const needsCompat = severity !== undefined \|\| sx !== undefined;\n const resolvedIcon = icon === null ? null : (icon ?? <SeverityIcon tone={tone} />);\n\n const surfaceStyles = {\n root: {\n // Slightly more room on the trailing edge than Mantine's symmetric md.\n paddingInlineEnd: spacing.lg,\n } as CSSProperties,\n // Top-align the icon with the title rather than centering against multi-line body.\n wrapper: {\n alignItems: \"flex-start\",\n } as CSSProperties,\n body: {\n // Tighter than Mantine's default spacing.xs between title and body.\n gap: \"0.25rem\",\n } as CSSProperties,\n title: {\n color: fairmintVars.colorTextPrimary,\n fontWeight: 600,\n } as CSSProperties,\n label: {\n color: fairmintVars.colorTextPrimary,\n } as CSSProperties,\n message: {\n color: fairmintVars.colorTextSecondary,\n } as CSSProperties,\n icon: {\n backgroundColor: \"transparent\",\n color: tokens.icon,\n width: 20,\n height: 20,\n minWidth: 20,\n // Match the root padding used when there is no icon (spacing.md).\n marginInlineEnd: spacing.md,\n } as CSSProperties,\n };\n\n const mergePart = (\n key: keyof typeof surfaceStyles,\n override: CSSProperties \| undefined,\n ): CSSProperties => ({ ...surfaceStyles[key], ...override });\n\n const mergedStyles: AlertProps[\"styles\"] =\n typeof styles === \"function\"\n ? (theme, params, ctx) => {\n const resolved = styles(theme, params, ctx);\n return {\n ...surfaceStyles,\n ...resolved,\n root: mergePart(\"root\", resolved.root),\n wrapper: mergePart(\"wrapper\", resolved.wrapper),\n body: mergePart(\"body\", resolved.body),\n title: mergePart(\"title\", resolved.title),\n label: mergePart(\"label\", resolved.label),\n message: mergePart(\"message\", resolved.message),\n icon: mergePart(\"icon\", resolved.icon),\n };\n }\n : {\n ...surfaceStyles,\n ...styles,\n root: mergePart(\"root\", styles?.root),\n wrapper: mergePart(\"wrapper\", styles?.wrapper),\n body: mergePart(\"body\", styles?.body),\n title: mergePart(\"title\", styles?.title),\n label: mergePart(\"label\", styles?.label),\n message: mergePart(\"message\", styles?.message),\n icon: mergePart(\"icon\", styles?.icon),\n };\n\n const classNameMap = typeof classNames === \"function\" ? undefined : classNames;\n\n return (\n <MantineAlert\n className={\n needsCompat\n ? [\n \"MuiAlert-root\",\n \"fairmint-alert-root\",\n severity\n ? `MuiAlert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n severity\n ? `fairmint-alert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n className,\n ]\n .filter(Boolean)\n .join(\" \")\n : className\n }\n classNames={\n needsCompat\n ? {\n ...classNameMap,\n body: [\"fairmint-alert-body\", classNameMap?.body].filter(Boolean).join(\" \"),\n icon: [\"fairmint-alert-icon\", classNameMap?.icon].filter(Boolean).join(\" \"),\n message: [\"fairmint-alert-message\", classNameMap?.message].filter(Boolean).join(\" \"),\n root: [\"fairmint-alert-root\", classNameMap?.root].filter(Boolean).join(\" \"),\n wrapper: [\"fairmint-alert-wrapper\", classNameMap?.wrapper].filter(Boolean).join(\" \"),\n }\n : classNames\n }\n color={resolvedColor}\n data-tone={tone}\n icon={resolvedIcon}\n radius=\"lg\"\n style={{\n ...sxStyle,\n ...style,\n }}\n styles={mergedStyles}\n vars={() => ({\n root: {\n \"--alert-bg\": tokens.background,\n \"--alert-color\": tokens.icon,\n \"--alert-bd\": `1px solid ${tokens.border}`,\n },\n })}\n variant={variant}\n {...props}\n >\n {children}\n {action ? (\n <span\n className=\"fairmint-alert-action\"\n style={{\n display: \"block\",\n marginTop: spacing.xs,\n }}\n >\n <Button\n {...action}\n color={resolvedColor}\n size={action.size ?? \"sm\"}\n variant={actionVariant(tone)}\n style={{\n ...action.style,\n boxSizing: \"border-box\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n }}\n >\n {action.label}\n </Button>\n </span>\n ) : null}\n </MantineAlert>\n );\n}\n"],"names":["colors","fairmintVars","jsxs","jsx","sx","useSxStyle","spacing","MantineAlert","Button"],"mappings":"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"}

package/dist/components/primitives/Alert/Alert.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,EAAc,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC3F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACjE;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,EAAE,CAAC;IACR;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB;AA0HD,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,EAAE,EACF,KAAK,EACL,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,UAAU,~~2CAqJZ~~"}
1	+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,EAAc,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC3F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACjE;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,EAAE,CAAC;IACR;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB;AA0HD,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,EAAE,EACF,KAAK,EACL,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,UAAU,2CA2JZ"}

package/dist/components/primitives/Alert/Alert.js CHANGED Viewed

@@ -130,6 +130,10 @@ function Alert({
       // Slightly more room on the trailing edge than Mantine's symmetric md.
       paddingInlineEnd: spacing.lg
     },
+    // Top-align the icon with the title rather than centering against multi-line body.
+    wrapper: {
+      alignItems: "flex-start"
+    },
     body: {
       // Tighter than Mantine's default spacing.xs between title and body.
       gap: "0.25rem"
@@ -161,6 +165,7 @@ function Alert({
       ...surfaceStyles,
       ...resolved,
       root: mergePart("root", resolved.root),
+      wrapper: mergePart("wrapper", resolved.wrapper),
       body: mergePart("body", resolved.body),
       title: mergePart("title", resolved.title),
       label: mergePart("label", resolved.label),
@@ -171,6 +176,7 @@ function Alert({
     ...surfaceStyles,
     ...styles,
     root: mergePart("root", styles?.root),
+    wrapper: mergePart("wrapper", styles?.wrapper),
     body: mergePart("body", styles?.body),
     title: mergePart("title", styles?.title),
     label: mergePart("label", styles?.label),

package/dist/components/primitives/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../src/components/primitives/Alert/Alert.tsx"],"sourcesContent":["import { Alert as MantineAlert, type AlertProps as MantineAlertProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\nexport type AlertTone = \"info\" \| \"success\" \| \"warning\" \| \"error\";\n\nexport interface AlertActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport interface AlertProps extends Omit<MantineAlertProps, \"icon\"> {\n /\n Optional CTA rendered with Banner-aligned button styling.\n * Prefer this over embedding buttons in `children`.\n /\n action?: AlertActionProps;\n /* MUI-compat severity. Prefer Fairmint color tokens via `color`. /\n severity?: string;\n sx?: Sx;\n /\n Icon before content. Pass `null` to hide.\n * When omitted, a default tone icon is shown.\n */\n icon?: ReactNode \| null;\n}\n\nconst colorMap: Record<string, string> = {\n error: colors.error,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst TONE_TOKENS = {\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst SeverityIcon = ({ tone }: { tone: AlertTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n \"data-fairmint-alert-icon\": tone,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst COLOR_TO_TONE: Record<string, AlertTone> = {\n error: \"error\",\n red: \"error\",\n danger: \"error\",\n warning: \"warning\",\n yellow: \"warning\",\n orange: \"warning\",\n success: \"success\",\n green: \"success\",\n teal: \"success\",\n info: \"info\",\n blue: \"info\",\n indigo: \"info\",\n};\n\nfunction resolveTone(severity?: string, color?: MantineAlertProps[\"color\"]): AlertTone {\n if (severity) {\n const fromSeverity = COLOR_TO_TONE[String(severity).toLowerCase()];\n if (fromSeverity) return fromSeverity;\n }\n\n if (typeof color === \"string\") {\n const fromColor = COLOR_TO_TONE[color] ?? COLOR_TO_TONE[color.toLowerCase()];\n if (fromColor) return fromColor;\n }\n\n return \"info\";\n}\n\nconst actionVariant = (tone: AlertTone): ButtonProps[\"variant\"] => {\n if (tone === \"info\") return \"light\";\n return \"filled\";\n};\n\nexport function Alert({\n action,\n children,\n className,\n classNames,\n color,\n icon,\n severity,\n styles,\n sx,\n style,\n variant = \"light\",\n ...props\n}: AlertProps) {\n const sxStyle = useSxStyle(sx);\n const tone = resolveTone(severity, color);\n const tokens = TONE_TOKENS[tone];\n const resolvedColor = severity ? colorMap[severity] \|\| severity : (color ?? colors.info);\n const needsCompat = severity !== undefined \|\| sx !== undefined;\n const resolvedIcon = icon === null ? null : (icon ?? <SeverityIcon tone={tone} />);\n\n const surfaceStyles = {\n root: {\n // Slightly more room on the trailing edge than Mantine's symmetric md.\n paddingInlineEnd: spacing.lg,\n } as CSSProperties,\n body: {\n // Tighter than Mantine's default spacing.xs between title and body.\n gap: \"0.25rem\",\n } as CSSProperties,\n title: {\n color: fairmintVars.colorTextPrimary,\n fontWeight: 600,\n } as CSSProperties,\n label: {\n color: fairmintVars.colorTextPrimary,\n } as CSSProperties,\n message: {\n color: fairmintVars.colorTextSecondary,\n } as CSSProperties,\n icon: {\n backgroundColor: \"transparent\",\n color: tokens.icon,\n width: 20,\n height: 20,\n minWidth: 20,\n // Match the root padding used when there is no icon (spacing.md).\n marginInlineEnd: spacing.md,\n } as CSSProperties,\n };\n\n const mergePart = (\n key: keyof typeof surfaceStyles,\n override: CSSProperties \| undefined,\n ): CSSProperties => ({ ...surfaceStyles[key], ...override });\n\n const mergedStyles: AlertProps[\"styles\"] =\n typeof styles === \"function\"\n ? (theme, params, ctx) => {\n const resolved = styles(theme, params, ctx);\n return {\n ...surfaceStyles,\n ...resolved,\n root: mergePart(\"root\", resolved.root),\n body: mergePart(\"body\", resolved.body),\n title: mergePart(\"title\", resolved.title),\n label: mergePart(\"label\", resolved.label),\n message: mergePart(\"message\", resolved.message),\n icon: mergePart(\"icon\", resolved.icon),\n };\n }\n : {\n ...surfaceStyles,\n ...styles,\n root: mergePart(\"root\", styles?.root),\n body: mergePart(\"body\", styles?.body),\n title: mergePart(\"title\", styles?.title),\n label: mergePart(\"label\", styles?.label),\n message: mergePart(\"message\", styles?.message),\n icon: mergePart(\"icon\", styles?.icon),\n };\n\n const classNameMap = typeof classNames === \"function\" ? undefined : classNames;\n\n return (\n <MantineAlert\n className={\n needsCompat\n ? [\n \"MuiAlert-root\",\n \"fairmint-alert-root\",\n severity\n ? `MuiAlert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n severity\n ? `fairmint-alert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n className,\n ]\n .filter(Boolean)\n .join(\" \")\n : className\n }\n classNames={\n needsCompat\n ? {\n ...classNameMap,\n body: [\"fairmint-alert-body\", classNameMap?.body].filter(Boolean).join(\" \"),\n icon: [\"fairmint-alert-icon\", classNameMap?.icon].filter(Boolean).join(\" \"),\n message: [\"fairmint-alert-message\", classNameMap?.message].filter(Boolean).join(\" \"),\n root: [\"fairmint-alert-root\", classNameMap?.root].filter(Boolean).join(\" \"),\n wrapper: [\"fairmint-alert-wrapper\", classNameMap?.wrapper].filter(Boolean).join(\" \"),\n }\n : classNames\n }\n color={resolvedColor}\n data-tone={tone}\n icon={resolvedIcon}\n radius=\"lg\"\n style={{\n ...sxStyle,\n ...style,\n }}\n styles={mergedStyles}\n vars={() => ({\n root: {\n \"--alert-bg\": tokens.background,\n \"--alert-color\": tokens.icon,\n \"--alert-bd\": `1px solid ${tokens.border}`,\n },\n })}\n variant={variant}\n {...props}\n >\n {children}\n {action ? (\n <span\n className=\"fairmint-alert-action\"\n style={{\n display: \"block\",\n marginTop: spacing.xs,\n }}\n >\n <Button\n {...action}\n color={resolvedColor}\n size={action.size ?? \"sm\"}\n variant={actionVariant(tone)}\n style={{\n ...action.style,\n boxSizing: \"border-box\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n }}\n >\n {action.label}\n </Button>\n </span>\n ) : null}\n </MantineAlert>\n );\n}\n"],"names":["MantineAlert"],"mappings":"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"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../src/components/primitives/Alert/Alert.tsx"],"sourcesContent":["import { Alert as MantineAlert, type AlertProps as MantineAlertProps } from \"@mantine/core\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { type Sx, useSxStyle } from \"../sx\";\n\nexport type AlertTone = \"info\" \| \"success\" \| \"warning\" \| \"error\";\n\nexport interface AlertActionProps extends Omit<ButtonProps, \"children\" \| \"color\" \| \"variant\"> {\n /** Visible action label. /\n label: ReactNode;\n}\n\nexport interface AlertProps extends Omit<MantineAlertProps, \"icon\"> {\n /\n Optional CTA rendered with Banner-aligned button styling.\n * Prefer this over embedding buttons in `children`.\n /\n action?: AlertActionProps;\n /* MUI-compat severity. Prefer Fairmint color tokens via `color`. /\n severity?: string;\n sx?: Sx;\n /\n Icon before content. Pass `null` to hide.\n * When omitted, a default tone icon is shown.\n */\n icon?: ReactNode \| null;\n}\n\nconst colorMap: Record<string, string> = {\n error: colors.error,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n};\n\nconst TONE_TOKENS = {\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst SeverityIcon = ({ tone }: { tone: AlertTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n \"data-fairmint-alert-icon\": tone,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst COLOR_TO_TONE: Record<string, AlertTone> = {\n error: \"error\",\n red: \"error\",\n danger: \"error\",\n warning: \"warning\",\n yellow: \"warning\",\n orange: \"warning\",\n success: \"success\",\n green: \"success\",\n teal: \"success\",\n info: \"info\",\n blue: \"info\",\n indigo: \"info\",\n};\n\nfunction resolveTone(severity?: string, color?: MantineAlertProps[\"color\"]): AlertTone {\n if (severity) {\n const fromSeverity = COLOR_TO_TONE[String(severity).toLowerCase()];\n if (fromSeverity) return fromSeverity;\n }\n\n if (typeof color === \"string\") {\n const fromColor = COLOR_TO_TONE[color] ?? COLOR_TO_TONE[color.toLowerCase()];\n if (fromColor) return fromColor;\n }\n\n return \"info\";\n}\n\nconst actionVariant = (tone: AlertTone): ButtonProps[\"variant\"] => {\n if (tone === \"info\") return \"light\";\n return \"filled\";\n};\n\nexport function Alert({\n action,\n children,\n className,\n classNames,\n color,\n icon,\n severity,\n styles,\n sx,\n style,\n variant = \"light\",\n ...props\n}: AlertProps) {\n const sxStyle = useSxStyle(sx);\n const tone = resolveTone(severity, color);\n const tokens = TONE_TOKENS[tone];\n const resolvedColor = severity ? colorMap[severity] \|\| severity : (color ?? colors.info);\n const needsCompat = severity !== undefined \|\| sx !== undefined;\n const resolvedIcon = icon === null ? null : (icon ?? <SeverityIcon tone={tone} />);\n\n const surfaceStyles = {\n root: {\n // Slightly more room on the trailing edge than Mantine's symmetric md.\n paddingInlineEnd: spacing.lg,\n } as CSSProperties,\n // Top-align the icon with the title rather than centering against multi-line body.\n wrapper: {\n alignItems: \"flex-start\",\n } as CSSProperties,\n body: {\n // Tighter than Mantine's default spacing.xs between title and body.\n gap: \"0.25rem\",\n } as CSSProperties,\n title: {\n color: fairmintVars.colorTextPrimary,\n fontWeight: 600,\n } as CSSProperties,\n label: {\n color: fairmintVars.colorTextPrimary,\n } as CSSProperties,\n message: {\n color: fairmintVars.colorTextSecondary,\n } as CSSProperties,\n icon: {\n backgroundColor: \"transparent\",\n color: tokens.icon,\n width: 20,\n height: 20,\n minWidth: 20,\n // Match the root padding used when there is no icon (spacing.md).\n marginInlineEnd: spacing.md,\n } as CSSProperties,\n };\n\n const mergePart = (\n key: keyof typeof surfaceStyles,\n override: CSSProperties \| undefined,\n ): CSSProperties => ({ ...surfaceStyles[key], ...override });\n\n const mergedStyles: AlertProps[\"styles\"] =\n typeof styles === \"function\"\n ? (theme, params, ctx) => {\n const resolved = styles(theme, params, ctx);\n return {\n ...surfaceStyles,\n ...resolved,\n root: mergePart(\"root\", resolved.root),\n wrapper: mergePart(\"wrapper\", resolved.wrapper),\n body: mergePart(\"body\", resolved.body),\n title: mergePart(\"title\", resolved.title),\n label: mergePart(\"label\", resolved.label),\n message: mergePart(\"message\", resolved.message),\n icon: mergePart(\"icon\", resolved.icon),\n };\n }\n : {\n ...surfaceStyles,\n ...styles,\n root: mergePart(\"root\", styles?.root),\n wrapper: mergePart(\"wrapper\", styles?.wrapper),\n body: mergePart(\"body\", styles?.body),\n title: mergePart(\"title\", styles?.title),\n label: mergePart(\"label\", styles?.label),\n message: mergePart(\"message\", styles?.message),\n icon: mergePart(\"icon\", styles?.icon),\n };\n\n const classNameMap = typeof classNames === \"function\" ? undefined : classNames;\n\n return (\n <MantineAlert\n className={\n needsCompat\n ? [\n \"MuiAlert-root\",\n \"fairmint-alert-root\",\n severity\n ? `MuiAlert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n severity\n ? `fairmint-alert-standard${String(severity).charAt(0).toUpperCase()}${String(severity).slice(1)}`\n : undefined,\n className,\n ]\n .filter(Boolean)\n .join(\" \")\n : className\n }\n classNames={\n needsCompat\n ? {\n ...classNameMap,\n body: [\"fairmint-alert-body\", classNameMap?.body].filter(Boolean).join(\" \"),\n icon: [\"fairmint-alert-icon\", classNameMap?.icon].filter(Boolean).join(\" \"),\n message: [\"fairmint-alert-message\", classNameMap?.message].filter(Boolean).join(\" \"),\n root: [\"fairmint-alert-root\", classNameMap?.root].filter(Boolean).join(\" \"),\n wrapper: [\"fairmint-alert-wrapper\", classNameMap?.wrapper].filter(Boolean).join(\" \"),\n }\n : classNames\n }\n color={resolvedColor}\n data-tone={tone}\n icon={resolvedIcon}\n radius=\"lg\"\n style={{\n ...sxStyle,\n ...style,\n }}\n styles={mergedStyles}\n vars={() => ({\n root: {\n \"--alert-bg\": tokens.background,\n \"--alert-color\": tokens.icon,\n \"--alert-bd\": `1px solid ${tokens.border}`,\n },\n })}\n variant={variant}\n {...props}\n >\n {children}\n {action ? (\n <span\n className=\"fairmint-alert-action\"\n style={{\n display: \"block\",\n marginTop: spacing.xs,\n }}\n >\n <Button\n {...action}\n color={resolvedColor}\n size={action.size ?? \"sm\"}\n variant={actionVariant(tone)}\n style={{\n ...action.style,\n boxSizing: \"border-box\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n }}\n >\n {action.label}\n </Button>\n </span>\n ) : null}\n </MantineAlert>\n );\n}\n"],"names":["MantineAlert"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fairmint/ui",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "type": "module",
   "description": "Fairmint design system and UI component library",
   "license": "UNLICENSED",